CREATING BACKGROUND COMPATIBLE ROLLOVER

CREATING BACKGROUND COMPATIBLE ROLLOVER

In most of the browsers, such as Firefox and Internet Explorer, the rollover effect can be created on images by using mouse events. However, in the earlier version of browsers, mouse events on images cannot be captured. Therefore, the rollover effect cannot added by using the mouse events on images in these browsers. To outcome this limitations , you need to create a backward compatible rollover.

For Example, in the ShopForYou.com website, you need to add the rollover effect compatible for all browsers so that it can be produce the desire output for all the customers, irrespective of the browser they are using.

The backward compatible rollover effect helps capture mouse events on images in all the browsers. To implement this effect, you need to use the <A> tag and place all the images by using the <IMG> tag within it. The <A> tag can capture mouse events , such as onmouseover and onmouseout , on the images.

Consider the following code snippet  that create the backward compatible rollover effect:

<A href="#" onmouseover="over()" onmouseout="out()">
<IMG ID ="image1" src="Sampleimage1.gif ">
</A>

In the preceding code snippet, the <IMG> tag is placed in the <A> tag. The <A> tag captures the mouse events on the Sampleimage1.gif image. The captured events can be used to create the rollover effect. 

In the preceding examples, you have to use only the ID of the image with the src attribute to refer to a single image and replaced it with another image. However, to implement the rollover effect on multiple images, you can use document.images array for easy implementation. The document.images array stores the reference of all the images in the current documents . If the reference of the image exixt in the document.images array can be used to check if the image exist or not.

In various images in the document.images array can be reference by using either  the ID or the index of the image as a subscript of the array. For Example the first image in the document can be referred to by using the index of the image as shown in the following syntax:

document.images[0]

Similarly , the second images is referred to as doucment.image[1] and so on.

The images in the array can also be referenced by using the ID  attribute of the image as the subscript of the array, as shown in the following syntax:

document.image[ID];

For Example in the ShopForYou.com website, to implement the rollover effect on multiple images and to ensure compatibility with all the browsers, you can use the following code on the product page on the ShopForYou.com website:

<!DOCTYPE HTML>
<HTML>
<HEAD>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
  (adsbygoogle = window.adsbygoogle || []).push({
    google_ad_client: "ca-pub-9961622779713084",
    enable_page_level_ads: true
  });
</script>
<STYLE>
h2
{
font-family:verdana;
font-size:30px;
text-align:center;
}
h3
{
font-family:orange;
font-size:20px;
text-align:center;
}
#para1
{
font-family:verdana;
font-size:14px;
color:blue;
}
</STYLE>
<SCRIPT>
function over (img, imgsrc)
{
if(document.images)
{
document.images[img].src=imgsrc;
}
}
function out(img, imgsrc)
{
if(document.images)
{
document.images[img].src=imgsrc;
}
}
</SCRIPT>
</HEAD>
<BODY>
<H2>Product Categories</H2>
<HR><HR>
<H3>Check out the latest product on your website> Existing Discount Hurry!!</H3>
<Div style ="position:absolute; top:180px; left:450px; ">
<P ID="para1" > Chose the desired product image to view the product details </P>
<A href="#"  onmouseover="over ('productImage1',' Product1Details.jpg');"
onmouseout="out"('productImage1','Product1.png');"
<IMG ID="productImage1" src="Product1.png" border="0"/>
</A>
<A href="#"  onmouseover="over ('productImage2',' Product2Details.jpg');"
onmouseout="out"('productImage2','Product2.png');"
<IMG ID="productImage2" src="Product2.png" border="0"/>
</A>
</DIV>
</BODY>
</HTML>


About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment