Forum Moderators: phranque

Message Too Old, No Replies

linking background images

ideal way to link background images

         

ganeshgrowth

7:18 am on Aug 3, 2009 (gmt 0)

10+ Year Member



what is/are the ideal way/s to add hyperlink/s from a background image?

bill

7:34 am on Aug 3, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



A background image where?

dreamcatcher

7:35 am on Aug 3, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi ganeshgrowth,

Its not possible to hyperlink background images. If you had a background image in say, a div, you could add an onclick event. Can`t think of anything else.

dc

ganeshgrowth

8:22 am on Aug 3, 2009 (gmt 0)

10+ Year Member



I've a talktome button with-in my webpage background theme which I want to be linked to my talktome utility. Can I use a transparent gif over the talktome button? would it be appropriate?

bill

8:57 am on Aug 3, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yes, a GIF or DIV positioned over a background image would work.

ganeshgrowth

9:03 am on Aug 3, 2009 (gmt 0)

10+ Year Member



which one is ideal from w3c AAA perspective? using a gif or using a div?

ganeshgrowth

10:52 am on Aug 3, 2009 (gmt 0)

10+ Year Member



I have added a link to the tool using a h3 <a href="talktome.php"><h3 style="visibility:hidden;width: 110px; height: 60px;">Engagement Ring</h3></a>

Is this practice correct? and as per w3c guidelines?

ganeshgrowth

10:53 am on Aug 3, 2009 (gmt 0)

10+ Year Member



correction <a href="talktome.php"><h3 style="visibility:hidden;width: 110px; height: 60px;">Talk to me</h3></a>

bill

4:56 am on Aug 4, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



That's neither a GIF nor a div.
If it works in your layout then run any code through the W3C Markup Validation Service [validator.w3.org] to see if there are any errors. After that you'd want to run it through all the major browsers to make sure it displays/functions properly.

ganeshgrowth

9:22 am on Aug 21, 2009 (gmt 0)

10+ Year Member



correction <a href="talktome.php"><h3 style="visibility:hidden;width: 110px; height: 60px;">Talk to me</h3></a>

Again from google.com's point of view would hiding "Talk to me" within the <h3> tag be considered bad? The image in the background represents a lady with Head Phone and is a Call Center Representative.

phranque

10:14 am on Aug 21, 2009 (gmt 0)

WebmasterWorld Administrator 10+ Year Member Top Contributors Of The Month



while not specific to A elements, this WebmasterWorld thread discusses many of the issues regarding your solution:
accessibility and <h1> header images [webmasterworld.com]

JS_Harris

11:35 am on Aug 24, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The ideal way is to create the image you want clickable and position it wherever you want it to be OVER the background with .css. Add your link to the image along with a nice alt tag, perhaps add more css to get rid of the link border and you're set.

If different browser resolutions make a mess of your page appearance you can also try absolute positioning instead of the traditional padding and spacing etc, depending on where you need the link to be.