How to change a lot of img when hover


I am a new web developer so I don't know best practices.

I have a few images on the page which i want to change on hover. I found two solutions but I dont know which is better.

First one in HTML:

  <a href="getContent('unlight');">
    <img src="res/images/unlight/p_first.png"
         onmouseover="this.src='res/images/light/p_first.png'" alt="First"

And second one using CSS:

<td id="first" onclick="getContent('first');">First</td>

    background: no-repeat url("./images/unlight/p_first.png");
    width: 78px;
    height: 78px;

#first:hover {
    background: no-repeat url("./images/light/p_first.png");
    width: 78px;
    height: 78px;

Now for every img I need write two paths.

Can this be automated? How to do it professional and universal?



.myButtonLink {
    display: block;
    width: 100px;
    height: 100px;
    background: url('/path/to/myImage.png') bottom;
    text-indent: -99999px;
.myButtonLink:hover {
    background-position: 0 0;


<a class="myButtonLink" href="#LinkURL">Leaf</a>
By : Kawabry

There are obviously quite a few ways to this but here's one way.

Combine your two images into one image, use that image as the background image and on hover/focus change the background position of your image to show the second image.

Also unless you are displaying tabular data then you really shouldn't use tables on your websites. Stick with DIV tags, SECTION tags etc.


<a id="image1" class="hover-image" href="#">First</a>

// set a class which contains global settings for all relevant images.

a.hover-image {
 background-position:0 0;

a.hover-image:hover, a.hover-image:focus {
 background-position:XXXpx XXXpx;

// set the background image path based on a unique ID.

a#image1 {

Use can use second thing but the html should in right value. Only td value is not enough.

 <div id="first" >First</div>‚Äč

Dome is here

By : Selvamani

This video can help you solving your question :)
By: admin