Solved

Rollover (MouseOver) graphics in a 'Form'

Posted on 2004-09-16
10
366 Views
Last Modified: 2012-05-05
Does anybody know how to get rollover graphipcs to work inside of a form?

I can assign a graphic as a button without a problem, and then assign the appropriate command to that button; 'submit' etc, but I make them into rollover (image swap).

I've tried the default rollover graphic code from Dreamweaver as well as some custom Javscript but no dice..

Is it even possible?

0
Comment
Question by:silha
  • 3
  • 2
  • 2
  • +3
10 Comments
 
LVL 5

Expert Comment

by:darksinclair
ID: 12079821
which programming language are you working in silha?  PHP? ASP?  do you really want to try and do it with javascript??
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12079912
You have to use a regular image with events:

<img src="mouseout.gif" onmouseover="this.src='mouseover.gif'"
   onmouseout="this.src='mouseout.gif'" onclick="document.forms[0].submit()">

Cd&
0
 
LVL 4

Expert Comment

by:Skonen
ID: 12081588
darksinclair said:
"which programming language are you working in silha?  PHP? ASP?  do you really want to try and do it with javascript??"

Darksinclair: Such a task can only be accomplished in client side scripting such as Javascript or Flash. PHP and ASP are server-side, so once the page has been sent, the server does not have any influence tp what the user chooses to do on his/her system.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:silha
ID: 12081712
Correct... it MUST be client side... (that much I know) and which is why I was trying JavaScript in the first place.

I will attempt to use the code from COBOLdinosaur, but I'm not optinistic as I wrote some very similar code a few days ago that didn't work... COBOLdinosaur's code however is sufficiently different enough to try.

I'll post the results here either way..

Thanks to all, any further comments are appreciated.

Regards,

-Silha

PS.. the source files in question are PHP.. (for those who asked...)

0
 
LVL 36

Expert Comment

by:Zyloch
ID: 12082867
There's nothing wrong with Cd's script. If implemented correctly, it should definitely work. Just watch for those quote mixups, especially if you're echoing with PHP.
0
 
LVL 3

Expert Comment

by:xakem
ID: 12083775
hello!
as i remember we can use images instead of submit buttons, try this:

<input type="image" src="img1.ext" onMouseOver="this.src='img2.ext'" onMouseOut="this.src='img1.ext'>
0
 

Author Comment

by:silha
ID: 12085008
Maybe I'm just technically impaired on this one... I just can't get the code above to work... (and it looks as if it should!)

Below is a line from my current page (using a stand graphic as a button in a form) the 'rollover' graphic would be /image/Buttons/save-n-close_hvr.gif

<input name="btnContinue" type="image" id="btnContinue" value="Continue" src="/image/Buttons/save-n-close.gif" alt="Continue Button" width="148" height="37" border="0">

0
 
LVL 36

Accepted Solution

by:
Zyloch earned 250 total points
ID: 12085353
Try

<input name="btnContinue" type="image" id="btnContinue" value="Continue src="/image/Buttons/save-n-close.gif" alt="Continue Button" title="Continue Button" width="148" height="37" border="0" onmouseover="this.src='/image/Buttons/save-n-close_hvr.gif';" onmouseout="this.src='/image/Buttons/save-n-close.gif';">
0
 

Author Comment

by:silha
ID: 12086846

OH MY GOD! <it works!>

Required a little fine tuning but this appaears to be it!!!

<input name="btnContinue" type="image" id="btnContinue" title="Continue Button" onMouseOver="this.src='/image/Buttons/save-n-close_hvr.gif';" onMouseOut="this.src='/image/Buttons/save-n-close.gif';" value="Continue src='/image/Buttons/save-n-close.gif" src="../image/Buttons/save-n-close.gif" width="148" height="37" border="0">

Thanks to everybody for their input!

-E
0
 
LVL 3

Expert Comment

by:xakem
ID: 12090703
not at all
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question