Highlighting clicked image using jquery and css

Highlighting clicked image using jquery and css:

 

 

If you see the images in online shopping websites, they will be highlighting the product image on click of the image. It will give more interaction to the user. This can be done using jQuery and css.

 

 

 

Import the jQuery Plugin:

[plain]
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
[/plain]

CSS Source:

[css]

<style type="text/css">
/* Image display styles – Javadomain.in */
div.online-shopper{
float: left;
margin-left: 124px;
margin-top: 150px;
cursor:pointer;
}

/* Image active and inactive classes – Javadomain.in */

a img.activeImg {
background-position: -1px 1px;
opacity: 1;
padding: 10px;
}

a img.inactiveImg {
background-position: -1px 0;
-moz-opacity: 0.2;
    opacity:.20;
    filter: alpha(opacity=20);<a href="http://www.ngdeveloper.com/wp-content/uploads/2014/11/Highlight_Clicked_Image.zip">Highlight_Clicked_Image</a>
padding: 10px;
border: 1px solid black;
}

</style>
[/css]

We used jQuery to add the “activeImg class” to the clicked image and “inactiveImg class” to the all remaining images.

here activeImg and inactiveImg are the image class names, both are having only the opacity difference in the above css styles. Here the logic is to display the images with 0.2 opacity by default and on click of the image we are making the opacity to 1.

 

jQuery Source:

[html]
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function() {
$("img").not(this).addClass("inactiveImg");
$(this).removeClass(‘inactiveImg’);
$(this).addClass("activeImg");
alert("You have clicked: "+this.id);
});
});
</script>
[/html]

Output:

 

jQuery Recommended Books: