Jump to content

make an image linkable in css


Ant

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.

Link to comment
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.

Link to comment
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

Link to comment
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.

Link to comment
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

Link to comment
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.

Link to comment
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>

Link to comment
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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...