davelearning Posted January 31, 2011 Share Posted January 31, 2011 Hi all, I am relatively new to javascript, hence the basic problem! All I am trying to do is show a different image for a button onmouseover, basically it just has an arrow to show the button is selected. Here is my code <script type="text/javascript"> function mouseOver() { document.getElementById("home").src ="images/homebuttonselected.gif"; document.getElementById("packages").src ="images/packagebuttonselected.gif"; } function mouseOut() { document.getElementById("home").src ="images/homebutton.gif"; document.getElementById("packages").src ="images/packagebutton.gif"; } </script> </head> <body> <div id="main"> <div id="links"><img src="images/homebutton.gif" class="buttons" id="home" onmouseover="mouseOver()" onmouseout="mouseOut()" /> <img src="images/packagebutton.gif" class="buttons" id="packages" onmouseover="mouseOver()" onmouseout="mouseOut()" /></div> </div> </body> </html> My problem is that when one button is highlighted, both images change to there onmouseover state, how to I remedy this so each one is treated individually? Thanks Quote Link to comment Share on other sites More sharing options...
davelearning Posted January 31, 2011 Author Share Posted January 31, 2011 Ok I have noticed I can do it like this: <script type="text/javascript"> function homeOver() { document.getElementById("home").src ="images/homebuttonselected.gif"; } function homeOut() { document.getElementById("home").src ="images/homebutton.gif"; } function packageOver() { document.getElementById("packages").src ="images/packagebuttonselected.gif"; } function packageOut() { document.getElementById("packages").src ="images/packagebutton.gif"; } function purchaseOver() { document.getElementById("purchase").src ="images/purchasebuttonselected.gif"; } function purchaseOut() { document.getElementById("purchase").src ="images/purchasebutton.gif"; } </script> </head> <body> <div id="main"> <div id="links"> <img src="images/homebutton.gif" class="buttons" id="home" onmouseover="homeOver()" onmouseout="homeOut()" /> <img src="images/packagebutton.gif" class="buttons" id="packages" onmouseover="packageOver()" onmouseout="packageOut()" /> <img src="images/purchasebutton.gif" class="buttons" id="purchase" onmouseover="purchaseOver()" onmouseout="purchaseOut()" /></div> </div> </body> </html> But is their a simpler way? Quote Link to comment Share on other sites More sharing options...
.josh Posted January 31, 2011 Share Posted January 31, 2011 looks like everything is mostly consistently named, so you can reduce it to this: function swapImages(that) { that.src = (that.src.indexOf('buttonselected')>-1) ? ("images/"+that.id+"button.gif") : ("images/"+that.id+"buttonselected.gif"); } <img src="images/homebutton.gif" class="buttons" id="home" onmouseover="swapImages(this)" onmouseout="swapImages(this)" /> <img src="images/packagebutton.gif" class="buttons" id="packages" onmouseover="swapImages(this)" onmouseout="swapImages(this)" /> <img src="images/purchasebutton.gif" class="buttons" id="purchase" onmouseover="swapImages(this)" onmouseout="swapImages(this)" /> only thing is that you need to make your id="..." match your image prefix. Some of them don't match. Like id="package" vs. "packagesbuttonselected.gif". Need to either change your id to "packages" or rename your .gif to "packagebuttonselected.gif" Quote Link to comment Share on other sites More sharing options...
davelearning Posted January 31, 2011 Author Share Posted January 31, 2011 Wow, Thanks, that is perfect Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.