Solved

Rollover (MouseOver) graphics in a 'Form'

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

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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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)

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now