Image rollover and mousedown script

**Nic** · 03-28-2005, 08:01 AM

Script: http://dynamicdrive.com/dynamicindex15/domroll2.htm

Okilee dokilee, I'm not having any problems with this script, but I have a question relating to it. I'm not quite sure if this is the right place to post it, because I'm a bit new and all, but here goes anyway:
The script above replaces an image with another image when it is clicked, and changes it back to the original image once the mouse button is released.
This is cool and all, but I was wondering if anybody knows of a script which changes the picture once it is clicked, but leaves the image as it is, and only returns it to its original image once it is clicked again.
Zat is all.
Thank you.
*scurries out of the forum*

**jscheuer1** · 03-28-2005, 11:58 AM

Code:

<html>
<head>
<title>Change on Click</title>
<script type="text/JavaScript">
function cngImage(im1,im2,id){
a=document.images[id].src.slice(document.images[id].src.length-im1.length);
if (a==im1)
document.images[id].src=im2;
else
document.images[id].src=im1;
}
</script>
</head>
<body>
<img id=p1 src=dl.gif onClick=cngImage('dl.gif','fl.gif',this.id)>
<img id=p2 src=bl.gif onClick=cngImage('bl.gif','cl.gif',this.id)>
</body>
</html>

All you need to know is:
1) The script needs no configuration.
2) Each image tag on the page must have a unique id.
3) The only other thing to configure are the two images in the onClick event, the first is the starting image the second is the alternate image, leave this.id as the third parameter in all cases.

**mwinter** · 03-28-2005, 02:52 PM

Originally Posted by jscheuer1

a=document.images[id].src.slice(document.images[id].src.length-im1.length);

This variable should be declared local.

These onclick attribute values must be quoted. Unless you know what can be left unquoted[1], it's a good idea to quote everything.

Mike

[1] Letters, numbers, underscores (_), periods (.), colons (:) and hyphens (-).

**jscheuer1** · 03-28-2005, 06:38 PM

Originally Posted by mwinter

Quote:
Originally Posted by jscheuer1
a=document.images[id].src.slice(document.images[id].src.length-im1.length);

This variable should be declared local

I thought it was, seriously. This is a chance for me to learn something . I thought that by declaring it inside the function it was local. It isn't?

Originally Posted by mwinter

These onclick attribute values must be quoted

Point Taken.

**mwinter** · 03-28-2005, 07:59 PM

Originally Posted by jscheuer1

I thought that by declaring [a variable] inside [a] function it was local. It isn't?

That's correct, but you haven't actually declared the variable. A variable is declared using the var keyword and it's good practice to do it for all variables (even globals). This shows exactly what is created and used by a script.

The code as it stands currently searches the scope chain (containing the global object and the function's variable object, in this instance) for the variable, a. As it doesn't exist, the script engine will create a property on the global object and assigns the substring there.

Mike

**jscheuer1** · 03-28-2005, 08:14 PM

Originally Posted by mwinter

That's correct, but you haven't actually declared the variable

Ah so, thanks for the clarification. For the OP then here is the winterized version (though Mike may still have additions to bring it up to strict spec):

Code:

<html>
<head>
<title>Change on Click</title>
<script type="text/JavaScript">
function cngImage(im1,im2,id){
var a;
a=document.images[id].src.slice(document.images[id].src.length-im1.length);
if (a==im1)
document.images[id].src=im2;
else
document.images[id].src=im1;
}
</script>
</head>
<body>
<img id=p1 src=dl.gif onClick="cngImage('dl.gif','fl.gif',this.id)">
<img id=p2 src=bl.gif onClick="cngImage('bl.gif','cl.gif',this.id)">
</body>
</html>

Instructions remain the same.

**Nic** · 04-01-2005, 09:07 AM

Thanks a billion; I actually found another way to do it using the DHTML effects toolbar in Frontpage, but this will come in handy when I need to use some other html program

Thread: Image rollover and mousedown script

Thread Tools

Search Thread

Image rollover and mousedown script

Bookmarks

Bookmarks

Posting Permissions