buttons, buttons, buttons...

**ikon** · 09-11-2007, 05:30 AM

im already using the DOM Image rollover v3.0 script for a few buttons on my webiste (www.reefscavengers.com) but i would like to make it so that when one of those mouseover buttons is clicked, the mouseover version of the button stays displayed instead of changing back to its original version. can anyone help?

**jscheuer1** · 09-11-2007, 05:41 AM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

You may also want to look here:

http://www.dynamicdrive.com/forums/s...ad.php?t=24164

**ikon** · 09-11-2007, 12:42 PM

DOM Image rollover v3.0
http://www.dynamicdrive.com/dynamicindex15/domroll2.htm

thanks for the info but thats not exactly what im looking to do..i think that code just changes the opacity of the button, i am wanting to change the actual image in two scenarios: 1) on mouseover (already accomplished) 2) on click (?)

i want the image to remain as the "mouseover" version when the original image is clicked, it stays on the screen because the link from the button opens in a frame.

**jscheuer1** · 09-11-2007, 03:16 PM

Well the principal involved in the code from the post I referred you to is the same as what you are trying to do - do one thing onmouseover and onmouseout, until the item is clicked.

However, I see now that you have provided the link to it, the code you are using to accomplish the rollovers in the first place is sort of 'idiot proof', and as such, and for other reasons, is much more complex than it needs to be, while at the same time not lending itself to easy modification.

I will, when I get some time, and if someone else doesn't beat me to it, write you out a simpler rollover routine with added click. One thing that I see this added click should probably also do is to revert to its unclicked state whenever one of the other items in its group is clicked.

**jscheuer1** · 09-11-2007, 04:52 PM

OK, here is a much simpler script to use for rollovers, including the added click functionality you want:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
(function(){
var roll_images=['photo2.jpg','photo4.jpg','photo6.jpg','photo8.jpg'];
var p=[]
for (var i = 0; i < roll_images.length; i++){
p[i]=new Image();
p[i].src=roll_images[i];
}
})();

function clicked(par, im){
var r=document.getElementById(par).getElementsByTagName('img');
for (var i = 0; i < r.length; i++)
if(r[i]!=im&&r[i].onmouseout.no){
r[i].onmouseout.no=false;
r[i].onmouseout.apply(r[i]);
}
im.onmouseout.no=true;
}
</script>
</head>
<body>
<div id="rollers">
<img src="photo1.jpg"
onmouseover="this.src='photo2.jpg';"
onmouseout="if(!this.onmouseout.no){this.src='photo1.jpg';}"
onclick="clicked('rollers',this);"> 
<img src="photo3.jpg"
onmouseover="this.src='photo4.jpg';"
onmouseout="if(!this.onmouseout.no){this.src='photo3.jpg';}"
onclick="clicked('rollers',this);"> 
<img src="photo5.jpg"
onmouseover="this.src='photo6.jpg';"
onmouseout="if(!this.onmouseout.no){this.src='photo5.jpg';}"
onclick="clicked('rollers',this);"> 
<img src="photo7.jpg"
onmouseover="this.src='photo8.jpg';"
onmouseout="if(!this.onmouseout.no){this.src='photo7.jpg';}"
onclick="clicked('rollers',this);"> 
</div>
</body>
</html>

Notes: The script is much simpler but, it isn't as 'idiot proof' as what you had. Still, it is pretty easy to grasp. The only images required to be in the green array at the top are the onmouseover images. This will only have the added click functionality for images in the 'rollers' division group, but you can make another group on the page in a division called - say, 'rollers2':

Code:

<div id="rollers2">
<img src="image1.jpg"
onmouseover="this.src='image2.jpg';"
onmouseout="if(!this.onmouseout.no){this.src='image1.jpg';}"
onclick="clicked('rollers2',this);"> 
<img src="image3.jpg"
onmouseover="this.src='image4.jpg';"
onmouseout="if(!this.onmouseout.no){this.src='image3.jpg';}"
onclick="clicked('rollers2',this);"> 
<img src="image5.jpg"
onmouseover="this.src='image6.jpg';"
onmouseout="if(!this.onmouseout.no){this.src='image5.jpg';}"
onclick="clicked('rollers2',this);"> 
<img src="image7.jpg"
onmouseover="this.src='image8.jpg';"
onmouseout="if(!this.onmouseout.no){this.src='image7.jpg';}"
onclick="clicked('rollers2',this);"> 
</div>

and use different images in it. Just make sure to include its onmouseover images in the green array.

**ikon** · 09-12-2007, 08:06 PM

thanks for your time so far..i put the scrpit in the head, changed the green array to my mouseover images and added the code to the first button (images/newlayout1_16.gif) to test it out. the mouseover and mouseout parts work but the image doesnt stick once clicked. do you see any errors in the coding you provided on my page - www.reefscavengers.com/index

Thanks a ton!

**ikon** · 09-22-2007, 04:10 AM

any idea whats wrong jscheuer1?

**jscheuer1** · 09-22-2007, 04:29 AM

Well, the script is meant to work on a group of images within an identified division that contains no other images except those in the group and that are coded for the script. If you need to test in such a scatter shot way and/or need other images that are not tied to the identified division's group of images present within the identified division, change this line:

Code:

if(r[i]!=im&&r[i].onmouseout.no){

to:

Code:

if(r[i].onmouseout&&r[i]!=im&&r[i].onmouseout.no){

**ikon** · 09-22-2007, 04:37 AM

perfect, works great thank you!

Thread: buttons, buttons, buttons...

Thread Tools

Search Thread

buttons, buttons, buttons...

Bookmarks

Bookmarks

Posting Permissions