Subscribe
Please visit my new Web Site WWW.Codedisplay.com
What is image rollover? Basicaly image rollover means swapping or changing images between two images when user moves the mouse cursor over the image. The most popular practice in our development life is most of the times our clients want to swap or change images for onmouseover(user moves mouse over the link) & onmouseout(user moves out mouse from the link) for links in the header menus or side menus. So that you can highlight a link or give an eye catching interface to your client. Here i will try to start with a simple example then i will give you a realtime aaproach for smooth image rollover with predownload technique.
<a href="http://shawpnendu.blogspot.com/"
onmouseover="document.imgrollover.src='Image/Expand.jpg'"
onmouseout="document.imgrollover.src='Image/Collapse.jpg'">
<img src="Image/Collapse.jpg" name="imgrollover" style="border:0">
</a>
onmouseover="document.imgrollover.src='Image/Expand.jpg'"
onmouseout="document.imgrollover.src='Image/Collapse.jpg'">
<img src="Image/Collapse.jpg" name="imgrollover" style="border:0">
</a>
The above example is very simple & easy to implement. But the above script has one limitation. If you look at the script you will found that when the user moves the mouse over the image, only then the second image start loading & after completion you will see the second image. So there is a time delay or gap for first rollover which is not accepted in commercial purpose. So we need to resolve this. My sugession in this regard is, better try to predownload(load the images into the memory cache in the page loading time) the two images first so that when user moves mouse cursor over the image at the same time the 2nd image already downloaded, thats why the user experience a smooth rollover. Look at the below complete example on how we can predownload the images to make a smooth rollover. Here when user moves the mouse over the image the 2nd rollover image will appear instantly.
<head runat="server">
<title>Image Rollover Example</title>
<script type="text/javascript">
CachedImages = new Array()
CachedImages[0] = new Image()
CachedImages[0].src = "Image/Expand.jpg"
CachedImages[1] = new Image()
CachedImages[1].src = "Image/Collapse.jpg"
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="http://shawpnendu.blogspot.com/"
onmouseover="document.imgrollover.src=CachedImages[0].src"
onmouseout="document.imgrollover.src=CachedImages[1].src">
<img src="Image/Collapse.jpg" name="imgrollover" style="border:0" />
</a>
</div>
</form>
</body>
<title>Image Rollover Example</title>
<script type="text/javascript">
CachedImages = new Array()
CachedImages[0] = new Image()
CachedImages[0].src = "Image/Expand.jpg"
CachedImages[1] = new Image()
CachedImages[1].src = "Image/Collapse.jpg"
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="http://shawpnendu.blogspot.com/"
onmouseover="document.imgrollover.src=CachedImages[0].src"
onmouseout="document.imgrollover.src=CachedImages[1].src">
<img src="Image/Collapse.jpg" name="imgrollover" style="border:0" />
</a>
</div>
</form>
</body>
Here look at the javascript block under head tag you will see that i use an array to predownload the images & store images into this arry when the page start loading. In the link i just refer the array contents based on mouse over & mouse out event.
Now have a look at the sample output:
Now have a look at the sample output:
Script Tested for the following browsers:
1. Internet Explorer (IE)
2. Mozilla Firefox
3.Opera
4. Google Chrome
0 comments:
I WOULD BE DELIGHTED TO HEAR FROM YOU