470,849 Members | 659 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,849 developers. It's quick & easy.

Set image onclick and keep it there

Hi All,

I am hoping someone can help me. I am trying to setup my main page so that
when the user moves the mouse over an image, it changes the source (got this
working). When the user CLICKS on the image (it is a link to the content
page) it changes to a third image AND STAYS THERE. ie: so the iamge won't
change back to the omouseoff image. Does this make sense?

Also, how do I "preload" the images before they are even needed? eg: so the
Loading image loads immedeately.

Here is the code I have so far, which works as far is it goes, however the
"Loading" image is overwritten by the mouse off function. What am I doing
wrong? (Sorry for formatting):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script id="clientEventHandlersJS" language="javascript">
<!--

var clicked='false';

function fncover(){
if (clicked='false')
{
IMG1.src='./images/webmainlogoover.gif';
}
}

function fncoff(){
if (clicked='false')
{
IMG1.src='./images/webmainlogo.gif';
}
}

function fncclick(){
IMG1.src='./images/Loading.gif';
clicked='true';
}

//-->
</script>
</head>
<body>
<a href="Content.aspx" target="maintitle">
<img
onmouseover="return fncover()"
onmouseout="return fncoff()"
onclick="return fncclick()"
src="./images/webmainlogo.gif"
border="0"
id="IMG1"
language="javascript"
width="500" >
</a>
</body>
</html>

Thanx in advance,

Rob
ro**@devtest.com
Jul 20 '05 #1
2 4290
On Sun, 18 Jan 2004 16:56:39 GMT, Rob Manger <ro********@hotmail.com>
wrote:

<snip>
Also, how do I "preload" the images before they are even needed? eg: so
the Loading image loads immedeately.
If I recall correctly:

var img = new Image();
img.src = 'image1.gif'; // Preload image1.gif

What I don't remember is if you should use an array of Image objects, each
preloading a separate image, or if you can use one. Try it and see. :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Nice to see someone using a DTD for a change. :)
<html>
<head>
<script id="clientEventHandlersJS" language="javascript">
The SCRIPT element doesn't have an id attribute. Also, it requires (that
is, it's mandatory) a type attribute. The above should read:

<script type="text/javascript">

When the type attribute is used, there is no need to use the language
attribute.
<!--
Don't bother with SGML comments in SCRIPT elements. They're no longer
required.
var clicked='false';
Why are you using a string to indicate true or false? That's what booleans
are for. Instead use:

var clicked = false;

This also allows you to write

if ( clicked ) {

rather than

if ( clicked == 'false' ) {

which is another way of solving the next issue...
function fncover(){
if (clicked='false')
This is where your problems lie. When you assign a value to a variable,
the expression returns the assigned value. That is, if you did this:

window.alert( clicked = 'false' );

the alert box would display, false. As this returned value is not null,
undefined, false, 0, or an empty string (all considered false), your if
expression is *always* true. Instead, use:

if ( 'false' == clicked ) {

Note: I reversed the order of the expression out of habit. If you wrote,

if ( 'false' = clicked ) {

you would get an error as you can't assign to a literal value. Placing
constants on the left-hand side when you are performing a comparison can
help avoid these simple mistakes.
{
IMG1.src='./images/webmainlogoover.gif';
This might not work on all browsers because IMG1 is not a global, it's the
id of an element. There are two solutions in your case; getElementById()
or passing an object reference. The latter is easier, so I'll just show
that.

Inside an intrinsic event, such as onclick, the keyword 'this' is a
reference the object that was clicked. You can then use it to access the
properties of that object. For example:

function myClick( elem ) {
elem.src = '...';
}
...
<img src="..." onclick="myClick(this)">

<snip>
<img
onmouseover="return fncover()"
onmouseout="return fncoff()"
onclick="return fncclick()"
src="./images/webmainlogo.gif"
border="0"
id="IMG1"
language="javascript"
width="500" >


The IMG element doesn't have a language attribute. To specify the language
used in intrinsic events, place this META element in the head of the
document.

<meta http-equiv="Content-Script-Type" content="text/javascript">
SUMMARY - thought I'd better do this, for clarity

Use SCRIPT elements like

<script type="text/javascript">
Don't use incompatible globals - pass references to your functions instead.
Use booleans, not strings (where appropriate).
Make sure you compare, not assign.

function fncover( elem ) {
if ( true == clicked ) { // or more simply: if ( clicked ) {
elem.src = 'newImage.gif';
}
}
...
<img
onmouseover="fncover(this)"
onmouseout="fncoff(this)"
onclick="fncclick(this)"
src="./images/webmainlogo.gif"
border="0"
id="IMG1"
width="500">

One last thing: you'll notice above that I removed the return keyword in
the event attributes of the IMG element. This is because you never
returned a value from any of the functions. As I don't remember anything
about you needing to return a value, in this case, I didn't add return
statements.

Hope that helps,

Mike

--
Michael Winter
M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Jul 20 '05 #2
Excellent!!!! Thanx Mike. Your a legend :D

Rob
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

3 posts views Thread by -DRB- | last post: by
5 posts views Thread by Csaba Gabor | last post: by
14 posts views Thread by D. Alvarado | last post: by
1 post views Thread by John Thompson | last post: by
7 posts views Thread by simchajoy2000 | last post: by
10 posts views Thread by cjparis | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.