StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you don't mind your hover area being "square" then using pure css this should work (note, replace the background colors with your appropriate image and the <code>border</code> on the <code>a</code> is just for illustration). Tested in Firefox, IE7, IE8:</p> <p>HTML:</p> <pre><code><a href="#"><span class="img"></span></a> </code></pre> <p>CSS <strong>(EDITED FOR IE7-8 BUGS)</strong>:</p> <pre><code>body { margin: 300px 218px 178px 400px; /*see explanation below css*/ width: 22px; /*total width of a tag including padding and borders*/ height: 22px; /*total height of a tag including padding and borders*/ } a { /*warning, do not give this position: use margin to position it*/ width: 20px; height: 20px; display: block; border: 1px solid red; overflow: visible; /*deleted margin from this: moved to body*/ } a span.img { position: absolute; /*this gives it block display by default*/ top: 0; left: 0; z-index: -1; background-color: yellow; /*bw image here*/ width: 640px; /*image width*/ height: 500px; /*image height*/ } a:hover span.img { background-color: blue; /*color image here*/ } /*deleted the a:hover span.img:hover as it was not needed after all*/ </code></pre> <p>Of course if IE6 is a concern, then you need to do something with javascript for it to recognize the <code>span:hover</code>.</p> <p><strong>ADDED ON EDIT:</strong> I discovered that the <code>a</code> tag would hover sometimes outside of the defined area for the IE browsers. To avoid that, the body must have margins placed on such that the <code>left</code> and <code>top</code> position the <code>a</code> tag, and the <code>right</code> and <code>bottom</code> must <em>make up the difference</em> in the image size minus the total width of the <code>a</code> tag. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload