CODEWITHSUNDEEP
cssimagehtml-table
Gaston Coroleu
Gaston Coroleu

Reputation: 385

Change image of img tag on hover using CSS

I have a image menu. I want to change the image into TD table when the link is activated. 

<table width="100%">
    <tr>
        <td align="left">
            <a href="http://pinkmodels.16mb.com/">
                <img src="http://i.imgur.com/jO3ni.jpg">
            </a>
        </td>
        <td align="center">
            <a href="http://pinkmodels.16mb.com/models/">
                <img src="http://i.imgur.com/utKcC.jpg">
            </a>
        </td>
        <td align="center">
            <a href="http://pinkmodels.16mb.com/blog/">
                <img src="http://i.imgur.com/h4JGE.jpg">
            </a>
        </td>
        <td align="center">
            <a href="http://pinkmodels.16mb.com/about/">
                <img src="http://i.imgur.com/M2GE8.jpg">
            </a>
        </td>
        <td align="right">
            <a href="http://pinkmodels.16mb.com/contact/">
                <img src="http://i.imgur.com/bWoe3.jpg">
            </a>
        </td>
    </tr>
</table>

Upvotes: 1

Views: 12150

Answers (3)

Mr_Green
Mr_Green

Reputation: 41832

Instead of using <img> tags use background-image property in your CSS file.

For example,

table td a{
    display: block;
    background-image:url('FirstImageURL');
    /* other background properties like "background-size", if needed */
}

table td a:active{
    background-image:url('SecondImageURL');
}

or else

You can change the image using content css property: (works in chrome)

.className { /* or "img" */
    content:url('ImagePathURL');
}

Working Fiddle.

The above you can do by assigning unique classes (or Id's) to each img tag. or else using :first-child and :last-child selectors in combination with +(sibling) selector. Something like this:

table > img:first-child{ /* css properties */ }                     /* first  child */
table > img:first-child + img{ /* css properties */ }               /* second child */
table > img:first-child + img + img { /* css properties */ }        /* third  child */
table > img:first-child + img + img + img { /* css properties */ }  /* fourth child */
table > img:last-child { /* css properties */ }                     /* fifth  child */

For more information check this link.

I hope you know CSS because you haven't used anywhere in your code :)

Upvotes: 7

Chris
Chris

Reputation: 26878

Two choices:

JavaScript solution:

var links = document.getElementsByTagName("a");
var n = links.length;
for(var i = 0; i < n; i ++) {
    var cur = links[i];
    if(cur.getAttribute("href") == window.location) {
        cur.parentNode.childNodes[1].src = "http://i.imgur.com/newimagesrc.png";
    }
}

CSS-only solution:

Instead of using an img tag, use a div with a background-image, HTML would look like:

<table width="100%">
    <tr>
        <td align="left"><a href="http://pinkmodels.16mb.com/">
            <div class = "image first"></div>
        </a></td>

CSS:

a:active > .image.first {
     background-image: url(newimageurl.png);
}

Upvotes: 0

Man Programmer
Man Programmer

Reputation: 5356

a:visited img ,a:active img
{
content:url('change img link as you want);
}

Upvotes: 2

Related Questions