Jump to content
Killersites Community
Ant

make an image linkable in css

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×