Rollover (MouseOver) graphics in a 'Form'

Posted on 2004-09-16
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?

Question by:silha
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +3

Expert Comment

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

Expert Comment

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()">


Expert Comment

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.
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.


Author Comment

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.



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

LVL 36

Expert Comment

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.

Expert Comment

ID: 12083775
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'>

Author Comment

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

LVL 36

Accepted Solution

Zyloch earned 250 total points
ID: 12085353

<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';">

Author Comment

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!


Expert Comment

ID: 12090703
not at all

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

696 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