...

View Full Version : Image as a link using css



cmw000
08-12-2005, 08:27 PM
Here's the code I'm looking at:


#top{ position:relative; height:231px; width:658px; background-image: url(imgs/top.gif); background-repeat:no-repeat; }

How do I make the image a link?

Tristan Gray
08-12-2005, 08:30 PM
Hot spots are the only way I know of to make a background image a link. My question is why you are setting it as a background image if it is a foreground object to be clicked. It is really easy to make an image a link in your HTML mark-up.

mark87
08-12-2005, 10:32 PM
Agreed... why can't you just have

<a href="blah.html"><img src="imgs/top.gif"></a>

?

You don't need to have it as a background surely unless you want to overlay text on the top or something?

rmedek
08-12-2005, 11:57 PM
The advantage to using a background image is to keep your HTML semantic... usually in conjunction with some sort of image-replacement technique:



HTML:

<h1><a href="/index.php">Widgets, Inc.</a</h1> <!-- nice, clean HTML that describes the first level header of the document -->

CSS:

h1 {
width: 600px;
height: 100px;
text-indent: -9999px;
overflow: hidden;
background: url(images/widgets_logo.jpg) no-repeat left top; /* this image replaces the text in the header with something a little prettier */
}

h1 a {
display: block;
height: 100px;
}


Just an example and only one method to do it. If it's an image that best describes the content, I'd use the img tag in the HTML:


<a href="/gallery.php"><img src="thumbnail.jpg" alt="small photo of a widget" width="50" height="50" /></a>

cmw000
08-13-2005, 02:53 AM
Thanks for your lengthy reply rmedek. Everyone else: the whole reason to use css is to eliminate unneccesary html coding, that's why I asked the question. I'm aware of the <a> tag. But in this case, for lack of an easy answer, I just put the link in the html. Thanks to everyone who responded.

meth
08-13-2005, 04:21 AM
There's a simple CSS solution. Insert a link into the parent container, taking note of it's dimensions, and insert a link with '&nbsp' as the anchor text. Give the link CSS attributes to change it to a block level element with the same dimensions as the parent conainer.

EG:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#bgImg01 {
background: #999999;
height: 50px;
width: 150px;
border: 1px solid #333333;
}
#bgImg01 a {
text-decoration: none;
display: block;
height: 50px;
width: 150px;
}
-->
</style>
</head>

<body>
<div id="bgImg01"><a href="someLink.htm">&nbsp;</a></div>
</body>
</html>

Graft-Creative
08-14-2005, 03:00 PM
If it's an image that best describes the content, I'd use the img tag in the HTML:


I agree, for instance if you have gallery or portfolio page then using the img tag will ensure you are covered in a 'CSS off/images on' situation.

I'd also include any company branding, logo etc, in that category.

While the above methods will definately make your code a lot leaner, I'm not entirely sure why the img tag is being seen as un-semantic. Looks pretty meaningfull to me: img = this is an image?

Just my two pence,

Gary

Tristan Gray
08-15-2005, 12:59 PM
Yeah, I see the argument that is trying to be made, but I also see that it does not apply here. There is no way to 'style' something into being a link. That is a mark-up thing.

I can see why someone would want to use it as a background image rather than just an image, but unless it was absolutely required it is more code to do it that way.

mcdougals4all
08-15-2005, 03:33 PM
I agree, for instance if you have gallery or portfolio page then using the img tag will ensure you are covered in a 'CSS off/images on' situation.

I'd also include any company branding, logo etc, in that category.
That's a good point, especially if you want to create print friendly pages.

By default, most browsers don't print background images which means you lose the branding from your logo. And unless you take some care to override the image replacement rules @media print, even the plain text would be invisible due to the way it is initially hidden.

rmedek
08-16-2005, 01:49 AM
I'm not entirely sure why the img tag is being seen as un-semantic. Looks pretty meaningfull to me: img = this is an image?
I think it's all about the context... most images on a site are used to replace text for headings, titles, etc. Obviously in a perfect world we'd use "font: 1em "Awesome Font", sans-serif;" but until then I'd say that's the major time a <img> tag is un-semantic.

I guess it's all according to how the code is being read, not displayed...


Unsemantic:

"Okay, here's a webpage; here's a first-level header, and the heading is... an image. So, this is a page about an image. And here's a link to an image. And another link to an image..."

Semantic:

"Okay, here's a webpage; here's a first-level header, and the heading is "Awesome Website." So, this is a page about an awesome website. And here's a link to "News," and here's a link to "Contact"..."


After all, HTML isn't about how things look, it's about what it means.

Tristan Gray
08-16-2005, 12:47 PM
I do not buy this argument really and do not see how using all background images makes any more sense. Background images are for backgrounds. I mean I use what I need to get the job done but I say there is more than fuzzy logic going on calling use of the img tag unsemantic.

Either way, CSS cannot make an image a link in itself.

rmedek
08-16-2005, 05:54 PM
I do not buy this argument really and do not see how using all background images makes any more sense . . . I mean I use what I need to get the job done but I say there is more than fuzzy logic going on calling use of the img tag unsemantic.
I doubt you would feel the same way if you were blind.


Background images are for backgrounds.
Right. But the background images are applied via CSS, so they don't have any semantic meaning. That's the point. Use <img> if an image IS the content. If the image is just making the content look pretty, don't.


Either way, CSS cannot make an image a link in itself.
Of course it can't. CSS only styles a document.

Tristan Gray
08-16-2005, 06:23 PM
Going back to the original topic which has been once again ignored in favour of beating the semantics horse into the ground... He was trying to make a banner clickable. If you read things like
the whole reason to use css is to eliminate unneccesary html coding, that's why I asked the question. I'm aware of the <a> tag. But in this case, for lack of an easy answer, I just put the link in the html. it is easy to tell that this fellow is well aware of the semantics of the game of web-development (as in read all the trendy sites) but has no clue what the hell he is talking about.

You put the link in the HTML because you have no choice. CSS doesn't do stuff like that. Ever. At all. I have never said not to use background images but if I am going to have a company banner on my site I'm probably not going to set it as a background on a new layer and then create 'hot spots' over it just to make it work as a link. Use a background image when it makes sense, but in this guy's case it doesn't.

Some may say, including rmedek I'm guessing, that he should go to all the trouble with the extra layers and hot spots for accessibility but I say that it is foolish to hurt 99% of your users just to be able to say you are ready in case a blind man likes your site. It is not like the screen-reader will completely flip out at a clickable banner, and if it does then lobby the screen-reader developers for some better programs. If there is an alternate to the image that explains it at all then so long as it isn't placed in the middle of the text and even so it should never be more than a little confusing at first.

I agree that people should try to make their sites as accessible as possible within reason. But if I have to double my code and load times for every user just to avoid the unlikely event of a blind man's confusion in the unlikely event that he is visiting my site and his screen reader is choking... I don't think so.

Sorry for the rant fellas, but I see too much of the zealotism these days and it is getting to me. There are people who refuse to help others just because their code isn't valid... Which is terrible.

Graft-Creative
08-17-2005, 12:19 AM
Sorry for the rant fellas, but I see too much of the zealotism these days and it is getting to me. There are people who refuse to help others just because their code isn't valid... Which is terrible.

Quite. Yes there are zealots out there who delight in nothing more than, well, just being right!

However, it wouldn't be fair to cast Richard (and others) in that mould.
All that's being suggested is a pragmatic and common sense way of using the img tag.

This is exactly the tack I now take: if it's decorative - put it as a BG image, if it's content then code it inline, with the img tag.

For headers I would usually use a BG image for the decorative touches, but then an inline img tag for the clickable company logo.

It's no big deal, and it should definately not turn into an argument.

I would say though, that < a > is THE most important html element, so whatever you can do to keep it 'un-fuzzy' is all good :thumbsup:

Gary

Tristan Gray
08-17-2005, 01:16 PM
Indeed, I don't think there is really a dispute going on here. Just more objectless frustration. They need to add image resizing to CSS backgrounds. That would be helpful.

bazz
08-17-2005, 05:38 PM
That's the point. Use <img> if an image IS the content. If the image is just making the content look pretty, don't.



Now thats the sort of simplicity I need :)

Great, concise answer rmedek.

Bazz

Tristan Gray
08-17-2005, 05:40 PM
Yeah, but once again there are certain things you cannot do with a background image like resize it. So if you want fluidity sometimes you are forced to use a 'pretty' image as if it were content.

wynart
08-17-2005, 08:57 PM
Wouldn't he be able to use his class and then apply it to the link? <a class="blah" href="#blah"> blah </a>?

rmedek
08-18-2005, 08:19 AM
Now thats the sort of simplicity I need :)

Great, concise answer rmedek.

Bazz
Heh... I was complimented on my extra lengthy reply earlier and my concise reply now. I've got ALL bases covered, folks... :D:D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum