Text Link is Hiding my Image Link - html

Question

I have a image where text/link is overlayed on top. My problem is that sometimes the text in the foreground will hide the link in the image in the background. I assume this is because the text box forms an invisible rectangle around the text, thus creating a region that appears it should belong to the image but is actually being covered by the text. I am wondering if it is possible that when I mouse over this region, I will be linking to my image link as oppose to my text link (see illustration).
http://jsfiddle.net/WHpMr/

Answer 1

Try this, i.e. put your tag inside : http://jsfiddle.net/WHpMr/3/
HTML:
<div class="ad">
<span class="link middle right">my text link abcdefg<br>meow<br>meow<br>meow</span>
<img src="http://www.placekitten.com/320/200">
</div>
CSS:
.ad {
position: relative;
height: 200px;
width: 320px;
}
.link {
position: absolute;
padding: 20px;
pointer-events: none;
}
.inline-link {
pointer-events: all;
}
.top { top:0%; }
.middle { top:33%; }
.bottom { top:66%; }
.left { text-align:left; left:0%; }
.center { text-align:center; margin:0 auto; width:100%; }
.right { text-align:right; right:0%; }

Answer 2

You are correct in thinking that. The element will create a block containing the content. You could use the Map Element if you are hell bent on doing that.

Answer 3

If you make each line its own link, that will minimize the problem. If you really want to go all out, you can make each word its own link. But you're getting into stuff that's easier to do with some JS automation instead of manually in the HTML.
EDIT: Here's an attempt at a vanilla JS solution that works for your simple example, at least:
http://jsfiddle.net/aLN2d/35/