CSS Based Image Hrefs with Images?

Hey all!

Not even sure if this is possible but feed back on alternatives would be very much appreciated.

Basically my issue is this:

I have an image that links to a page. I would like a hover directive to swap out the image and replace it with another during the hover.

There is no text involved. Just linked images.

so basically:

a:link {
background: url(image1.gif);
}

a:hover {
background: url(image2.gif);
}

I have tried the above and it didn't work for me. I think its honking on the fact that there is nothing my <A> tags in the html:

<a href="blah"></a>

So how does one make this work without java?

 

You will have to set the dimensions of the image.

A {
    display: block;
    width: 100px;  /* or whatever */
    height: 50px;  /* or whatever */
}

Code (markup):

 

It would also be sporting if you added a transparent spacer image of the same size as the object that is linking, and set appropriate alternative text for that image (corresponding to the text in the background image).

This is one reason I'm hesitant to always recommend CSS for handling image-based links. If it's true that ornamental imagery belongs in a style sheet as background information, it is equally true that substantiative imagery, just as buttons with which one must interact to navigate a site, should not be relegated to a style sheet, as it is actually page content. My compromise is to use spacers and alt text, so that at least some of the benefits of having those images present on the page are not lost.

Of course, if those images weren't background images, you would have to use JavaScript to do your rollover effects, not CSS, and that's not cool, right? I'm not so sure. I think you can make a pretty darned good argument that background image swapping is not stylistic, but behavioral, and therefore belongs within JS, not CSS.

The jury is out for me. I do this effect both ways, and I've not settled on either one being explicitly right or wrong.

 

The actual content is merely a link. A graphic button is shown instead to make it look more flashy.

You recommended using a blank picture. How can you recommend a blank picture in an HTML document be considered content?

 

The link is not the content. The link is the tag that defines the action that takes place when you click on an object (content). The image is the content, because it gives the link meaning. C'mon now, that's like making the argument that <p> tags are the content, and the actual text within them just makes them look like paragraphs. Why not create an image of a paragraph of text and set it as a background for <p> tags, right? After all...

I recommended this only as a second-rate measure to having the actual image on the screen, because at least you can give the link alternative content. I don't think this is the best idea, but it's better than a link that goes to a page, but gives no indication of where it's going if the user's browser/browsing-device does not download images.

 

I seem to have explained badly. When I said "link" I did not mean the A tag, I meant to text that is made a link. That text is the content, not some picture that is there just to spice up the visual presentation.

You never called it a second-rate measure. Rather, you called it sporting. You also suggested that the graphics for a button should be in the HTML document and not the style sheet.

 

Hi, my two or three cents:

I would say, images that are links are content. You should declare them in the markup, within the <a> tags, and give them alternate text. Apart from being semantically correct and thus giving you a nice warm fuzzy feeling, it also solves your 1st post's problem.

I would not recommend spacer images, they are unnecessary content solely for a presentational purpose. And we all know that's wrong, mmkay To supply text as an alternative to a background image, I would wrap that text within a <span> tag and hide it through CSS.

- P

 

Six of one, half dozen of the other. It's better than having an empty link with no context for its destination except for a background image.

I suggested there's a very strong argument for this, yes, because an image that acts as a link is not ornamental, it is contextual.

The only problem with this is that it is wuite possible images will not download, but a style sheet might. The only consistent way around this is to use a hated spacer image (again, not a favorite path to go for me either), or to actually use the image itself as the link. This way, either images download and everyone's happy, or images do not download and alternative text is provided. Everything works no matter what.

My apologies in advance for delayed responses. I'm on a business trip in Chicago. It's beautiful right now, 70 and slightly breezy