ARTICLE AD BOX
First of all I produced a simple html file with image mapping:
<!doctype html> <html><head><meta charset="utf-8"><title>xxx</title></head> <body> <img src="image.png" alt="" usemap="#mymap"> <map name="mymap"> <area shape="rect" coords="0,0,100,100" href="#" alt="A" onclick="try()"> </map> </body> </html>then I tried, for web design needs, to use a dynamic construction of the same situation:
somewhere in my web page:
<div id="imagemap" style="border: 3px solid black;"></div>
then executing a JavaScript function:
var imagemap = document.getElementById("imagemap"); var imagemapElement = '<div><img src="image.png" usemap="#mymap" alt="">'; imagemapElement += '<map name="mymap"><area shape="rect" coords="0,0,100,100" href="#" alt="A" onclick="try()"></div>'; var div.innerHTML = imagemapElement; imagemap.appendChild(div); imagemap.style.display = "inline";In this second case, the behavior is very strange because the onclick link activates only on certain parts of the image and not on others. Let me explain: the mapped area is 0, 0, 100, 100, so a square in the top-left corner, but the pointer and consequently the button click activates between approximately 0 and 50 pixels, while if the pointer moves into the area beyond 50 pixels, the area is no longer active.
I tried moving the mapping to different areas of the image and always get the same result: keep in mind that in the upper area (let's say approximately above 50 pixels) everything works, but in the central area of the image there's no way to get it to detect the active area, and in the lower part of the image the clickable area is restored. I really can't explain this behavior. Does anyone have any idea what it could be? Any suggestions on where to look or what to test?
I've tried also with z-index and using transparent button instead of mapping. The same behavior. It seems that a big central part of the image (a common jpg image) is inactive.
