Rollover Button Not Working

[sweinkauf13]

Ok. So i'm pretty new to javascript and i'm sure this is a silly mistake that i've made. I'm trying to make a rollover button. Here is my script for the rollover and then my button. in that order.Script:

<script type="text/javascript">function mouseOver(){document.submit.src ="next_2.png";}function mouseOut(){document.submit.src ="next_1.png";}</script>

Button:

<input type="image" name="submit" src="next_1.png" class="b_next" id="submit" onmouseOver="mouseOver()"onmouseOut="mouseOut()">

So with this code, i go over the button with my mouse, it stays the same and then in the bottom left of my browser "Error on page" is shown. Please help me.thanks in advance,youngwebmaster

[tooldude]

1. Use getElementById instead
2. onmouseOver and onmouseOut should be all lowercase: onmouseover and onmouseout
3. Bad practice to name your functions identical to existing event functions
4. No need for two functions, when can be accomplished with one function

Try:

<script type="text/javascript">function MYmouseOver(){document.getElementById('submit').src ="next_2.png";}function MYmouseOut(){document.getElementById('submit').src ="next_1.png";}//The above two functions could be replaced by the following function://first parameter receives a string which is id of img to be changed//second parameter receives a string which is the path to the new image//this allows the function to be more 're-usable' with other images and img'sfunction myImageChanger(id,pic) {	document.getElementById(id).src = pic;}//you could then call that function like this:// onmouseover="myImageChanger('submit','next_2.png');" onmouseout="myImageChanger('submit','next_1.png');"</script><input type="image" name="submit" src="next_1.png" class="b_next" id="submit" onmouseover="MYmouseOver();"onmouseout="MYmouseOut();"><input type="image" name="submit" src="next_1.png" class="b_next" id="submit" onmouseover="myImageChanger('submit','next_2.png');"onmouseout="myImageChanger('submit','next_1.png');">

[jeffman]

If I may suggest a slightly more efficient technique? Like astupidname's, it also uses one function, and it can also be used with many images, not just one. The advantage is that you call it more simply. All that is required is that the names of your images be related to the id of the input. So if the input's id is "submit" the images would be named "submit_1.png" and "submit_2.png" -- which is a good idea for organizing your files anyway.youngwebmaster, it's possible the ternary operator ( ? : ) may be unfamiliar to you. It's just a simplified form of if . . . else. Nothing to be scared of.

function swap (i){	var source1 = i.id + "_1.png";	var source2 = i.id + "_2.png";	i.src = (i.src.match(source1)) ? source2 : source1;}----<input type="image" name="submit" src="submit_1.png" class="b_next" id="submit" onmouseover="swap(this)" onmouseout="swap(this)">