roll over on an input type image

[Steven_Smith]

Hi guys, is it possible to do a roll over on an input type=image ?

This is what I am trying right now. Ya, I know it doens't work. But its where I am starting. Just wondering if you javascript heads allready know this.


<input type="image" src="images/sign_04.gif" onmouseover="changeImages('sign_04', 'images/sign_04-over.gif'); return true;"
onmouseout="changeImages('sign_04', 'images/sign_04.gif'); return true;">

Thanks
Steve

[chrismiceli]

why don't you just use an image, and make it do what the input would.

[Steven_Smith]

Funny thing.

When I use a document.formname.submit() in a href lets say, the 'validate' feature of the form isn't working.

<form name="subscribe_form" action="index.php" method="post" onsubmit="return validate()">

So I am using a input type="image".

I am trying this right now, dosn't work but hey I gots ta try

<input type="image" name="imp" src="images/sign_04.gif" onmouseover="document.subscribe_form.imp.src='images/sign_04-over.gif'"

[GoHF]

The "onsubmit" event fires before form.submit(). That is why usually scripts that validate forms are called using the "onsubmit" event, and then inside the script you use form.submit() to actually submit the form.
Otherwise, you would go into a cycle like this: form.submit()->fire onsubmit event->validate->form.submit()->fire onsubmit event->validate->... eternally ;)
(basically, after re-reading the above, I think it's simpler to tell you form.submit() simply doesn't fire the "onsubmit" event, and that is why your validate function isn't called)

As for the image rollover, it is easy solvable.


onmouseover="changeImages('sign_04', 'images/sign_04-over.gif'); return true;"
onmouseout="changeImages('sign_04', 'images/sign_04.gif'); return true;"


this is your code. See the parts I put in bold? I don't know what function that is, but I guess those values ('sign_04') are supposed to tell the function which image it has to change. They either are the name or the ID fields of the image. To make it work, change your code to this:


<input id="sign_04" name="sign_04" type="image" src="images/sign_04.gif" onmouseover="changeImages('sign_04', 'images/sign_04-over.gif'); return true;"
onmouseout="changeImages('sign_04', 'images/sign_04.gif'); return true;">


=) good luck

[Steven_Smith]

Thanks GoHf. but I can't get that to work. My Roll over script.



is the imageready rollover script.

I am wondering if I need to add somting to tell it that the 'object' is not a <img> but an <input>

hmm....

Steve

[Steven_Smith]

SOLVED!!!!

Its as easy as

<input type="image" src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.gif'">

Which is all you can hope for!!!

Thanks to glenngv that CF Nut from post

http://www.codingforums.com/showthread.php?s=&threadid=10911&highlight=input+type

[cheesebagpipe]

The "onsubmit" event fires before form.submit(). That is why usually scripts that validate forms are called using the "onsubmit" event, and then inside the script you use form.submit() to actually submit the form.


1) No such thing as an "onsubmit" event. Form.onsubmit is an event handler property. The event is called submit.

2) Form.submit() is a method (function). Functions don't 'fire'.

3) The Form.onsubmit handler is only called when the form is user-submitted: with a submit button, or by hitting 'enter' with focus on a text input. Form.onsubmit is not called when using the Form.submit() method - for the obvious reason: the scripter (you) is 'submitting' the form, not a user-generated event.

4) Validators called with Form.onsubmit simply return true or false to the handler, which returns it to the submit event, cancelling or continuing it. No one uses the submit() method in these cases to actually submit the form...

:rolleyes: