IMAGE ROLLOVER

Exploring jQuery



                                                       Implementing Image Rollover


Consider the scenario of the ShopForYou.com website that sells products of  various categories, such as phones and laptops. To give customers a preview of the appearance of these products, their images are displayed on the product page. To make the preview of these products appealing to the customers,  you may want to add effects to the images displayed, such as when a customer places or moves the mouse pointer on an image, it appears enlarged or appears along with some information  about that product. This can be achieved by replacing image with the larger image of the same product or information about that product as plain text , as shown in following figure



                                                           Creating Image Rollover



The image can be replaced by other images at runtime by creating the image rollover effect. JavaScript help you to add the image rollover effect on the Web pages.

Image rollover is an effect in which the appearance of an image changes when the mouse pointer is placed or moved on it. The change in the appearance can be achieved by replacing the original image  with the another image by using JavaScript.

In the ShopForYou website, the Product1.png and Product2.png images display images of laptop and mobile, respectively on the product page. You need to add a feature on the website so that when a customer moves or places the mouse pointer over the image of the laptop or mobile , its detailed are displayed. To accomplish this task, you need to add the image rollover effect to the Product1.png and Product2.png images.

To implement the rollover effect, you need to write a following code in a file  and save it as imagerollover.html:

<!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>
body{
background-color:white;
}
h2
{
font-family:verdana;
font-size:30px;
color:darkcyan;
text-align:center;
}
h3
{
font-family:verdana;
font-size:20px;
color:darkcyan;
text-align:center;
}
#para1;
{
font-family:verdana;
font-size:18px;
color:darkcyan;
text-align:center;
}
</STYLE>
<SCRIPT>
function over(img, imgsrc)
{
img.src=imgsrc;
}
function out(img, imgsrc)
{
img.src=imgsrc;
}
</SCRIPT>
</HEAD>
<BODY>
<H2>Product Categories</H2>
<HR><HR>
<H3>Check out the latest product of our website. Exciting discounts, Hurry!!</H3>
<DIV style="position:absolute; top:180px; left:400px; ">
<P ID="para1">Move the mouse over the product image </P>
<IMG ID="productImage1" src="Product1.png height="150" on mouseover="over(this, 'Product1Details.jpg')" on mouseout="out(this, 'Product1.png')"/>
IMG ID="productImage2" src="Product2.png height="150" on mouseover="over(this, 'Product2Details.jpg')" on mouseout="out(this, 'Product2.png')"/>
</DIV>
</BODY>
</HTML>

In the preceding code, two functions, over() and out(), are invoked on the onmouseover and onmouseout events of the <IMG> tag  respectively The Product1.png and Product2.png images are added on the Web page  by using the <IMG> tag. When the customer move the mouse pointer on the Product1.png , the over function is invoked, which changes the value of the src attribute of the image in the Web pages  to Product1Details.jpg. As a result the Product1.png image is replaced with the Product1Details.jpg image. However, the customer move the mouse away from the Product1Details.jpg , the out function is invoked, which changes the value of the src attribute of the image in the document to the Product1.png image. Therefore the Product1.png image is redisplayed on the page. Similarly Product2.png image is replaced with the Product2Details.jpg  image.




In the preceding Product Details Web page , if the mouse pointer is moved on the image of the laptop , it is replaced by another image that contains information  of the product , as shown in the following figure






About Codingwelove

Codingwelove
Recommended Posts × +

0 comments:

Post a Comment