We start by creating an HTML file and aligining
a couple of images horizontally. The control would look something like this.
On hovering the third Image:
<body>
<div class="”div1”" id="”div1”">
<ul>
<li>
<img src="images\1.jpg" class="smallImage"></img></li>
<li>
<img src="images\2.jpg" class="smallImage"></img></li>
<li>
<img src="images\3.jpg" class="smallImage"></img></li
<li>
<img src="images\4.jpg" class="smallImage"></img></li>
</ul>
</div>
</body>
This HTML markup creates the images. The CSS class “smallImage” has been added
to adjust the height and the width of the images.
<style type="text/css">
.smallImage
{
height: 100px;
width: 100px;
}
li
{
float: left;
padding: 5px position: relative;
}
ul
{
float: left;
list-style: none;
position: absolute;
}
div.div1
{
width: 570px;
height: 170px;
border-style: inset;
border-width: 5px;
}
</style>
The class for “li” has a property float:left;. This is used to align the images
horizontally one after another
Now we are going to achieve the Hovering effect using JQuery. The Hover method
in JQuery takes two eventhandlers. The first one handles the event on MouseOver
and the second one handles the event for MouseOut. The JQuery script the achieve
the effect is given below
<script type="text/javascript">
$(function () {
$('.smallImage').each(function
() {
$(this).hover(
function () {
$(this).animate({
height: "150px", width:
"150px" }, 500);
},
function () {
$(this).animate({
height: "100px", width:
"100px" }, 500);
}
)
});
});
</script>
Here we are selecting all the elements for which the CSS class “smallImage” is
applied and apply the hover to each selected element.
$('.smallImage').each(function(){… this part of the code does that.
The first function in the Hover method handles the MouseOver event. The animate
method increases the size of the image. The value 500 signifies how smoothly the
animation should be carried out.
Attached is the entire HTML file. Hope this helps.
Cheers !!