Onmouseover change multiple submit images

Codewalkers Forums Sponsor:

Be the architects of evolution and help create the mobile internet future. It’s your move---enter to win here!

March 17th, 2008, 02:41 PM

kender

Resident Kender

Join Date: Apr 2007

Location: NW Missouri

Posts: 163

Time spent in forums: 3 h 20 m 51 sec
Reputation Power: 2

Onmouseover change multiple submit images

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

PHP Code:


		
			
<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>

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?

__________________
Sick of overpaying for cable?
http://kender.org/dish
free dish network

March 17th, 2008, 05:32 PM

NetSurfer

Contributing User

Join Date: Jul 2007

Posts: 82

Time spent in forums: 1 Day 16 h 33 m 9 sec
Reputation Power: 0

I dont think you need javascript at all. Just place a link around each image and define pseudo classes for them. I can give some good piece of advice how to do that but if you're gonna stick with javascript create separate functions that would handle mouseover/out events:

Code:

function on_over(){
 this.src='./images/star.gif';
}
function on_out(){
 this.src='./images/staroff.gif';
}

PHP Code:


		
			
<form action="'.$_SERVER['PHP_SELF'].'?action=go" method="post" enctype="multipart/form-data">

 <input type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" />

 <input type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" />

 <input type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" />

 <input type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" />

 <input type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" />

</form>

Bare in mind that clear code is much less error-prone and is easier to debug so just try to write clear code from the very begining. You could probably solve this problem yourself if you code were clear.

March 18th, 2008, 12:24 AM

kender

Resident Kender

Join Date: Apr 2007

Location: NW Missouri

Posts: 163

Time spent in forums: 3 h 20 m 51 sec
Reputation Power: 2

it needed.

getElementbyID

i was trying to change multiple images at once, not just one at time...

thanks though

March 18th, 2008, 05:20 AM

NetSurfer

Contributing User

Join Date: Jul 2007

Posts: 82

Time spent in forums: 1 Day 16 h 33 m 9 sec
Reputation Power: 0

Now i see)) It's a votation script isn't it? However, you'd better use previousSibling:

Code:

<form action="'.$_SERVER['PHP_SELF'].'?action=go" method="post" enctype="multipart/form-data"><input id='1' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" /><input id='2' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" /><input id='3' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" /><input id='4' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" /><input id='5' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" />
</form>

Code:

function on_over(){
 var cur_image=this;
 for(var i=0;i<this.id;i++){
  cur_image.src='./images/star.gif';
  cur_image=cur_image.previousSibling;
 }
}
function on_out(){
 var cur_image=this;
 for(var i=0;i<this.id;i++){
  cur_image.src='./images/staroff.gif';
  cur_image=cur_image.previousSibling;
 }
}

BUT BE CAREFUL - remove all white-space before every input tag as i did, 'caz FireFox creates additional textual nodes to represent such white-space in DOM tree.

Last edited by NetSurfer : March 18th, 2008 at 05:52 AM.

March 18th, 2008, 07:30 AM

kender

Resident Kender

Join Date: Apr 2007

Location: NW Missouri

Posts: 163

Time spent in forums: 3 h 20 m 51 sec
Reputation Power: 2

Quote:

Originally Posted by NetSurfer

Now i see)) It's a votation script isn't it? However, you'd better use previousSibling:

Code:

<form action="'.$_SERVER['PHP_SELF'].'?action=go" method="post" enctype="multipart/form-data"><input id='1' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" /><input id='2' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" /><input id='3' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" /><input id='4' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" /><input id='5' type="image" src="./images/staroff.gif" onmouseover="on_over" onmouseout="on_out" />
</form>

Code:

function on_over(){
 var cur_image=this;
 for(var i=0;i<this.id;i++){
  cur_image.src='./images/star.gif';
  cur_image=cur_image.previousSibling;
 }
}
function on_out(){
 var cur_image=this;
 for(var i=0;i<this.id;i++){
  cur_image.src='./images/staroff.gif';
  cur_image=cur_image.previousSibling;
 }
}

BUT BE CAREFUL - remove all white-space before every input tag as i did, 'caz FireFox creates additional textual nodes to represent such white-space in DOM tree.

wow, for once firefox is getting the complaints

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: