Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Lightbulb Image as a link using css

    Here's the code I'm looking at:

    Code:
    #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?

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #3
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The advantage to using a background image is to keep your HTML semantic... usually in conjunction with some sort of image-replacement technique:

    Code:
    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:
    Code:
    <a href="/gallery.php"><img src="thumbnail.jpg" alt="small photo of a widget" width="50" height="50" /></a>

  • #5
    New Coder
    Join Date
    May 2005
    Posts
    63
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up

    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.

  • #6
    Regular Coder meth's Avatar
    Join Date
    Jan 2003
    Posts
    262
    Thanks
    0
    Thanked 9 Times in 9 Posts
    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:

    Code:
    <!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>
    I do Web Design, Brisbane based.
    More time spent in PHP/MySQL Web Development.
    And Search Engine Optimisation takes up the rest of it.

  • #7
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    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

  • #8
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #9
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Graft-Creative
    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.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #10
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Graft-Creative
    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.

  • #11
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by Tristan Gray
    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.

  • #13
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #14
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Tristan Gray
    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

    Gary

  • #15
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •