Wed, 2004-08-11 06:30
I was wondering this can be done, totally inside of the CSS. Here is the example.
#ldhePicture2 {position: absolute; left:750px; top:50px; width:116px; height:238px; background: transparent url(/files/main1_picture2.gif) no-repeat; }
<DIV ID="ldhePicture2">
</DIV>
#ldhePicture2 in this example is a banner that I would like to link to another webpage. As you can see, all of the properties of the banner are in the CSS, I just can't figure out how to link the image in the CSS. Is there a way this can be done? Thanks in advance.
Wed, 2004-08-11 08:27
#1
Image link inside of an external CSS?
You can't have the link inside the CSS as far as I know, it would need to be in HTML inside the DIV, then in the CSS you could apply your height/width/background to the link rather than the div.
Something like
div.link a:link
{
position: absolute;
display: block;
left:750px;
top:50px;
width:116px;
height:238px;
background: red;
}
and
<div class="link"><a href="http://www.hat.com"></a></div>
Although this is probably not really a good idea to have to text in the link at all as it makes it meaningless to people who can't see the image for what ever reason.
Wed, 2004-08-11 12:27
#2
Image link inside of an external CSS?
Yes it is possible to link a background image to an external file using css.
#ldhePicture2 {position: absolute; left:750px; top:50px; width:116px; height:238px; background: transparent url(http://www.website.com/files/main1_picture2.gif) no-repeat; }
<div id="ldhePicture2"></div>
Wed, 2004-08-11 15:16
#3
Image link inside of an external CSS?
Stu wrote:
Yes it is possible to link a background image to an external file using css.
#ldhePicture2 {position: absolute; left:750px; top:50px; width:116px; height:238px; background: transparent url(http://www.website.com/files/main1_picture2.gif) no-repeat; }
<div id="ldhePicture2"></div>
Thx for the response Stu.(http://www.website.com/files/main1_picture2.gif) selects the image, in this case an ad, to be placed on the page. Now I want to link the image to another webpage. Will your suggestion work for this, or do I need a seperate line of code in the CSS?
Wed, 2004-08-11 16:40
#4
Image link inside of an external CSS?
Change the div to a link.
<a id="ldhePicture2" href="page.html" title="xyz"><span>text alternative</span></a>
then add to the css
#ldhePicture2 span {display:none;}
This will remove the alternative text from your display (but print it in text only browsers).
Wed, 2004-08-11 18:16
#5
Image link inside of an external CSS?
Stu wrote:
Change the div to a link.
<a id="ldhePicture2" href="page.html" title="xyz"><span>text alternative</span></a>
then add to the css
#ldhePicture2 span {display:none;}
This will remove the alternative text from your display (but print it in text only browsers).
So, place this<a id="ldhePicture2" href="page.html" title="xyz"><span>text alternative</span></a> inside of the original <div> tag, and this #ldhePicture2 span {display:none;} to the CSS without changing anything else, right?
As you can tell, I am securely fastened to the CSS learning curve.
Wed, 2004-08-11 18:16
#6
Image link inside of an external CSS?
I can't get Stu's idea to work...bummer
llcross...
What I have done in the past is create a transparent gif the same size as the div and then include it in the html
<!-- begin header -->
<div id="#ldhePicture2"><a href="mypage.html"><img src="includes/trans_bg.gif" width="700" height="70" alt="Text Here" /></a>
</div><!--end header-->
Wed, 2004-08-11 18:25
#7
Image link inside of an external CSS?
Should work
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> link pic </title>
<style type="text/css">
#ldhePicture2 {position: absolute; left:200px; top:50px; width:265px; height:140px; background: transparent url(http://www.stunicholls.myby.co.uk/img/l_head.gif) no-repeat;}
#ldhePicture2 span {display:none;}
</style>
</head>
<body>
<a id="ldhePicture2" href="http://www.s7u.co.uk" title="My web site"><span>text alternative</span></a>
</body>
</html>
link to demo
Thu, 2004-08-12 08:27
#8
Image link inside of an external CSS?
When I said
Quote:
clearly I did not mean you can't link to an external image, I meant the Link to the external site, hence I said the HTML should be changed to include the <a> tags.. I really must be more clear :oops:
You can't have the link inside the CSS
However, Stu writes
Quote:
#ldhePicture2 span {display:none;}
This will remove the alternative text from your display (but print it in text only browsers).
I was thining about this, and i'm not sure this is such a good idea, sure if I have a text only browser that is not using the same CSS i'll see the link, but what if I happen to browse on a normal browser with images turned off, i'll get nothing at all. As it's a background image i'll also see no alt text.
Further as this is a image that transfers information it really should be in the HTML and properly described. There are plenty of people who can't see images but still use non text only browsers, and these people will not be fully catered for.
Thu, 2004-08-12 13:44
#9
Image link inside of an external CSS?
Based upon the ALA article, (see it here) the method posted by stu is not screen-reader friendly.
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> link pic </title>
<style type="text/css">
#ldhePicture2 {
position: absolute;
left:200px;
top:50px;
width:265px;
height:140px;
background: transparent url(http://www.stunicholls.myby.co.uk/img/l_head.gif) no-repeat;
text-indent:-50em;
}
</style>
</head>
<body>
<a id="ldhePicture2" href="http://www.s7u.co.uk" title="My web site">text alternative</a>
</body>
</html>
Also removes the need for the extra span element in the html, which is always nice.
As for the people with images turned off, it will support text-only browsers, and the blind, but not those people with a conventional browser with images switched off.
Thu, 2004-08-12 14:40
#10
Image link inside of an external CSS?
Surely the screen reader will read out the link title?
Thu, 2004-08-12 14:50
#11
Image link inside of an external CSS?
Ho hum, uh, um, well, er, maybe :oops: Of course that article is on fahrner image replacement <b>in general</b>, I'm not sure about links. (makes mental note to think before speaking next time). Um, I'll give it a go in IBM homepage reader tonight, if my trial period hasn't expired.
Then again the advantage of having no aditional element makes me prefer the ALA method, the span in the <a> tag just looks a bit messy to me.
As for users with image turned off, neither method addresses them, but how about a background change on hover (so they get coloured squares to at least indicate the links) and use the title to give a "mystery meat" type navigation (which is better than nothing).
Briski, the chief reason for using image replacement on a link is for SEO purposes, a text link is much more powerful to google than an image link with an alt attribute. Same goes for using it on <h1>'s and <h2>'s, because they help SEO and also add semanticity to the page.
Thu, 2004-08-12 15:03
#12
Image link inside of an external CSS?
This is altogether not a satisfactory method of linking but it does serve the purpose of answering the original question.
No doubt when the <object> tag is correctly implemented then this could be used within the link instead, and it would then offer alternative text etc.
Tue, 2004-08-17 11:00
#13
Image link inside of an external CSS?
There is a better way to add image replacement text that does not need a span or a negative indent.
If you use a top padding to the link which is the same height as the background image and then specify a height of zero and overflow:hidden the text will not show but the image will.
For example~
<!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>
<title> link pic </title>
<style type="text/css">
#linkpic {position: absolute; left:200px; top:50px; width:265px; padding:130px 0 0 0; height:0; overflow:hidden; background: transparent url(http://www.stunicholls.myby.co.uk/img/l_head.gif) no-repeat;}
</style>
</head>
<body>
<a id="linkpic" href="http://www.s7u.co.uk" title="My web site">text alternative</a>
</body>
</html>
Thu, 2007-12-27 22:53
#14
Thanks Stu!
Thanks Stu! I was looking for an answer to my question on this and finally found one!!! :thumbsup:
Wed, 2008-04-16 22:58
#15
magnificent, thanks!
Just wanted to chime in, thanks Stu! This is exactly what I was trying to do. Great forum!