lowrentIT Posted June 10, 2006 Share Posted June 10, 2006 I have images i would like to use as buttons. When a user clicks on the button, i would like the button to be highlighted and STAY highlighted until the user clicks on another button. The code i have now only allows the button to be highlighted while its clicked, when you mouseUP its back to normal. What am i missing?? These buttons are basically my links and i would like them to stay "highlighted" so a user knows which page they are on. <html><HEAD> <script language="JavaScript"> <!-- if (document.images) { pic1on= new Image(299,57); pic1on.src="images/Untitled-1_03_down.gif"; pic1off= new Image(299,57); pic1off.src="images/Untitled-1_03.gif"; pic1down=new Image(299,57); pic1down.src="images/Untitled-1_03.gif_down.gif"; } function lightup(imgName) { if (document.images) { imgOn=eval(imgName + "on.src"); document[imgName].src= imgOn; } } function turnoff(imgName) { if (document.images) { imgOff=eval(imgName + "off.src"); document[imgName].src= imgOff; } } function clickdown(imgName) { if (document.images) { imgDown=eval(imgName + "down.src"); document[imgName].src=imgDown;} } //--> </SCRIPT> </HEAD> <body><BR><BR><BR><BASE TARGET=box><table align=left> <tr> <td> <A HREF="box2.html" onMouseover="lightup('pic1')" onMouseout="turnoff('pic1')" onMouseDown="clickdown('pic1')" onMouseUp="lightup('pic1')"><IMG SRC="images/Untitled-1_03.gif" name="pic1" border="0"> </a></td> </tr> <tr> <td> <img src="images/Untitled-1_05.gif"></td> </tr> <tr> <td> <img src="images/Untitled-1_06.gif"></td> </tr> </table><iframe width=500 height=300 frameborder=no src="box.html" NAME=box></body></iframe></html> Link to comment Share on other sites More sharing options...
scott100 Posted June 10, 2006 Share Posted June 10, 2006 I have images i would like to use as buttons. When a user clicks on the button, i would like the button to be highlighted and STAY highlighted until the user clicks on another button. The code i have now only allows the button to be highlighted while its clicked, when you mouseUP its back to normal. What am i missing?? These buttons are basically my links and i would like them to stay "highlighted" so a user knows which page they are on.Well you have onMouseout="turnoff('pic1')" which i would imagine changes the image back to it's original state, if you remove that then the image should remain highlighed. This would mean that all images would never return to there original state so you would need to create another function when another image is clicked changes the previously highlighted image back. Link to comment Share on other sites More sharing options...
lowrentIT Posted June 11, 2006 Author Share Posted June 11, 2006 Could somebody please post a funtion that will just change one image to another onClick. So everytime you click on it, it toggles back and forth between two images. Once i have that .... maybe i can play around with it. As of now, i don't know how to write a function like this yet.-Thanks Link to comment Share on other sites More sharing options...
MrAdam Posted June 11, 2006 Share Posted June 11, 2006 function switchImages(that) { if (document.images) { var current = that.src; if (current=='__# src 1__') { that.src = '__# src 2__'; } else { that.src = '__# src 1__'; } }} HTML: <img src="__# src 1__" onClick="switchImages(this)" /> is that any use... or is it too simple ?? Link to comment Share on other sites More sharing options...
scott100 Posted June 11, 2006 Share Posted June 11, 2006 Could somebody please post a funtion that will just change one image to another onClick. So everytime you click on it, it toggles back and forth between two images.This is one way to do it:<html><head><script>function check(pic){x=document.getElementById("mypic");if(x.src=="http://www.google.co.uk/logos/worldcup06_uk.gif")x.src="http://www.w3schools.com/images/w3default80.jpg";else x.src="http://www.google.co.uk/logos/worldcup06_uk.gif";}</script></head><body><img id="mypic" src="http://www.google.co.uk/logos/worldcup06_uk.gif" onclick="check(this.src)" /></body></html> Link to comment Share on other sites More sharing options...
lowrentIT Posted June 11, 2006 Author Share Posted June 11, 2006 function switchImages(that) { if (document.images) { var current = that.src; if (current=='__# src 1__') { that.src = '__# src 2__'; } else { that.src = '__# src 1__'; } }} HTML: <img src="__# src 1__" onClick="switchImages(this)" /> is that any use... or is it too simple ?? <{POST_SNAPBACK}> Too Simple ??? no not at all, i am very much a newbie and appreciate all advice.Quick question, that parameter "(this)" , where else are you referencing that ??why should'nt it be this?:<img src="__# src 1__" onClick="switchImages(that)" /> let me try your code... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now