IE6 and IE7 both experience a problem in which images inside of block elements inside of anchors lose their click ability. Here’s an example:
<a href="rss-icon.png"> <span style="display:block; width:100px; height:100px;"> <img src="someImage.png" /> </span> </a>
Every area of the link remains click-able except for the surface consumed by someImage.png. (Note, this problem will not show in IE8, or FF)
Here’s a very small jQuery plugin I wrote to fix this particular issue.
(function($){ $.fn.fixClick = function() { return this.each(function(){ $(this) .css({cursor:'pointer'}) .click(function(){ window.location.href = $(this).attr('href'); }); }); } })(jQuery);
Simply select your target element(s) and use this plugin to make the entire anchor click-able again. Here’s an example:
$(document).ready(function(){ $('a').fixClick(); });
This entry was posted on Friday, September 25th, 2009 at 11:45 am and is filed under JavaScript, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Interesting solution, although I can’t help but ask… why not either append the click function to the anchor directly, or do away with the span? It seems to me that the entire premise of this code snippet is based upon a misunderstanding of html structure. Performing this function on every anchor on the page seems like a waste of resources.
Also, please change the font color in these boxes, for it is the same color as the background and it is very hard to type.
In truth, I would not use the function on every anchor, like in the usage sample. I would instead only use it as needed. This solution came about from a real-world problem that I stumbled upon at work. Also, sorry about the font color.
I’m switching to my own custom theme soon.
*Edit*
Fixed the font color.
[...] This post was mentioned on Twitter by Programming Joy. Programming Joy said: IE6 / IE7 jQuery Fix: Anchor Image Clickable Area #programming http://bit.ly/2KNg7Q [...]
hey do you happen to have this code in prototype?