There’s really no way to put a link around a bunch of block level elements, is there?
To achieve something like:
<div>
<a href=”#”>
<h2>poop</h2>
<h3>poop</h3>
<h4>poop</h4>
</a>
</div>
You need to write:
<div>
<h2><a href=”#”>poop</a></h2>
<h3><a href=”#”>poop</a></h3>
<h4><a href=”#”>poop</a></h4>
</div>
Which is fine, except when you want to treat that entire div as it’s own link.
Sure, you can give the illusion that all of your block level elements share a single link with some simple css:
div:hover h2 a,div:hover h3 a, div:hover h4 a {color:#000;}
Get it? When you hover over the div, all of it’s contained block level elements will appear to be in a hover state as well. This of course creates new problems, the biggest being, the space around your headings appears to be clickable, when it’s not.
Is there a better way to accomplish this?
upate:
The method mentioned above is currently in use on the right side of emerica’s home page. The :hover pseudo selector in Internet Explorer is only supported on anchor tags, so the method doesn’t work for the majority of users.
joe d #
How about you use Flash? Or dreamweaver’s image map automation.
Bill #
hehe, dreamweavers img map, I like that! Flash of course would be nice too.