Flexible HTML map in a browser

Question

I'm trying to build responsive HTML design in a new project. Everything is fine except HTML map. I discovered the way of dynamic generation of an HTML map as well as a background PNG image, so server side flexibility is not a problem. But is there a way to get client flexibility (by means of CSS, HTML or JS)?

what do you mean by "HTML map", could you provide an example of what you would like it to look like? An example on another site perhaps? Is this a geographical map or image map or site map?? — hcharge, Apr 10 '12 at 08:36
Sorry, I thought it have to be clear enough... http://www.w3schools.com/tags/tag_map.asp — art.zhitnik, Apr 10 '12 at 08:59
There's a similar question here that you might like to read http://stackoverflow.com/questions/7844399/responsive-image-map — hcharge, Apr 10 '12 at 09:04
Yes, that is it. At the moment I think JS is the only one solution for me... — art.zhitnik, Apr 10 '12 at 10:50

score 0 · Answer 1 · answered Apr 11 '12 at 05:25

I answer my own question again))) Maybe my solution would be useful for someone...

<script type="text/javascript">
    GLOBAL_ARRAYCOORDS= new Array();
    GLOBAL_WIDTH=1;
    GLOBAL_ARRAYAREAS= new Array();

    function getglobal(){ 
        GLOBAL_ARRAYAREAS = document.body.getElementsByTagName("AREA");
        GLOBAL_WIDTH= 600; //document.getElementById("mapimage").naturalWidth;
        for(var i = 0; i < GLOBAL_ARRAYAREAS.length; i++) {
            GLOBAL_ARRAYCOORDS[i]= GLOBAL_ARRAYAREAS[i].coords;
        }
    }

    function scaleArea() {   
        for(var i = 0; i < GLOBAL_ARRAYAREAS.length; i++) {
            ii=i+1;
            rescale= document.getElementById("mapimage").width/GLOBAL_WIDTH ;
            sarray=GLOBAL_ARRAYCOORDS[i].split(",");      
            var rarray =new Array();
            for(var j = 0; j < sarray.length; j++) {
                rarray[j]=parseInt(sarray[j])*rescale;  
                rarray[j]=Math.round(rarray[j]);
            }
            GLOBAL_ARRAYAREAS[i].coords=rarray.join(",");
        }
    }

    window.onresize = function() {
        scaleArea();
    };
</script>

<img src="/catalog/europe.png" id="mapimage" usemap="#sueurope" onload="getglobal(); scaleArea();" />
<map id="sueurope" name="sueurope">
    <area alt="ru" coords="296,1, 296,8, ..." href="/catalog/ru" shape="poly"/>
    <area ...
</map>

GLOBAL_WIDTH is hard coded because naturalWidth is not supported by Opera and IE. I cannot use width as well because map appears scaled and I have to know absolute width of the europe.png. So, now map is completely flexible! Thanks to John S. Urban for his research.

Flexible HTML map in a browser

1 Answers1