View Full Version : How do I use a rollover image for the Swiss Army buttons?

12-04-2010, 08:28 PM
1) Script Title: Swiss Army Image Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/swissarmy/index.htm

3) Describe problem: Need the forward and back buttons to use a rollover image

I'm using the updated Swiss Army script (http://www.dynamicdrive.com/forums/showthread.php?t=26953) on this webpage:
and I'm using images for the forward and back buttons. I've been trying to figure out how to have the button images change when the mouse rolls over them but I'm not having any luck.

Right now they use arrowleftoff.jpg and arrowrightoff.jpg when the mouse is not over them. I'd like to display arrowlefton.jpg or arrowrighton.jpg for whichever button is being moused over.

I removed the entire inter_slide.prototype.ibute function and the calls to it and just put an onmouseover and onmouseout right on the img for each button using this code:

document.write('<table id="controls'+this.issid+'" align="center" cellpadding="0" cellspacing="10"><tr><td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' type="image" title="Previous" id="prev" src="'+previmg+'" onmouseover="mouseOverPrevImage()" onmouseout="mouseOutPrevImage()" onclick="iss['+this.issid+'].changeimg(false, \'nav\');"><\/td>'+(this.no_auto? '<td>&nbsp;<\/td>' : '<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input title="Stop" type="image" id="gostp'+this.issid+'" src="'+(this.g_fPlayMode? playimg : stopimg)+'" onclick="iss['+this.issid+'].gostop(this);"><\/td>')+'<td valign="middle" align="center" style="padding:2px 2px 1px 2px;"><input'+op+' type="image" title="Next" id="next" src="'+nextimg+'" onmouseover="mouseOverNextImage()" onmouseout="mouseOutNextImage()" onclick="iss['+this.issid+'].changeimg(true, \'nav\');"><\/td><\/tr><\/table>\n');

The onmouseover and on mouseout for each button call these functions:

function mouseOverPrevImage()
document.getElementById("prev").src = "arrowlefton.jpg";

function mouseOutPrevImage()
document.getElementById("prev").src = "arrowleftoff.jpg";

function mouseOverNextImage()
document.getElementById("next").src = "arrowrighton.jpg";

function mouseOutNextImage()
document.getElementById("next").src = "arrowrightoff.jpg";

It seems to work in IE8 (almost, still a few bugs) but not in Firefox or Chrome. In those two browsers, the button images do display but they are very dim, like the opacity is about 10 percent of what it should be.
What am I missing?

12-05-2010, 06:17 AM
The opacity was being set to .45 in non-IE browsers. I set it to .99 and that fixed the opacity problem.

That seems to have done it. It doesn't provide a visual animation of the button being pressed down but I didn't want that. So now I have buttons that work with a rollover image that match the buttons on the rest of the site.

Another great script by John Scheuer. He's the man!