How to change a lot of img when hover


Tags: html,css,image,hover

Problem :

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:

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

And second one using CSS:

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

#first{
    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?



Solution :

This may be a great time to get some exposure to jQuery. You can basically write a more dynamic way of accomplishing what you want, similar to what you're currently doing in the onmouseover and onmouseout attributes. Plus jQuery allows you to get this kind of logic out of the HTML markup and into an entirely separate .js file.

Once you get jQuery included, you can create a script that looks something like this. (I've tried commenting heavily so you can understand what's going on:

$(document).ready(function() {
    // Any `img` tag with a class of `some-class` (or whatever you want) will get this behavior on hover
    $("img.some-class").hover(
        // This first handler is for the `onmouseover` state
        function() {
            // Storing a query for `this` in a variable only runs the query once. Otherwise, you'd run it twice in the line below
            var $this = $(this);
            // Replace `/light/` in the image URL with `/unlight/`
            $this.attr("src", $this.replace("/light/", "unlight"));
        },
        // This second handler is for the `onmouseout` state
        // Its logic is similar to the first handler, so I'll omit comments explaining it
        function() {
            var $this = $(this);
            $this.attr("src", $this.replace("/unlight/", "light"));
        }
    );
});

Now you should be able to store the light and unlight versions of each image in light and unlight subfolders. Make sure both images have the same filename. Then add class="some-class" to the img tags that you want to have this behavior.

Extra reading:


    CSS Howto..

    How would I generate a css, js and html file using php?

    How do I center (vertically and horizontally) buttons in a div tag?

    How to vary color of table row border based on div that it's in

    How to show just one line of text in paragraph with width 100% which is part of the table cell?

    How to correct div overlapping the title

    How can I make the BODY element take up 100% height of the HTML element?

    How to truncate text in select box using CSS only

    how to change the div background image in mouse over [duplicate]

    How to make table cell content visible without extending cell's width?

    HTML/CSS- how to align part of a cell to the left, and part to the right?

    In a text based browser game, how would I make a typewriter effect in the dialogue?

    How to specify discrete mapper style in cytoscapejs?

    How do I remove all of the borders from an HTML ? [closed]
    Bootstrap is adding a top border to all td elements in .table containers. Adding ! important to your no-borders rule will override that: td { border: none !important; } ...
    Read more

    how to give blur effect for css overflow visible content

    How to set two divs side by side

    how to select a sibling element when hovering in CSS?

    How to use icon fonts

    How to hover span content from li

    How to create a circumference with CSS? [closed]

    CSS - How to break long words in a table td?

    How to format text wrapped inside specific symbols within a html structure and format it

    How to make two buttons in column?

    How to use Bootstrap3 media queries for custom CSS? [closed]

    Show separation between newlines in textarea

    How to center an input tag in fieldset when using codeigniter?

    How to make rollover images in CSS using multiple image backgrounds and :hover pseudo

    How make contents as a grid in a ScrollPanel in GWT project using UIBinder

    how to apply transition effect in expand/collapse inside gridview rows

    How to change the Menu colour when selected?

    What are some Best CSS Practices, Do you Re-use previous CSS? How about Frameworks? [closed]