hyperlink a div

[neilkw]

Hi

Any pointers on assigning a hyperlink to a div layer? Basically I have a square div with a embedded background pic which I want to to clickable.

thanks in advance.

[djr33]

Does the image really need to be the background? That seems weird.... you could just put the image IN the div and be done with it.

Just tried this; it works. Note that it does require javascript, though. Don't think there's another way.
<div onClick="document.location='yoururl';"></div>

[neilkw]

ok, cheers. Maybe best to work round the js and insert the image.
thanks again

[djr33]

Yeah.... if there's no need for the image to be background (like having text over it, etc.), then that would be the best, most compatible option, as well as being easy.

[Twey]

document.location?
I think you mean window.location.href.

Anyway... you can't put a DIV inside an A, because A is an inline element while DIV is a block-level element. djr33's solution, while a tad off on the specifics, is the right idea.

[jscheuer1]

<div><a href="whatever.htm">link text</a></div>

That's the right way to do it but, of course only the link text will be active as a link.

If you give the div a set width and height in its style and set the the a tag's style to width:100%;height:100%;display:block; things should work out pretty well, some tweaking of the style may be required to align the link text (if any, a nonbreaking space - &nbsp; - should at least be used) as desired.

If you were to give a concrete example, I could work out the details. The division tag may not be required at all.

[djr33]

The document.location worked just fine.
If window.location.href is better, by all means use that.

(Why does document.location work, then? 'cause it worked in a couple browsers, I think... didn't fail in any that I tested... can't remember which I used to test, though.)

[Twey]

(Why does document.location work, then? 'cause it worked in a couple browsers, I think... didn't fail in any that I tested... can't remember which I used to test, though.)Don't know... I'd never heard of it :) After some testing, though, it seems that document.location is always exactly the same as window.location. While you should still be using document.location.href, then, I guess there's no harm.

[jscheuer1]

Don't know... I'd never heard of it :) After some testing, though, it seems that document.location is always exactly the same as window.location. While you should still be using document.location.href, then, I guess there's no harm.

This is the HTML forum, anything.location is not a solution to this problem.

[djr33]

But your method creates an annoying character filling the div. What if he needs content to be inside the div?

I agree it's better to use a non-JS solution, but since there is no default way to link a div, I think JS is better than faking a filled div, because that would just mean you could put the image in it, not as a background, and there must be some reason he's not doing this in the first place.

[neilkw]

wow, this certainly expanded somewhat.

To be honest, the issue was raised with an element of my personal curiosity around the div tag and integrating it with some html and also looking at integrating rollover styles on a div border.
I was and am keen to avoid js and will be dropping the image directly into the div rather than using a background image and then trying to make the div itself a link.

[jscheuer1]

wow, this certainly expanded somewhat.

To be honest, the issue was raised with an element of my personal curiosity around the div tag and integrating it with some html and also looking at integrating rollover styles on a div border.
I was and am keen to avoid js and will be dropping the image directly into the div rather than using a background image and then trying to make the div itself a link.

If you have a rollover, you are not avoiding js unless it is a hover pseudo class rollover. In IE6 and below (IE7 isn't official yet so I will not comment on it here) these css rollovers can only be on links. So, best to avoid the division altogether and set the style for the link as display:block. It will then act like a division for layout purposes and accept the hover pseudo class as well:


<a class="blockLink" href="whatever.htm"><img src="some.gif" border="0"></a>

Then in your stylesheet you could have something like:


.blockLink {
display:block;
border:1px solid blue;
}

.blockLink:hover {
border:1px solid red;
}