[SOLVED] Background Image Link?

[greenday]

Hi, I have completed quite a large site where the H2 tags all have an arrow image next to them, set as a background image of H2 in the css file.

 

Some feed back from the site has said people are trying to click on the arrow, but of course, as a background image, it cant be clicked. Is there any way to include the bg image in the clickable area without having to code the image in on each instance of the H2?

 

CSS:

 

.insert h2 {
background:transparent url(img/green_arrow.gif) no-repeat top left;
color:#2D6EBC;
margin:0 0 10px 0;
padding:0 0 0 37px;
font-size:17px;
font-weight:bold;
font-family: arial, Verdana, times;
height:24px;
}

 

HTML:

 

<h2><a href="/about">About</a></h2>

 

Thanks.

[SuperBlue]

Hmm you could include the image inside the a tags, just before the text. Ofcause you would need to render the image as "Display:inline;"... Im shure its duable like that, i've never tryed it though.

 

 

<a href="http://?"><img src="fav.png" style="display:inline;border:0;" alt="NavItem Image">blah</a>

 

 

[phpQuestioner]

add a onclick event to the <h2> tag

[greenday]

phpQuestioner - thanks, I am not familiar with that technique, could you explaine a little please? thanks.

[bronzemonkey]

1) Make the link a block level element that fully encompasses the h2 element. Shift the left-padding from the h2 to the anchor. This way the link text is still not covering the background image but the link is spread over an area that includes the background image in the h2 element.

 

2) Either use the background image on the h2 element (make sure you have background:transparent on the anchor); or use the background image on the anchor within an h2 element.

[SuperBlue]

Actulley that made more sense, bronzemonkey's suggestion is much better, i however find it strange to see a link inside a headline tag.  ???

 

Actulley i was thinking of adding a list-style-image to my menus, i asume the same techenique works for LI elements. Maybe i would even be able to create a hover effect, defentley something worth considering.

 

If you dident understand the technical part, i belive what bronzemonkey suggest, is making the link itself a block level element by applying "display:block;" on it, as well as "Width:100%;", then finally adding "padding-left:34px" on the link, will push the text away from the BG. Remember to remove the padding from the h2 element, since its moved over to the a element (the link itself).

 

[greenday]

Thanks all for your help, its been very usefull. However I have encountered another problem -  not all the <h2>'s are links, so this makes those as links correct, but those that arent have 0 left padding, which causes the text to run over the image.  Can anyone help on this last matter? Thanks.

[phpQuestioner]

phpQuestioner - thanks, I am not familiar with that technique, could you explaine a little please? thanks.

 

do it like this:

 

<h2 style="display:block;height:75px;width:300px" onclick="document.location.href='about.html'; return true">Hello World!</h2>

[bronzemonkey]

Thanks all for your help, its been very usefull. However I have encountered another problem -  not all the <h2>'s are links, so this makes those as links correct, but those that arent have 0 left padding, which causes the text to run over the image.  Can anyone help on this last matter? Thanks.

 

You said yourself that people are trying to click on the image. Are you sure that users aren't going to be thinking that your image indicates a link where there is none? If you want to keep the image for non-linked h2 elements then you have a couple of options:

 

1) Create a new class to be use to give left-padding only to h2 elements that do not contain links

 

2) Put the left-padding back on all the h2 elements and use a negative margin to pull the left-padded link over the left-padding of the h2 element (so that the left-paddings overlap each other). This would avoid you having to create a new class and alter your html but you will have to be a little careful in doing it.

 

And if you consider using javascript it is recommended that, as with CSS, you don't use it inline but instead separate it from the html and use DOM Scripting to target specific parts of the document.

[greenday]

bronzemonkey - thanks for reinforcing the idea of the image indicating a link, whilst doing this it also crossed my mind. At first all the H2's were links, but as the site progressed it changed, you know how it is. So I will consider what to do here.

 

Also, I have gone for the negative margin as suggested for the momment, and this has worked just as I need.

 

Thanks all for your help.

 

Here is the finall code I have used:

 

HTML:
<h2><a href="/about">About</a></h2>

CSS:
.insert h2 {
background:transparent url(img/green_arrow.gif) no-repeat top left;
color:#2D6EBC;
margin:0 0 10px 0;
padding:0 0 0 37px;
font-size:17px;
font-weight:bold;
font-family: arial, Verdana, times;
height:24px;
}

h2 a:link, h2 a:visited {
color:#2D6EBC;
display:block;
width:100%;
padding-left:37px;
margin-left:-37px;
}

[phpQuestioner]

And if you consider using javascript it is recommended that, as with CSS, you don't use it inline but instead separate it from the html and use DOM Scripting to target specific parts of the document.

 

you can; but you don't have to. my example was for a quick demonstration; you can choose to create a internal/external function if you would like to.

[SuperBlue]

Actuelly in the mean time i began work on a new GuestBook script, and i toke advantage of a similier technique.

 

Im using not 1, but whole 2 animated background-images with a hover effect. An example can be seen on http://www.brugbart.dk/LBD_GuestBook/Index.php

 

Here is the CSS i used, if interested.

a { margin: 0;color: #3451a4; }
a:hover { color: #ff0000; }
ul a { display: block;text-decoration: none;border-bottom:1px dashed #519392;background: url("../../../LBD_pictures/GuestBook/List-Style-Image.png") no-repeat 0 0.5em; }
ul a:hover { background: url("../../../LBD_pictures/GuestBook/List-Style-ImageHover.gif") no-repeat 0 0.5em;}


ul li { background: url("../../../LBD_pictures/GuestBook/List-Style-ImageR.png") no-repeat 100% 0.5em;color: #3451a4; }
ul li:hover { background: #a0dcdb url("../../../LBD_pictures/GuestBook/List-Style-ImageHoverR.gif") no-repeat 100% 0.5em; }