<input type="image"> and onMouseOver

[felixtkatt]

I'm trying to create a simple image swap onMouseOver and onMouseOut. The only twist is that the image I want to swap is the submit button on a form. I assume I have to link the input tag itself (because the onMouseOver method belongs to the anchor tag) but I can't get the src parameter to change in the input tag. Here is the code I have:


<script language=&quot;JavaScript&quot;>
<!--
newButtonOn = new Image();
newButtonOn.src = &quot;newOn.gif&quot;;

newButtonOff = new Image();
newButtonOff.src = &quot;newOff.gif&quot;;

function imgOn() {
document.Form1.newButton.src = newButtonOn.src;
}

function imgOff() {
document.Form1.newButton.src = newButtonOff.src;
}

//-->
</script>


In the page is the following code.

<form action=&quot;newmail.cfm&quot; method=&quot;post&quot; target=&quot;__blank&quot; name=&quot;Form1&quot;>
<a href=&quot;&quot; onMouseOver=&quot;imgOn()&quot; onMouseOut=&quot;imgOff()&quot;>
<input type=&quot;image&quot; src=&quot;newOff.gif&quot; alt=&quot;Compose New&quot; name=&quot;newButton&quot; value=&quot;submit&quot;>
</a>
</form>


Is this illegal? Is there another way to do this that I am just not seeing? Someone please help me! FTK

 

[mithrilhall]

Is what you have posted working for you? If not try this:

<form action=&quot;newmail.cfm&quot; method=&quot;post&quot; target=&quot;__blank&quot; name=&quot;Form1&quot;>
<a href=&quot;#&quot; onMouseOver=&quot;imgOn()&quot; onMouseOut=&quot;imgOff()&quot; onclick=&quot;submit();&quot;>
<input type=&quot;image&quot; src=&quot;newOff.gif&quot; alt=&quot;Compose New&quot; name=&quot;newButton&quot;>
</a>
</form>

 

[felixtkatt]

I ended up replacing the input tag with an image tag and using the onClick method to submit the form instead of the input tag.

Thanks for your help.

FTK FTK

 

[dirtfarm]

what was the final code on this? I have been trying to do the same with no success. I can get either the mouseover to work or the form to work but not both.

thanks for the help

 

[link9]

onClick=&quot;document.forms[0].submit();&quot;

should get it for you.

likewise,

document.formName.submit();

will work.

 

[felixtkatt]

The final code I ended up using was:


<script language=&quot;JavaScript&quot;>
<!--
img1On = new Image(); // Active Images
img1On.src = &quot;deleteOn.gif&quot;;
img2On = new Image();
img2On.src = &quot;replyOn.gif&quot;;
img3On= new Image();
img3On.src = &quot;replyallOn.gif&quot;;
img4On = new Image();
img4On.src = &quot;forwardOn.gif&quot;

img1Off = new Image(); //Inactive Images
img1Off.src = &quot;deleteOff.gif&quot;;
img2Off = new Image();
img2Off.src = &quot;replyOff.gif&quot;
img3Off = new Image();
img3Off.src = &quot;replyallOff.gif&quot;
img4Off = new Image();
img4Off.src = &quot;forwardOff.gif&quot;

function imgOn(imageName) {
if(document.images){
document[imageName].src = eval(imageName + &quot;On.src&quot;
}
}

function imgOff(imageName) {
if(document.images){
document[imageName].src = eval(imageName + &quot;Off.src&quot;
}
}

//-->
</script>


and in the document...



<form action=&quot;delete.cfm&quot; method=&quot;post&quot; target=&quot;_parent&quot; name=&quot;Form1&quot;>

... input tags ...

<a href=&quot;#&quot; onMouseOver=&quot;imgOn('img1')&quot; onMouseOut=&quot;imgOff('img1')&quot; onClick=&quot;submit(top.header.window.document.Form1)&quot;>
<img src=&quot;deleteOff.gif&quot; width=&quot;125&quot; height=&quot;40&quot; border=&quot;0&quot; alt=&quot;Delete Message&quot; name=&quot;img1&quot;>
</a>
</form>



The stuff in the submit() method is because I was running a page with frames. Normally you just need the form name (if there are multiple forms on the page.)
FTK

 

[Guest_imported]

I tried what you posted and I got the image rollover to work, however I got a javascript error stating this

JavaScript Error: submit is not a function

do you know anywhere I can see this work?

 

[felixtkatt]

After getting this to work (or so I thought), I realized that the submit() refuses to work on Macs. Don't know why, but it doesn't (both in Netscape and IE).

In the spirit of sharing and learning. I am going to publish a page on my site for others to pour over and figure out what is up with this stupid thing and where the possible problems could be coming from. I'm starting to think more and more that it is a Javascript problem based on what the version the browser supports.

Anyway, without further ado:

http://www.sg.usf.edu/tek-tips/index.html

This page has - image swaping, submitting a form using images and submitting a form using swapped images. The action page processes the form using ColdFusion. Use whatever code from the page you want. FTK

 

[nickhead]

I was having this problem, but specifically in Netscape 6/7
using standard Macromedia rollovers as generated by Fireworks. I found that the key difference between a form that had worked, and one that didn't was the way the rollover code was written - a simpler rollover code as used above by felixtkatt worked fine in all browsers, but the MM rollovers did not.

This isn't posted as an answer, just a hint as to where to lay the blame if you're having a similar problem.

 

[darrix]

You can try:

<input type=&quot;image&quot; name=&quot;dickoy&quot; src=&quot;imgs/button/continue_off.gif&quot; onmouseover=&quot;javaScript:this.src='imgs/button/continue_on.gif';return true;&quot; onmouseout=&quot;this.src='imgs/button/continue_off.gif'; return true;&quot;>