Rollover Link with an Image AND Text

What do you want the image to do? If you want to change the image completely or change color then you will need to put both images on image and just move the background-position when hover over.

There are two images, one is a red color, the other is a slightly brighter color for the hover effect. I understand how to combine the two images into a sprite and manipulate the image position to create the effect. My problem is specifically how to make it so that the text to the right of the image will take on a bold hover effect even if the mouse is hovered over the image instead of the text. Does that make sense?

I understand how to apply the over effect to the image sprite and also how to apply a hover effect to text, but am lost on how to make both occur simultaneously.

Here I did a quick code without the bold hovering.

http://cssdeck.com/labs/full/lood56zt

Yes, that is the type of image effect I want, and I think I understand how to do that part. I also understand how to create a bold rollover effect on the text that will be to the right of my image. My problem is that the two work independently. In other words, I hover over the image sprite and it behaves properly, but the text to the right does not change. Likewise, if I mouse over the text, it changes to bold, but the image doesn't respond. I want both to respond regardless of whether I am hovering over the image or the text. I wanted to keep them as two separate entities (image and text), but I am getting frustrated and debating creating an image that has the text in it, eliminating the separate text all together. Any ideas? Thanks for the help by the way!

I figured out how to do this, so I am sharing the solution for anyone who may run into the same issue. What I did was create a block div with a background image. Then, I created a link in that div and set it to display as a block with matching proportions to the div, setting the top and left positions to 0. Then I positioned my text link using CSS and added a hover effect to the div, changing the background image and font weight.

CSS:

div.cart {
    display: block;
    width: 130px;
    height: 59px;
    font-weight: 300;
    background-image:url(../img/cart.jpg);
    background-repeat: no-repeat;
}

div.cart:hover {
    background-image:url(../img/cartOn.jpg);
    font-weight: 400;
}

div.cart a {
    color:#FF3300;
    letter-spacing: 2px;
    font-size:120%;
    display:block;
    width:130px;
    height: 59px;
    top: 0;
    left: 0;
    text-align: right;
}
.plainLink {
    text-decoration: none;
}

HTML:

<div class="cart">
            <p>

                <a href="#" class="plainLink" alt="Buy Dahlicious Products Online">ONLINE<br/>STORE!</a>

            </p>

        </div>

Why not take a look at pseudo elements? That way you can keep your HTML markup clean, and simply have the image be a pseudo element that is positioned to the left.