Jump to content
xisto Community
Sign in to follow this  
Followers 0
PHPtech

Make Image Change When Hovered W/o Flash? How?

By PHPtech, in Web Hosting Support

Recommended Posts

snlildude87    0

snlildude87
Posted

Indeed there is, PHPtech! This is what I do on my website on the pages that I want a rollover image:

1. Create a blank file named rollover.js
2. Move rollover.js to the same folder/directory as the html file you want the rollover picture to show
3. Open rollover.js
4. Copy and paste the following code to rollover.js:

img = new Image();img.src = "yourimage.jpg";
Replace "yourimage.jpg" with the name of your image
5. Save rollover.js
6. Open the html file/page that you want the rollover picture to be in
7. Copy and paste the following code between the <head></head> tags in the html file:
<script  type="text/javascript" language="JavaScript" src="rollover.js"></script>
8. Copy and paste the following code to your html file:
<a href="link_to_go_to_when_clicked.html" onmouseover="img.src='your_mouse_over_picture.jpg';" onmouseout="img.src='normal_picture.jpg';"><img src="normal_picture.jpg" border="0" name="img"></a>
*Replace link_to_go_to_when_clicked.html with the page to go to when your rollover image is clicked. If you don't want a link, simply remove the <a></a> tags surrounding the rollover picture.
*Replace your_mouse_over_picture.jpg with the picture you want to show when your mouse is hovering over the picture (the normal picture)
*Replace normal_picture.jpg with the picture to show when your mouse is NOT over the picture.

:)

If you need more help, PM me! :)

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept