[RESOLVED] onmouseover change multiple submit images

kender

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

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

NogDog

onmouseover="a.src='foobar'" is looking for an element with a "name" attribute of "a", but your element is named "va". So, you either need to reference "va", or else use document.getElementById('a').src='foobar' to reference it by its ID.

kender

i think im going to just bypass my normal programming schedule and just send my clients direct to you.. your a great help

have any idea why it worked the first day, and then stopped?

NogDog

kender wrote:
...have any idea why it worked the first day, and then stopped?

Gremlins?

kender

pesky little buggers, thanks again

Weedpacket

Suggestion:

<form action="<?php echo $_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>

Or use a heredoc. Either way, the hordes of escaped apostrophes would be unnecessary.

You could also take advantage of the fact that JavaScript is a programming language and computers are there to spare you the tedious repetitive stuff.

<form action="<?php echo $_SERVER['PHP_SELF']?>?action=go" method="post" enctype="multipart/form-data">
        <input type="image" src="./images/starOff.gif" name="va" id="a" />
        <input type="image" src="./images/starOff.gif" name="vb" id="b" />
        <input type="image" src="./images/starOff.gif" name="vc" id="c" />
        <input type="image" src="./images/starOff.gif" name="vd" id="d" />
        <input type="image" src="./images/starOff.gif" name="ve" id="e" />
    </form> 

<script type="text/javascript">
// More efficiencies possible with different IDs.
function turnOnStars(howmany)
{
	var stars = [
	document.getElementById('a'),
	document.getElementById('b'),
	document.getElementById('c'),
	document.getElementById('d'),
	document.getElementById('e')];
	for(i=0; i<howmany; i++)
		stars[i].src = './images/starOn.gif';
}
function turnOffStars(howmany)
{
	var stars = [
	document.getElementById('a'),
	document.getElementById('b'),
	document.getElementById('c'),
	document.getElementById('d'),
	document.getElementById('e')];
	for(i=0; i<stars.length; i++)
		stars[i].src = './images/starOff.gif';
}

// Rigmarole to deal with Microsoft doing things differently
var ListenEvent;
if(document.addEventListener)
{
	ListenEvent = function(id, event, action) {
		document.getElementById(id).addEventListener(event, action, false);
	};
}
else
{
	// Bloody Microsoft.
	ListenEvent = function(id, event, action) {
		document.getElementById(id).attachEvent('on'+event, action);
	};
}
// Needs to happen after the <input> elements are created - so at the end of the document or as part of an onload event.
ListenEvent('a', 'mouseover', function(){turnOnStars(1);});
ListenEvent('b', 'mouseover', function(){turnOnStars(2);});
ListenEvent('c', 'mouseover', function(){turnOnStars(3);});
ListenEvent('d', 'mouseover', function(){turnOnStars(4);});
ListenEvent('e', 'mouseover', function(){turnOnStars(5);});
ListenEvent('a', 'mouseout', turnOffStars);
ListenEvent('b', 'mouseout', turnOffStars);
ListenEvent('c', 'mouseout', turnOffStars);
ListenEvent('d', 'mouseout', turnOffStars);
ListenEvent('e', 'mouseout', turnOffStars);
</script>

kender

Is there a benefit (besides easier to read and prettier) using the second method over the first?

also, i run this look 3x, A-E, F G H P J (didnt realize I was restricted until after i wrote it), and K-O, is there a case or switch for javascript that would prevent me from writing out 15 document.getElements, and 30 ListenEvents ?

Weedpacket

kender wrote:
besides easier to read and prettier

Don't knock easier to read and prettier: the computer doesn't care about ugly.

is there a case or switch for javascript that would prevent me from writing out 15 document.getElements, and 30 ListenEvents ?

There's a loop

var ids = {a:1, b:2, c:3, d:4, e:5 };
for(var i in ids)
{  ListenEvent(i, 'mouseover', function(){turnOnStars(ids[i]);});
    ListenEvent(i, 'mouseout', turnOffStars);
}

kender

thanks for all of the input and the lesson, i will play around with it and see if i can figure out the in's and out's of it all