JQuery controls the hover Effect of images

You can use css or js to implement the hover Effect of images. A typical example is smartrolover. js.

The advantage of using js is that if a website has a lot of hover effects on images, css control may be required for each image, and the code is redundant. But with JavaScript control, no matter how many images are there, the hover effect can use the same js, but the out/off Effect and over/on effect naming of images must be regular, such:

Navi01_out.jpg/navi01_off.jpg

Navi01_over.jpg/nvai02_on.jpg

In this way, js control is very convenient. Find the matched name, and replace it with another name during hover.

Today, I want to use jQuery to control the effect:

The Code is as follows:

1 <script type = "text/javascript">
2 $ (function (){
3 var $ img = $ ("img ");
4 $ img. hover (function (){
5 $ (this). attr ("src", $ (this). attr ("src"). replace ("_ out", "_ over "));
6}, function (){
7 $ (this). attr ("src", $ (this). attr ("src"). replace ("_ over", "_ out "));
8 });
9 });
10 </script>

 

$ Img can be specified by you. You can specify it as another

For example:
Var $ img = $ ("img. imgover"); indicates that all img class images are imgover images.

Others can be tailored to your needs. However, images must be named regularly.