15 replies [Last post]
llcross
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2004-08-11
Posts: 4
Points: 0

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.

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 4 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

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.

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

llcross
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2004-08-11
Posts: 4
Points: 0

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?

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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).

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

llcross
Offline
newbie
Last seen: 15 years 48 weeks ago
Joined: 2004-08-11
Posts: 4
Points: 0

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.

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 1 year 39 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

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-->

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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

http://www.stunicholls.myby.co.uk/cssforum/linkpic.html

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 4 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Image link inside of an external CSS?

When I said

Quote:
You can't have the link inside the CSS
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:

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.

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 8 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

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.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Image link inside of an external CSS?

Surely the screen reader will read out the link title?

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

rtm223
rtm223's picture
Offline
Enthusiast
Last seen: 16 years 8 weeks ago
Joined: 2004-05-18
Posts: 58
Points: 0

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.

css layout tutorials - in depth layout tutorials for all you newbies D maybe even some stuff for you not-so-new-bies out there P

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 24 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

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>

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

maryjane9110024
maryjane9110024's picture
Offline
Regular
Phoenix, AZ
Last seen: 11 years 42 weeks ago
Phoenix, AZ
Timezone: GMT-7
Joined: 2007-12-27
Posts: 35
Points: 0

Thanks Stu!

Thanks Stu! I was looking for an answer to my question on this and finally found one!!! :thumbsup:

scooby
Offline
newbie
Last seen: 12 years 12 weeks ago
Timezone: GMT-10
Joined: 2008-04-07
Posts: 3
Points: 0

magnificent, thanks!

Just wanted to chime in, thanks Stu! This is exactly what I was trying to do. Great forum!