0

In my aspx file I have img tag and map tag related its,

<IMG id="imgLogo" src="images/baner.jpg" usemap="#map">
<map name="map" style="display:block; position:relative;">
    <area id="myArea"  shape=poly coords="803, 1, 952, 1, 988, 108, 840, 112" href=MainNew.aspx alt="this is a link!!"/>
</map>

When I run the page as web application it works properly but when I run its as html application, the area position is not relative and moves when I change the browser size. How can I fix it?

mich
  • 127
  • 1
  • 1
  • 12
  • What happens, if you'd remove the whole `style` attribute from `map`? `map` should not need that kind of styling IMHO. – Teemu Dec 29 '13 at 19:55
  • nothing,its realy not help,but the problem remained. – mich Dec 30 '13 at 06:06
  • I don't get it. An attached (non-positioned) `map` [sticks to](http://jsfiddle.net/Q9FK8/1/) the `img`'s top-left corner, and won't move anywhere from that point when resizing the window, nevertheless where the `img` itself moves. Using a HTA doesn't make any difference. Can you please elaborate your problem? – Teemu Dec 30 '13 at 06:31
  • now I see that the img size changed in css file: #imgLogo { width: expression(document.body.offsetWidth -21 + "px"); /*height: 50px;*/ } – mich Dec 30 '13 at 08:11
  • Hmm... That is what I was thinking... I've answered this, [basicly very similar](http://stackoverflow.com/a/13322059/1169519) question. – Teemu Dec 30 '13 at 08:15

1 Answers1

0

I wrote javascript function that resolve the problem, the function finds the relative position for the poly points:

 <body onload="function(){
     var height = document.getElementById('imgLogo').height;
     var width = document.getElementById('imgLogo').width;
     var relativeWidth = 0.147;
     var relativeTopStartPoint = 0.787;
     var relativeBottomStartPoint = 0.8235;
     var coords = Math.ceil(width * relativeTopStartPoint) + ',0 ,' + Math.ceil(width * relativeTopStartPoint + width * relativeWidth) + ',0 ,' + Math.ceil(width * var relativeBottomStartPoint + width * relativeWidth) + ',' + Math.ceil(height) + ' ,' + Math.ceil(width * var relativeBottomStartPoint) + ',' + Math.ceil(height);
            document.getElementById('myArea').setAttribute('coords', coords);}" >
...
</body>
mich
  • 127
  • 1
  • 1
  • 12