make an image linkable in css

[Ant]

For some reason I cant figure out the best way to do this.When I did this in my first site I used dreamweavers hot spot tool. Thus I do not know how to do it using css.

 

So how do I add a link to a layered image. I want to basically use the image as say a link to get to the contact us page etc.

 

I have the following example code:

 

#floating_contact_image{background: url(http://www.url.com/images/contact.png) no-repeat;

z-index:2;

width:90px;

height: 90px;

position:absolute;

top:0px;

right:0px;

}

 

Thanks

A.

[Andrea]

You cannot turn background images into links. If you want the image to be a link, it needs to go into the html part.

 

Not sure how Dreamweaver did it, but I'm guessing it turned the area above the image into a link, not really the image itself.

[Les]

You cannot turn background images into links. If you want the image to be a link, it needs to go into the html part.

 

Not sure how Dreamweaver did it, but I'm guessing it turned the area above the image into a link, not really the image itself.

 

If you put a background image 90 pix 90 pix on top of the original BG image 90 pix 90 pix(Layer ?) It is then linkable, or it was some years ago not in CSS, when on a forum it stated background images are not LINKABLE, I proved it could, cheating i know

 

hi Andrea, Its Les here 'The Brit' Hope you are well ?

 

 

Cheers

 

 

Les

[Ant]

Thank Andrea.

 

Ok, so I was able to make it linkable by adding the image and the url link in the html AND removing the "background: url" from the css. ( I assume using the "background: url" is valid for placing images with css??)

 

HOWEVER that means I cannot control the image/url link using CSS, is that correct?

 

So I can adjust the position etc of the div to control the image and the link in the css but if i want to edit the link or the image I have to change it in the html?

 

A.

[benjaminmorgan]

You could leave the background in the CSS and just add a link in the html in that div or whatever and make it the same size as the div displayed block;

[Ant]

Benjamin I tried to add a link in the html by itself inside the div and thought I needed to use" " as the text to be linked but I don't think that worked. I lost you on the "block" comment. I am still new, stumbling through css etc so I don't remember how I would use it (block) in this situation.

 

So it was something like this:

 

 

#floating_contact_image{background: url(http://www.url.com/images/contact.png) no-repeat;

z-index:2;

width:90px;

height: 90px;

position:absolute;

top:0px;

right:0px;

}

 

 

 

<div id=floating_contact_image><a href="http://www.contact_us.com"> </a> </div>

 

 

 

Ant

[Andrea]

hi Andrea, Its Les here 'The Brit' Hope you are well ?

 

 

Cheers

 

 

Les

Hey, Les, I think I vaguely remember you from my early Killersites' days. How long has it been?

[virtual]

I'm not sure what you are trying to achieve, but if this is a navigational menu you should be targeting the a tags which can use background images and change them on hover/focus state. Do you have a link? it would be more helpful.

 

Dreamweaver writes awful code, I would only use it as a glorified text editor, FTP program, snippet storage. Don't rely on it to write your code for you, that is not a good way to learn.

[shelfimage]

You can use less code. If the link needs the background, apply the background to the link without using an extra div. Since the link, which is usually an inline element, has absolute positioning, the element becomes a block level element. So - display:block - is not needed.

 

#floating_contact_image{

background: url(http://www.url.com/images/contact.png) no-repeat;

z-index:2;

width:90px;

height: 90px;

position:absolute;

top:0;

right:0;

}

 

<a id="floating_contact_image" href="http://www.contact_us.com"></a>

[Wickham]

If you are using an image or background-image for a link without link text, you need to add link text so that a screen reader can read it out to a blind person who cannot see the image link. You then code the link text as display: block; margin-left: -9999px; so that it doesn't show on the screen, but a screen reader will still read it even if it's oustside the screen window.

CSS

#floating_contact_image{background: url(http://www.url.com/images/contact.png) no-repeat;
z-index:2;
width:90px;
height: 90px;
position:absolute;
top:0px;
right:0px;
}
#floating_contact_image span { display: block; margin-left: -9999px; }

HTML

<a id="floating_contact_image" 
href="link1.html"><span>Link 1</span></a>

The "a" tag could be inside a p tag or a div, or just by itself. I've tested the above with one of my images.

[Ant]

Thanks for the additional help guys.

 

I'll look at the code posted and see if I can implement it.

 

A.