PDA

View Full Version : rollover help

elgato65
05-11-2005, 02:10 PM
I am trying to do something fairly simple, but I cant get to solve it:

I have three images for three different button states: normal, over and clicked (active). These buttons show/hide different layers.

With Dreamweaver help, I have been able to get the mouse over states to work, but if I include the image swap on mouseOut, then I loose the "active" or on state.

Is there a way to do this?
rlemon
05-11-2005, 02:17 PM
lets see some code then we can help.
MikeFoster
05-11-2005, 03:20 PM
Here's a demo (http://cross-browser.com/x/examples/xtristateimage.php) for that.

btw... Welcome to CodingForums!
rlemon
05-11-2005, 03:32 PM
<html>
<head>
<title>Untitled Document</title>
<script>
function swap(id,img){
document.getElementById(id).src=img;
}
</script>
</head>

<body>
<a href="#" onMouseOver="swap('a_img_1','http://www.codingforums.com/images/smilies/eek.gif')" onMouseDown="swap('a_img_1','http://www.codingforums.com/images/smilies/thumbsup.gif')" onMouseUp="swap('a_img_1','http://www.codingforums.com/images/smilies/eek.gif')" onMouseOut="swap('a_img_1','http://www.codingforums.com/images/smilies/tongue.gif')">
<img id="a_img_1" height="40px" width="40px" src="http://www.codingforums.com/images/smilies/tongue.gif" border="0"></a>
</body>
</html>

prolly not the best but only took me like 2 minutes to write so i'm sure in a little time you can come up with something better.
elgato65
05-11-2005, 04:15 PM
thanks a bunch rlemon.

the problem with both the link you suggested and the code you wrote is that there is no remaining active state or image. when i click on the image (link) i want it to be replaced with another one that will remain there until another link is clicked.

i will keep on looking
rlemon
05-11-2005, 04:50 PM
ok, so let me get this straight.

you want a link with three possible images.
for example sake we will call them image1, image2, and image3.

If the rollover image starts at image1, mouseOver should display image2, mouse off will display image1 again.
If the image is clicked image3 will appear and stay there until another link has been selected.
also, if the user has clicked the image, but not removed his/her hand from the mouse (onMouseDown) image3 should appear.




So, if thats true, then there is one more question:

When the user clicks these links, are the pages changing?
like from index.html to content.html (or any page really)
elgato65
05-11-2005, 05:15 PM
yes, it should work exactly as you described.

the links will only toggle layer visibility within the same html. it will function as a picture gallery, with seceral image/links that will show/hide different layers containing images when clicked.
rlemon
05-11-2005, 05:39 PM
ahh, then it should be easy.

tell you what, i'm kinda in the middle of something right now but i'l put something together for you in a bit.

email me @ rob.lemon@gmail.com and we'll see what i can do.