IE6 / IE7 jQuery Fix: Anchor Image Clickable Area
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(); });
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.
hey do you happen to have this code in prototype?