Adapting CSS & HTML for sprite hover over

Question

I want my image to change when I hover over it using sprites.

This is my current CSS:

.main_advert {
    width:754px;
    margin:20px auto 0px auto;
    padding:20px 0px 20px 0px;
}
.main_advert img, .advert img {
    -webkit-box-shadow: 0px 0px 0px 5px #333;
    box-shadow: 0px 0px 0px 5px #333;
    border-radius:5px;
    border:1px solid #028EC9;
}

Current HTML:

  <div class="main_advert">
      <a href="http://website.com" target="_blank"><img alt="Website" src="./images/website.jpg" border="0" /></a>

I've learned the following does what I want, except it is not compatible with my current CSS.

Incompatible CSS:

.main_advert {
    background: url(./images/website.png) no-repeat 0 0;
    width: 728px;
    height: 90px;
    display: block;
    text-indent: -9999px;
}
.main_advert:hover {
    background-position: 0 -90px;
}

So how would I go about adapting the above CSS into my current?

@Zoltan Toth apologies... that was the older version I tried. Removing the un-needed css. — Skyle777, Dec 08 '12 at 12:17

score 0 · Answer 1 · answered Dec 08 '12 at 12:15

0

Use that tool to generate your sprite and css

answered Dec 08 '12 at 12:15

Jonathan de M.

9,721
8
47
72

I already have a sprite image created. This also will not help me integrate into my current CSS either. The last CSS in my post works on a blank page with nothing else but not on my current website where I want it. – Skyle777 Dec 08 '12 at 12:23
what is happening when you hover it? – Jonathan de M. Dec 08 '12 at 12:27
The incompatible CSS I provided is NOT on my live site. I don't know how I would I adapt it to my current CSS which is at the top of my post. – Skyle777 Dec 08 '12 at 12:30

mhulse · Accepted Answer · 2012-12-08T14:09:47.027

Here's my take on things.

View the source for comments.

(Posting jsbin code here for completeness' sake.)

Based on the assumption that you can't modify HTML, here's a couple of solutions:

EXAMPLE 1

Not using a sprite.

CSS:

.main_advert_1 {
    width: 64px; /* Width of logo. */
    height: 64px; /* Height of logo. */
    background: url(http://drfatmaclinic.com/wp-content/uploads/2012/05/before-after_juvederm1-64x64.jpg) no-repeat;
}
    .main_advert_1 a {
        /* Now the <a> fills the parent container: */
        width: 100%;
        height: 100%;
        display: block; /* Required for <a> to expand to fill parent. */
    }
        .main_advert_1 img { display: block; }
            .main_advert_1 a:hover img { display: none; } /* Hide on hover. */

HTML:

<div class="main_advert_1">
    <a href="#" target="_blank">
        <img alt="Website" src="http://drfatmaclinic.com/wp-content/uploads/2012/06/before_after_restylane1-64x64.jpg">
    </a>
</div> <!-- /.main_advert_1 -->

EXAMPLE 2:

Using a sprite.

CSS:

.main_advert_2 {
    /* Width and height of logo/ad/whatever. */
    width: 284px;
    height: 284px;
}
    .main_advert_2 img { display: none; } /* Just hide it so you can do stuff with the <a> only. */
    .main_advert_2 a {
        /* Random sprite found on web: */
        background-image: url(https://dw1.s81c.com/developerworks/mydeveloperworks/blogs/waldensponderings/resource/BLOGS_UPLOADED_IMAGES/sel-tux_wizard.png);
        background-repeat: no-repeat;
        /* IBID: */
        width: 100%;
        height: 100%;
        display: block; /* IBID */
    }
        .main_advert_2 a:hover { background-position: 0 -284px; } /* Position sprite on :hover. */

HTML:

<div class="main_advert_2">
    <a href="#" target="_blank">
        <img alt="Website" src="http://drfatmaclinic.com/wp-content/uploads/2012/06/before_after_restylane1-64x64.jpg">
    </a>
</div> <!-- /.main_advert_2 -->

If you could edit the HTML, then you could remove the <img> and your code would be a tad "cleaner".

Is that of any help?

EDIT #1

Here's a new version based on your comments.

CSS:

.main_advert {
    /* Width and height of logo/ad/whatever. */
    width: 728px;
    height: 90px;
}
    .main_advert img { display: none; } /* Just hide it so you can do stuff with the <a> only. */
    .main_advert a {
        /* Random sprite found on web: */
        background-image: url(http://trickerygaming.net/tsf2/images/registeroof.png);
        background-repeat: no-repeat;
        /* IBID: */
        width: 100%;
        height: 100%;
        display: block; /* IBID */
    }
        .main_advert a:hover { background-position: 0 -90px; } /* Position sprite on :hover. */

HTML:

<div class="main_advert">

    <a target="_blank" href="#"><img border="0" src="./images/register.jpg" alt="Register"></a>

</div>

Better?

EDIT #2

Here's a version where I removed the <img> and replaced it with text.

(View the HTML/CSS here.)

CSS:

.main_advert {
    text-indent: -999em; /* This hides the "Register on our forums." text (see below). */
    /* Width and height of logo/ad/whatever: */
    width: 728px;
    height: 90px;
    margin: 0 auto; /* Centers this container inside parent. */
    overflow: hidden; /* Hides indented text from above. */ 
}
    .main_advert a {
        /* Your image: */
        background-image: url(http://trickerygaming.net/tsf2/images/registeroof.png);
        background-repeat: no-repeat;
        /* IBID: */
        width: 100%;
        height: 100%;
        display: block; /* Allows <a> to fill parent. */
    }
        .main_advert a:hover { background-position: 0 -90px; } /* Position sprite on :hover. */
        .main_advert a:active,
        .main_advert a:focus { outline: none; } /* Removes ugly outline, on click, in some browsers. */

HTML:

<div class="main_advert">

    <a target="_blank" href="#">Register on our forums.</a>

</div> <!-- /.main_advert -->

For a "sprite" technique, I like this approach the best.

Actually, if it were me, I'd probably try doing things with CSS3.

For CSS3 tools to give you ideas/inspiration, check out:

This is what I get when I try your method: http://trickerygaming.net/tsf2/sprites.html What it should be (except with a sprite in the register now position) http://trickerygaming.net/tsf2/index.html Now the sprite I am trying to use: http://trickerygaming.net/tsf2/images/registeroof.png — Skyle777, Dec 08 '12 at 13:27
I'm sorry, I don't understand the question? What would I need to edit the HTML to? I am sorry for my incompetence. I am a beginner in HTML etc — Skyle777, Dec 08 '12 at 13:43
I've updated my answer. See the "EDIT" section. I'm asking if you can edit the HTML because you're asking to do a "sprite" technique, but you are putting an image into the page (ussually, when you do a sprite technique, you don't have an tag occupying the same location... I'm just wondering if you can remove the ? If you can remove the then we could add some text that says "Register on our forums" which would make it more SEO friendly (at a minimum). — mhulse, Dec 08 '12 at 13:45
Check **EDIT #2** for an example of you code without the `` tag. — mhulse, Dec 08 '12 at 13:55
Quick comment: I just updated my code... I missed a close `*/` for a CSS comment. The updated code [is here](http://jsbin.com/abuwim/4/edit). G'night! :) — mhulse, Dec 08 '12 at 14:08
This solved everything except the border around the image as shown on the index.html page. Anyways, THANKS SO MUCH! It's working. — Skyle777, Dec 08 '12 at 14:09
@Skyle777 Sure thing. Check out [this post for info on borders](http://stackoverflow.com/questions/814366/how-can-i-remove-the-outline-around-hyperlinks-images). Without looking myself, you probably just need: `.main_advert img { border: 0; }`, but check out my **EDIT #2** for an example that doesn't use an ``. Have fun! — mhulse, Dec 08 '12 at 14:14

Adapting CSS & HTML for sprite hover over

2 Answers2

EXAMPLE 1

CSS:

HTML:

EXAMPLE 2:

CSS:

HTML:

EDIT #1

CSS:

HTML:

EDIT #2

CSS:

HTML: