Chocolate570 Posted December 9, 2005 Share Posted December 9, 2005 Ok.I have a button on my site. I have created 3 button images: 1 for an inactive button, one for an active button, and one for a clicked button. It doesn't work, as you can see on the site. The button is located to the menu on the left, it says 'quests' on it.This is my code, why won't it work? <img src="images/Buttons/quests-unactive.png" onmouseover="this.src='images/Buttons/quests-active.png'" onclick="this.src='images/Buttons/quests-clicked.png'" onmouseup="this.src='images/Buttons/quests-unactive.png' alt=" /> It behaves erratically, again, check the site to see what it does.Thanks to anyone who can fix this.~Chocolate570 Link to comment Share on other sites More sharing options...
Skemcin Posted December 10, 2005 Share Posted December 10, 2005 onmouseup="this.src='images/Buttons/quests-unactive.png' alt="" /> first, close your onmouseup attribute onmouseup="this.src='images/Buttons/quests-unactive.png'" alt="" /> then see if you have any issues. I'm also seeing the following two javascript errors too:Unknown property 'align'. Declaration Dropped Line 0andUnknown property 'font-color'. Declaration Dropped Line 57but the latter might be due to the first problem. And, BTW, the Line 0 issues regenerates about every 8 seconds. Link to comment Share on other sites More sharing options...
aspnetguy Posted December 10, 2005 Share Posted December 10, 2005 change onmouseup to onmouseout to get it to go back to the original image when the mouse is not over it anymore.Also try changing onclick to onmousedown or onmouseclick.Hope this helps Link to comment Share on other sites More sharing options...
hacknsack Posted December 10, 2005 Share Posted December 10, 2005 One thing you might consider is "preloading" the images. People on dial-up will havevery erratic action. Preloading will insure an instant swap.Nice work on your page. Link to comment Share on other sites More sharing options...
Chocolate570 Posted December 10, 2005 Author Share Posted December 10, 2005 Could anyone make the code for me? It jst isn't working, i don't know what's wrong. Here are the three images:images/Buttons/quests-unactive.pngimages/Buttons/quests-active.pngimages/Buttons/quests-clicked.pngThe names explain it all. Thanks so much. This is kinda sad, isn't it.... Link to comment Share on other sites More sharing options...
Skemcin Posted December 10, 2005 Share Posted December 10, 2005 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>iribbit.net - Leap into the online experience! - ROLLOVER</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script language="javascript" type="text/javascript">/////////////////////////// rollover javascript ///////////////////////////if (document.images) { QuestsOn = new Image(); QuestsOn.src = "http://www.chrisfries.net/thedarkdragons/fansite/images/Buttons/quests-active.png"; QuestsOff = new Image(); QuestsOff.src = "http://www.chrisfries.net/thedarkdragons/fansite/images/Buttons/quests-unactive.png"; QuestsClick = new Image(); QuestsClick.src = "http://www.chrisfries.net/thedarkdragons/fansite/images/Buttons/quests-clicked.png";}function SwitchImage(locat,name){ if (document.images){newBar = eval(name + ".src"); document [locat].src = newBar; }} </script></head><body><a href="##" title="Quests" onclick="SwitchImage('Quests','QuestsOff')" onmousedown="SwitchImage('Quests','QuestsClick')" onmouseover="SwitchImage('Quests','QuestsOn')" onmouseout="SwitchImage('Quests','QuestsOff')"> <img id="Quests" name="Quests" src="http://www.chrisfries.net/thedarkdragons/fansite/images/Buttons/quests-unactive.png" width="97" height="25" border="0" alt="Quests"></a><br><br></body></html> (minus the preloader)Preview it here:http://www.iribbit.net/_files/chocolate570-rollover.cfm Link to comment Share on other sites More sharing options...
Chocolate570 Posted December 11, 2005 Author Share Posted December 11, 2005 That's exactly what I want, except for the fact that i'm going to have around like 8 buttons, and doing a function for each of them is going to be annoying. Instead of javascript, can someone do it with the onmouseover="this.src=''" thing? :S Link to comment Share on other sites More sharing options...
hacknsack Posted December 12, 2005 Share Posted December 12, 2005 How would you feel about a CSS solution?http://www.tanfa.co.uk/css/examples/rollov...-no-preload.aspUsing "hover". Link to comment Share on other sites More sharing options...
Skemcin Posted December 12, 2005 Share Posted December 12, 2005 That's exactly what I want, except for the fact that i'm going to have around like 8 buttons, and doing a function for each of them is going to be annoying. Instead of javascript, can someone do it with the onmouseover="this.src=''" thing? :S You don;t need a new function for each all you have to do is repeat these parts of teh code for each respective image you want to use this with. Of course, make the javascript and external file:JavascriptQuestsOn = new Image();QuestsOn.src = "http://www.chrisfries.net/thedarkdragons/fansite/images/Buttons/quests-active.png";QuestsOff = new Image();QuestsOff.src = "http://www.chrisfries.net/thedarkdragons/fansite/images/Buttons/quests-unactive.png";QuestsClick = new Image();QuestsClick.src = "http://www.chrisfries.net/thedarkdragons/fansite/images/Buttons/quests-clicked.png"; andHTML <a href="##" title="Quests" onclick="SwitchImage('Quests','QuestsOff')" onmousedown="SwitchImage('Quests','QuestsClick')" onmouseover="SwitchImage('Quests','QuestsOn')" onmouseout="SwitchImage('Quests','QuestsOff')"> <img id="Quests" name="Quests" src="http://www.chrisfries.net/thedarkdragons/fansite/images/Buttons/quests-unactive.png" width="97" height="25" border="0" alt="Quests"></a><br><br> With the javascript, just copy-n-paste that for each set of images you need this for and keep it within the curly brackets and your fine. Likewise, with the HTML, just use that as much as you need, replace all the "Quests" with the respective new "name" in the script and html and you're off and running. Make sure you match your cases. Link to comment Share on other sites More sharing options...
Chocolate570 Posted December 12, 2005 Author Share Posted December 12, 2005 Thanks so much! It worked beautifully. Link to comment Share on other sites More sharing options...
Skemcin Posted December 12, 2005 Share Posted December 12, 2005 Thanks so much! It worked beautifully. NICE - glad you got it working. 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