PDA

View Full Version : 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
<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
a=document.images[id].src.slice(document.images[id].src.length-im1.length);This variable should be declared local.


<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)>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
Quote:
Originally Posted by jscheuer1
a=document.images[id].src.slice(document.images[id].src.length-im1.length);

This variable should be declared localI 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?

These onclick attribute values must be quotedPoint Taken.

mwinter
03-28-2005, 07:59 PM
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
That's correct, but you haven't actually declared the variableAh 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):
<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 :)