Unwanted Border Around The Image Map Area
I am using an Image map with a circular area. The problem is I get an unwanted border around the area in IE7. This border doesn't appear in FF and Chrome and also in IE8/IE9. I tri
Solution 1:
img{border:none;}
and this is the fix for ie versions
<!--[if lte IE6]>
<scripttype="text/javascript">functioncorrectPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""var imgClass = (img.className) ? "class='" + img.className + "' " : ""var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "var imgStyle = "display:inline-block;" + img.style.cssTextif (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
try this hope it helps !!!
Solution 2:
This is the solution:
onclick="blur()"onfocus="navigator.appName == 'Microsoft Internet Explorer' ? blur() : null"Solution 3:
You could use conditional comments (more info here) + jQuery.
HTML:
<!--
"old-ie" targets IE7 or less
"ie8" targets IE8
"ie" targets IE8+
--><!--[if lt IE 8]> <html lang="en" class="old-ie"> <![endif]--><!--[if IE 8]> <html lang="en" class="ie ie8"> <![endif]--><!--[if gt IE 8]> <html lang="en" class="ie"> <![endif]--><!--[if !IE]><!--><htmllang="en"><!--<![endif]--><head>
...
</head><body><ahref="#link"><imgsrc="/img/image.jpg" /></a></body></html>jQuery:
// we first check if current browser is IE7 or older, than apply our "hack"if (jQuery('html').is('.old-ie') === true) {
jQuery('a').focus(function() { jQuery(this).blur(); });
}
Solution 4:
Well found a way to solve this issue...which is probably not a good way to go for. By using js browser detection we can apply the IE fix as follows which will not cause problems to other browsers(FF in my case)
if (navigator.userAgent.toLowerCase().indexOf('msie') != -1) {
document.getElementsByTagName('area')[0].onfocus = function () {this.blur();};
}
Well please, if anyone finds a better solution then do post here. Thanks.
Post a Comment for "Unwanted Border Around The Image Map Area"