Is there a way to make images on a page change without having to use flash/ Java?
| |
|
Welcome to KnowledgeSutra - Dear Guest | |
Make Image Change When Hovered W/o Flash?
Started by PHPtech, Mar 24 2005 11:31 PM
4 replies to this topic
#3
Posted 24 March 2005 - 11:44 PM
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:
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:
*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!
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!
Reply to this topic

1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users














