|
|
Home » Javascript » Article
|
|
| Viewed: 71371 times |
Rating (6 votes): |
|
3.2 out of 5 |
|
|
|
Javascript Image Rollovers
Pass your mouse over the similing face below.
What happens here is we use a bit of javascript to swap two different images on the page. You often see this on sites
to display a rollover on the navigation buttons.
Let's look first at the code that will do the swapping :
The first four lines load in the images so that they rollover smoothly as soon as the mouse is pointed at them. Notice here
we also specify the width and height (in that order) of the image. These are usually the same to create a seamless rollover, but
there's nothing stopping you adding images of different sizes if you want a particular effect.
Next we have two javascript functions Frown and Smile. These reference the image and set its source to the appropriate image file.
The Image File
Before any of that will work however, we need the image in place in the HTML code. Here's the code :
Now you can see how the functions find the image. The image has a NAME attribute "imageflipper". The 2 functions
find the correct image to flip by looking going through document.imageflipper and then finding the source of the image by using
document.imageflipper.src (Note that if you had two images on the page with the same name it would not work.)
When the mouse rolls over the image, the onMouseOver event is called, which refers to the Frown() function. When
then mouse moves out, the onMouseOut event is called, referencing the Smile function. Our image swaps, as simple as that!
As usual with javascript remember it's case sensitive, so you must use exactly the same letters and cases in the function name
as when you call the function from the image.
|
|
View highlighted Comments
 User Comments on 'Javascript Image Rollovers'
|
Posted by :
 Archive Import (Mechy) at 21:45 on Tuesday, May 06, 2003
|
I am having a little trouble with this code....i may just be doing it wrong...I wanna swap one image= smart with another= dumb along with assigning a url to it....can you email me the correct code to do so? Thanks
| |
|
Posted by :
Archive Import (vore) at 18:29 on Wednesday, June 11, 2003
|
Endlessly I have wrestled with this one...here is my failed attempt:
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers
Image1= new Image(340,319)
Image1.src = "http://www.darkforum.com/profile/images/inner2.jpeg"
Image2 = new Image(340,319)
Image2.src = "http://www.darkforum.com/profile/images/intro1.jpeg"
function Inner2() {
document.imageflipper.src = Image1.src; return true;
}
function Intro1() {
document.imageflipper.src = Image2.src; return true;
}
// - stop hiding -->
</SCRIPT>
<IMG NAME="imageflipper" SRC="http://www.darkforum.com/profile/images/intro1.jpeg" onMouseOver="Inner2()" onMouseOut="Intro1()">
Why doesn't this work..am I just dumb?
| |
|
Posted by :
Archive Import (primo) at 05:31 on Tuesday, June 17, 2003
|
Okay but haw can we use this on a Submit Button Image?
| |
|
Posted by :
Archive Import (Joseph) at 21:10 on Saturday, June 28, 2003
|
i cant seem to make two rollovers on a page... i have multiple buttons on my frame.. and i want to make each one a seperate rollover... please email me telling me how.. and if youd like to see the page for yourself www.drivenyouthministries.com
| |
|
Posted by :
Archive Import (matt) at 21:20 on Sunday, August 03, 2003
|
Javascript Image Rollovers
Okay but haw can we use this on a Submit Button Image?
| |
|
Posted by :
Archive Import (matt cupryk) at 23:43 on Saturday, August 09, 2003
|
I have to create a rollover submit button where I call the following:void Button1_Click(Object src, EventArgs e ) and check some validation before doing server.transfer to next page. I do not want to use (ImageClickEventArgs e). How do I go around this. It is something complex.
This is what I have however I get a delegate error to the arguyments. Please send me an email if u can help me. Thank you.
Matt Cupryk
<input id="InputImage3" onmouseover="this.src='images/next_on.gif'" onmouseout="this.src='images/next.gif'" type="image" src="images/next.gif" runat="server" onclick="Button1_Click" width="60" height="26" />
| |
|
Posted by :
Archive Import (catherine) at 04:52 on Monday, August 18, 2003
|
i like to know more about it. pls send me an e-mail.thanks
| |
Posted by :
 CobraLeader at 14:00 on Thursday, March 04, 2004
|
Here is the what you need, just sustitute your values
<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers
Image1= new Image(138,42)
Image1.src = "../images/button_1_over.gif"
Image2 = new Image(138,42)
Image2.src = "../images/button_1.gif"
function button_1_over() {
document.imagefliper.src = Image1.src; return true;
}
function button_1() {
document.imagefliper.src = Image2.src; return true;
}
// - stop hiding -->
</SCRIPT>
<a href="Home.htm"><IMG NAME="imagefliper" SRC="../images/button_1.gif" onMouseOver="button_1_over()" onMouseOut="button_1()" border="0" ></a>
Hope you get it, CobraLeader
| |
|
Posted by :
mister2quick at 21:02 on Monday, April 19, 2004
|
I hope i can explain this as to what i am trying to accomplish.
Is it possible to have the image:
When the mouse rollsover, switches the mainFrame to a specific web page and when the image is clicked, brings up a new page. When rolls out returns to default page.
Im trying to use photo thumbnails, when a user rolls over them in the bottom frame, update the mainFrame to a larger image, and when clicked opens up a new browser with a full resolution image.
Any and all help is appreciated! Thanks!
| |
|
Posted by :
Tngodesign at 16:30 on Monday, October 24, 2005
|
Hi,
i can do 1 rollover image but not 2. I even changed the name and all other things and it still doesn't work. Could anybody show me a example thx
| |
|
Posted by :
Magicman at 19:52 on Tuesday, October 23, 2007
|
[b]I've got it to work with just an image but how would you use this script with a submit button? Cobraleaders way wont work ab/c its a link. Please e-mail me with a response. Thanks. [/b]
| |
|
To post comments you need to become a member. If you are already a member, please log in .
 
| RELATED ARTICLES |
Javascript - Enable and Disable form elements
by Jeff Anderson
This is a relatively little known and under-used feature of javascript which can be very useful in guiding a user through a form. Using the disabled tag, you can switch on and off elements in a form. |
 |
Javascript Onload Event
by Jeff Anderson
Sometimes you need to perform an action immediatley after the page has loaded. That's when the onLoad Event Handler comes in handy |
|
Check IsNumeric Function
by Jeff Anderson
A javascript validation function to check whether the details entered by a user are numeric. |
|
Form Validation Function
by Jeff Anderson
A javascript validation function that you can use to validate all types of forms. |
|
JavaScript Field Is Empty Form Validation
by Jeff Anderson
This javascript function allows you to check whether a form field has been completed or not. |
|
Javascript Get Selected Text
by Jeff Anderson
A cross-browser script to get text selected by the user |
|
Check Email Validation Function
by Jeff Anderson
A javascript validation function to check whether the user has entered a valid email address in a form. |
|
Multiple submit buttons on a single form
by Kiran Pai
This script shows you how to submit the contents of a form to different programs depending on which Submit button you press. Additionally it also shows how to call two different functions when you press the Submit button. |
|
Validate Form and Disable Submit Button
by Marylou Marks
I have a form that validates info, but I also want to disable the submit button. The disable part worked before adding the form validating. |
|
Simple date validation
by Chris Hogben
function that takes a date in three parts, day, month and year - returns true if it's a valid date. |
|
| |
