Jump to content
MaxCheaters Official Group on X
MaxCheaters Official Group on Discord
--> Place your ad text here <--

[Guide]Change Image on Mouseover Javascript

xXxExosoulerxXx

By xXxExosoulerxXx
in Guides & Tutorials

 Share

Recommended Posts

xXxExosoulerxXx Newbie

xXxExosoulerxXx

Posted
Posted

This is a small javascript that changes an image on mouseover. Run your mouse on the image above to see the rollover effect. The image contains a link and is a great script for any webpage.

 

The mouseover script is also useful for those learning javascript. Have a look at the code and see how easy it is to follow.

 

Installation:

 

STEP 1.

 

Make 2 images which you would like to display. You can name them #1 and #2 if you wish and they can be jpg or gif format. Upload the images to your server.

 

STEP 2

 

Copy the code below and paste this between the <head> and </head> tags of your html document. Point the script to where the images reside on your webhost. By this I mean change image source lines:

image1.src = 'images/rollover1.jpg' and

image2.src='images/rollover2.jpg'

 

The lines in red should show where your images are stored and your image name. The example shows that my images are stored in the images folder and the names are rollover1.jpg and rollover2.jpg. You may need to use your full url such as http://wwww.yoursite.com/image1.jpg

 

<script 
language="Javascript"> <!-- http://l2justice.servegame.com if (document.images) 
{ image1 = new Image image2 = new Image image1.src = 'images/rollover1.jpg' image2.src 
= 'images/rollover2.jpg' } --> </script>

 

 

STEP 3.

 

Copy the code below and paste this into the body of your html document, where you want the images to appear on your webpage.

 

Again change the image source to suit at this line; img src="images/rollover1.jpg"

(Note that you only need to change the image1 here. The second image is called by the script.)

 

 

<a href="http://l2justice.servegame.com" 
onMouseOver="document.rollover.src=image2.src" onMouseOut="document.rollover.src=image1.src"> 
<img src="images/rollover1.jpg" border=0 name="rollover"></a>

 

That's it. Good luck.

 

 

  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing


×
×
  • Create New...