[JavaScript] HTML Image Map Resize

Dieses Thema im Forum "Webentwicklung" wurde erstellt von YOOUI, 2. August 2012 .

  1. 2. August 2012
    HTML Image Map Resize

    Hallo RaisRush Gemeinde,
    erst einmal vielen Dank dafür das Ihr euch mit meinem Problem auseinandersetzt.
    Ich bin gerade dabei eine Funktion zu schreiben, die eine Image Map auf ein Dynamisches Bild (height immer 100% = Fenstergröße) anpassen soll.
    Spoiler
    HTML:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script language="text/javascript">
    
    Array.prototype.foreach = function( callback ) {
     for( var k=0; k<this .length; k++ ) {
     callback( k, this[ k ] );
     }
    }
    
    
    function picResize() {
    picMap = new Array(8);
    picMap[0] = new Array(128,439,278,500);
    picMap[1] = new Array(892,455,1192,516);
    
     var myWidth = 0, myHeight = 0,
     picWidth = 1200; picHeight = 1697;
     if( typeof( window.innerWidth ) == 'number' ) {
     //Non-IE
     myWidth = window.innerWidth;
     myHeight = window.innerHeight;
     } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
     //IE 6+ in 'standards compliant mode'
     myWidth = document.documentElement.clientWidth;
     myHeight = document.documentElement.clientHeight;
     } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
     //IE 4 compatible
     myWidth = document.body.clientWidth;
     myHeight = document.body.clientHeight;
     }
     faktor_width = myWidth / picWidth;
     faktor_height = myHeight / picHeight;
     
     picMap.foreach( function( k, v ) {
    
     for(var c = 0;c < picMap[k].length; c++)
     {
     picMap[k][c] = picMap[k][c] * faktor_width;
     }
    
    // picMap[k][0] = picMap[k][0] * faktor_height;
    
     // return '<area id="0" shape="rect" alt="" title="" coords="'+ picMap[k][0] +','+ picMap[k][1] +','+ picMap[k][2] +','+ picMap[k][3] +'" href="index.html" target="" />';
    
    }); 
    return 'HI';
    }
    
    </script>
    
    
    </head>
    <body onload="pic_resize();">
    <div id="plakat">
    <img usemap="map1" src="pic/plakat.jpg" height="100%">
    <map id="map1" name="map1">
    <!--<area id="0" shape="rect" alt="" title="" coords="128,439,278,500" href="index.html" target="" />
    <area id="1" shape="rect" alt="" title="" coords="892,455,1192,516" href="gaestebuch.html" target="" />
    <area id="2" shape="rect" alt="" title="" coords="904,756,1188,845" href="sponsoring.html" target="" />
    <area id="3" shape="rect" alt="" title="" coords="67,1029,240,1095" href="inhalt.html" target="" />
    <area id="4" shape="rect" alt="" title="" coords="921,1274,1084,1345" href="team.html" target="" />
    <area id="5" shape="rect" alt="" title="" coords="48,1343,233,1402" href="presse.html" target="" />
    <area id="6" shape="rect" alt="" title="" coords="934,1571,1170,1636" href="kontakt.html" target="" />-->
    <script language="text/javascript">
    document.write(picResize());
    </script>
    </map> 
    </div>
    
    <div id="content">
    
    </div>
    
    
    </body>
    </html>
    
    Den Code für die Fenstergröße habe ich aus einem Blog im Internet...
    An sich macht die Funktion schon eine ganz gute Arbeit.

    Doch jetzt zu meinem Problemen,
    1. Es kommen komplett andere Werte raus wenn ich entweder faktor_width oder faktor_height benutze (ich war der Meinung, das es bei beiden der gleiche Faktor sein müsste )
    2. Wie kann ich mit JavaScript den Code an dieser Stelle
    Spoiler
    HTML:
    <map id="map1" name="map1">
    <!--<area id="0" shape="rect" alt="" title="" coords="128,439,278,500" href="index.html" target="" />
    <area id="1" shape="rect" alt="" title="" coords="892,455,1192,516" href="gaestebuch.html" target="" />
    <area id="2" shape="rect" alt="" title="" coords="904,756,1188,845" href="sponsoring.html" target="" />
    <area id="3" shape="rect" alt="" title="" coords="67,1029,240,1095" href="inhalt.html" target="" />
    <area id="4" shape="rect" alt="" title="" coords="921,1274,1084,1345" href="team.html" target="" />
    <area id="5" shape="rect" alt="" title="" coords="48,1343,233,1402" href="presse.html" target="" />
    <area id="6" shape="rect" alt="" title="" coords="934,1571,1170,1636" href="kontakt.html" target="" />-->
    <script language="text/javascript">
    document.write(picResize());
    </script>
    </map> 
    ausgeben / wäre es besser eine Art
    Code:
     document.getElementById(areaId).coords = newCoords;
    
    zu verwenden ?

    Schon mal vielen Dank in voraus,

    YOOUI
     
  2. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.