• 0

Rollover Text Displays Image


Question

13 answers to this question

Recommended Posts

  • 0

<html>
<head>
<script>
<-- Begin

<script LANGUAGE="JavaScript">
<!-- Begin
// Preload and mouseover scripts
// copyright Mike Bignell - http://mike.rbmb.co.uk

// Preload all images used for script!
image1 = new Image();
image1.src = "images/image1.gif";
image2 = new Image();
image2.src = "images/image2.gif";
image3 = new Image();
image3.src = "images/image3.gif";

// End -->
</script>
</head>

<body>

<table>
<tr>
<td><a href="page1.html" onMouseOver="document.image_swap.src='images/image1.gif';" onMouseOut="document.image_swap.src='images/NoMouseOver.gif';">Image #1</a></td>
<td rowspan=3><img src="images/NoMouseOver.gif" name="image_swap"></td>
</tr><tr>
<td><a href="page2.html" onMouseOver="document.image_swap.src='images/image2.gif';" onMouseOut="document.image_swap.src='images/NoMouseOver.gif';">Image #2</a></td>
</tr><tr>
<td><a href="page3.html" onMouseOver="document.image_swap.src='images/image3.gif';" onMouseOut="document.image_swap.src='images/NoMouseOver.gif';">Image #3</a></td>
</tr>
</table>

</body>
</html>

Erm... could you test that for me... im too lazy to make some images and test them, lol

[EDIT] Ive tested it... It works fine :) i also attached the script in a ZIP :D [/EDIT]

mouseover.zip

Edited by mikey
Link to comment
Share on other sites

  • 0

One problem, when you point @ link 2 and image 2 is displayed, could you make it stays there so people can move over to it and save the image?

Link to comment
Share on other sites

  • 0

Works great mate, thanks! :)

However, small question: In order to stretch/shrink an image add something like:

<img border="0" src="09.04.03.gif" width="323" height="242">

... right? Well, I tried adding it to the end of your script and it didn't work:

image1 = new Image();

image1.src = "images/1.gif" width="325" height="240";

image2 = new Image();

image2.src = "images/2.gif" width="325" height="240";

image3 = new Image();

image3.src = "images/3.gif" width="325" height="240";

The images retained their original sizes :( How can I make them shrink?

Edited by King Mustard
Link to comment
Share on other sites

  • 0

You would have to use DHTML to change the size of the image... if you want them to all be the same size, you can just change the <img> width & height of the main image.

The part you are changing is just to pre-load all of the images into the browser, it is not completely neccasary, just wrote it for speeding up peoples views.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.