Ant Posted January 6, 2012 Report Share Posted January 6, 2012 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. Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 6, 2012 Report Share Posted January 6, 2012 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. Quote Link to comment Share on other sites More sharing options...
Les Posted January 6, 2012 Report Share Posted January 6, 2012 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 Quote Link to comment Share on other sites More sharing options...
Ant Posted January 6, 2012 Author Report Share Posted January 6, 2012 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. Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted January 6, 2012 Report Share Posted January 6, 2012 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; Quote Link to comment Share on other sites More sharing options...
Ant Posted January 6, 2012 Author Report Share Posted January 6, 2012 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 Quote Link to comment Share on other sites More sharing options...
Andrea Posted January 7, 2012 Report Share Posted January 7, 2012 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? Quote Link to comment Share on other sites More sharing options...
virtual Posted January 7, 2012 Report Share Posted January 7, 2012 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. Quote Link to comment Share on other sites More sharing options...
shelfimage Posted January 7, 2012 Report Share Posted January 7, 2012 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> Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 7, 2012 Report Share Posted January 7, 2012 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. Quote Link to comment Share on other sites More sharing options...
Ant Posted January 9, 2012 Author Report Share Posted January 9, 2012 Thanks for the additional help guys. I'll look at the code posted and see if I can implement it. A. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.