Jump to content

Event Help

Chocolate570

By Chocolate570
in HTML/XHTML

 Share

Recommended Posts

Chocolate570 Dedicated Member

Chocolate570

Posted
Posted

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
Skemcin Devoted Member

Skemcin

Posted
Posted 
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
Chocolate570 Dedicated Member

Chocolate570

Posted
  • Author
Posted

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
Skemcin Devoted Member

Skemcin

Posted
Posted 
<!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
Chocolate570 Dedicated Member

Chocolate570

Posted
  • Author
Posted

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
Skemcin Devoted Member

Skemcin

Posted
Posted
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:Javascript
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";

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...