Setting a Background Image Over an Image - And Making Both Clickable

kraftomatic

08-23-2010, 04:00 PM

Hey All,

I've got a list of images that I want to apply a background image over the top of. It would just be over the top left corner of the image. The trick is I want the entire area of the main image to remain clickable. Here's the CSS I have:

.new {
background: url(new_icon.gif) no-repeat top left transparent;
width: 65px;
height: 65px;
position: absolute;
display: block;
}

And here is the HTML:

<a href="" title="">
<span class="new"></span>
<img src="image.jpg" width="142" height="142" alt="" />
</a>

I can get the image to display properly, but I cannot get the entire area to act as clickable. Any ideas on what I might be missing?

Any suggestions would be appreciated.

Thanks.

coothead

08-23-2010, 04:52 PM

Hi there kraftomatic,

this appears, to me, to be the simplest method...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#mylink {
display:block;
width:142px;
height:142px;
background-image:url(image.jpg);
}
#mylink img {
display:block;
width:65px;
height:65px;
border:0;
}
</style>

</head>
<body>

<div>
<a id="mylink" href="#" title="">
<img src="new_icon.gif" alt="">
</a>
</div>

</body>
</html>

coothead

kraftomatic

08-23-2010, 05:36 PM

That would work Coot, thanks. Although I have various images, so I wouldn't want to put the main image in the background of the CSS.

I can keep the overlaying image in the CSS, as that will never change.

Thanks.

coothead

08-23-2010, 06:10 PM

Hi there kraftomatic,

if you want me to use your code, then the code would look like this...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#mylink {
position:relative;
display:block;
width:142px;
height:142px;
}
#mylink img {
position:relative;
top:-65px;
border:0;
}
.new {
position:relative;
z-index:1;
display:block;
width:65px;
height:65px;
background-image:url(new_icon.gif);
}
</style>

</head>
<body>

<div>
<a id="mylink" href="#" title="two images in one link">
<span class="new"></span>
<img src="image.jpg" width="142" height="142" alt="">
</a>
</div>

</body>
</html>

coothead