onmouseover change multiple submit images

@kenderMar 17.2008

this was working. not sure what i changed that broke it…

[code=php] <form action=”‘.$_SERVER[‘PHP_SELF’].’?action=go” method=”post” enctype=”multipart/form-data”> <input type=”image” src=”./images/staroff.gif” name=”va” id=”a” onmouseover=”a.src=’./images/star.gif’;” onmouseout=”a.src=’./images/staroff.gif’;” /> <input type=”image” src=”./images/staroff.gif” name=”vb” id=”b” onmouseover=”a.src=’./images/star.gif’; b.src=’./images/star.gif’;” onmouseout=”a.src=’./images/staroff.gif’; b.src=’./images/staroff.gif’;” /> <input type=”image” src=”./images/staroff.gif” name=”vc” id=”c” onmouseover=”a.src=’./images/star.gif’; b.src=’./images/star.gif’; c.src=’./images/star.gif’;” onmouseout=”a.src=’./images/staroff.gif’; b.src=’./images/staroff.gif’; c.src=’./images/staroff.gif’;” /> <input type=”image” src=”./images/staroff.gif” name=”vd” id=”d” onmouseover=”a.src=’./images/star.gif’; b.src=’./images/star.gif’; c.src=’./images/star.gif’; d.src=’./images/star.gif’;” onmouseout=”a.src=’./images/staroff.gif’; b.src=’./images/staroff.gif’; c.src=’./images/staroff.gif’; d.src=’./images/staroff.gif’;” /> <input type=”image” src=”./images/staroff.gif” name=”ve” id=”e” onmouseover=”a.src=’./images/star.gif’; b.src=’./images/star.gif’; c.src=’./images/star.gif’; d.src=’./images/star.gif’; e.src=’./images/star.gif’;” onmouseout=”a.src=’./images/staroff.gif’; b.src=’./images/staroff.gif’; c.src=’./images/staroff.gif’; d.src=’./images/staroff.gif’; e.src=’./images/staroff.gif’;” /> </form> [/code]

as you can tell, when the form loads i get 5 submit buttons that are ‘star’, onmouseover i want to change it to ‘staroff’, then back to ‘star’ when mouseout (i know, i named it wrong and dont want to bother changing the names) — i had it workin at one point… and changing it by id (a b c d and e),now i get an error.. “a is not defined” and no images swap

where did i change this to break it? and how can i fix it?

to post a comment

JavaScript

8 Comments(s) _↴

@jeremuMar 17.2008 — #what if you remove all the ""

@kenderauthorMar 17.2008 — #this section is within a PHP echo statement, its just an escape, they are ignored by the page output

@jeremuMar 17.2008 — #But the form looks like it's in HTML not in the PHP tags.

is there a <?PHP or <? in front of the code?

@kenderauthorMar 17.2008 — #yes, i only copied the relevant code, the output is from an echo statement

<?

a lot of code

echo ' <form ...

</form>';

more code

?>

i just didnt want to put the whole page here, when that is the only relavent part

@jeremuMar 17.2008 — #what if you change the a to this.

[CODE]<input type="image" src="./images/staroff.gif" name="va" id="a" onmouseover="[COLOR="Blue"]this[/COLOR].src='./images/star.gif';" onmouseout="[COLOR="Blue"]this[/COLOR].src='./images/staroff.gif';" />[/CODE]

@kenderauthorMar 18.2008 — #would have worked if i was only changing one image at a time, but there were elements where i needed to change 1 2 3 4 or 5 elements at once

i needed getElementbyID, thanks for trying though!

@jeremuMar 18.2008 — #So you did:

[code=php]<form action="'.$_SERVER['PHP_SELF'].'?action=go" method="post" enctype="multipart/form-data">
 <input type="image" src="./images/staroff.gif" name="va" id="a" onmouseover="document.getElementById('a').src='./images/star.gif';" onmouseout="document.getElementById('a').src='./images/staroff.gif';" />
 <input type="image" src="./images/staroff.gif" name="vb" id="b" onmouseover="document.getElementById('a').src='./images/star.gif'; document.getElementById('b').src='./images/star.gif';" onmouseout="document.getElementById('a').src='./images/staroff.gif'; document.getElementById('b').src='./images/staroff.gif';" />
 <input type="image" src="./images/staroff.gif" name="vc" id="c" onmouseover="document.getElementById('a').src='./images/star.gif'; document.getElementById('b').src='./images/star.gif'; c').src='./images/star.gif';" onmouseout="document.getElementById('a').src='./images/staroff.gif'; document.getElementById('b').src='./images/staroff.gif'; c').src='./images/staroff.gif';" />
 <input type="image" src="./images/staroff.gif" name="vd" id="d" onmouseover="document.getElementById('a').src='./images/star.gif'; document.getElementById('b').src='./images/star.gif'; c').src='./images/star.gif'; document.getElementById('d').src='./images/star.gif';" onmouseout="document.getElementById('a').src='./images/staroff.gif'; document.getElementById('b').src='./images/staroff.gif'; document.getElementById('c').src='./images/staroff.gif'; document.getElementById('d').src='./images/staroff.gif';" />
 <input type="image" src="./images/staroff.gif" name="ve" id="e" onmouseover="document.getElementById('a').src='./images/star.gif'; document.getElementById('b').src='./images/star.gif'; c').src='./images/star.gif'; document.getElementById('d').src='./images/star.gif'; document.getElementById('e').src='./images/star.gif';" onmouseout="document.getElementById('a').src='./images/staroff.gif'; document.getElementById('b').src='./images/staroff.gif'; document.getElementById('c').src='./images/staroff.gif'; document.getElementById('d').src='./images/staroff.gif'; document.getElementById('e').src='./images/staroff.gif';" />
 </form>
 [/code]

@kenderauthorMar 18.2008 — #yep, though there have been other suggestions, this was the simplest (for my needs)

Also in #JavaScript _↴

Help with managing bootstrap theme want to load a <a> tag automatically on page start with auto thickbox?[RESOLVED] Creating a timed delay?

Success!

Help @kender spread the word by sharing this article on Twitter...

Tweet This

onmouseover change multiple submit images

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

onmouseover change multiple submit images

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴