lenny: IMG, MAP und AREA - Warum in FF und nicht in IE ???

Hallo,

ich habe mit JavaScript versucht ein IMG mit einer MAP mit einer AREA zu erzeugen. Das funktioniert im Firefox aber nicht im IE. Was mache ich falsch. Unter http://test.heptner.net seht Ihr das Ergebnis und könnt es ausprobieren, folgend der einfache Code. Wer kann helfen?

Grüße Lenny.

index.html
---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script src="jscripts/map.js" type="text/javascript"></script>
  </head>

<body>
    <div align="center" id="content">
    </div>
  </body>
</html>
---

map.js
---
function init() {
   var myImg = document.createElement("img");
   myImg.src = "images/test.jpg";
   myImg.useMap = "#map1";
   myImg.border = "0";

document.getElementById("content").appendChild(myImg);

var myMap = document.createElement("map");
   myMap.name = "map1";

var myArea = document.createElement("area");
   myArea.shape  = "rect";
   myArea.coords = "263,44,324,102";
   myArea.href   = "http://www.heptner.net/";
   myArea.target = "_blank";
   myArea.alt    = "";
   myMap.appendChild(myArea);

document.getElementById("content").appendChild(myMap);
}

window.onload = init;
---

  1. Hi,

    var myMap = document.createElement("map");
       myMap.name = "map1";

    Der IE stellt sich beim sich beim dynamischen Erzeugen von Formularelementen was das name-Attribut angeht oftmals an wie eine Nutte, die lieber Jungfrau bleiben moechte ... vielleicht ist es hier aehnlich, denn die IE Developer Toolbar zeigt kein name-Attribut fuer das map-Element.

    Du koenntest es mit der alternativen Schreibweise, die das MSDN fuer createElement beschreibt, versuchen (Browserweiche erforderlich):

    var myMap = document.createElement("<MAP NAME='map1'></MAP>");

    MfG ChrisB

    1. Vielen Dank, das war sehr hilfreich, aber...

      Jetzt habe ich beide Varianten mit Opera ausprobiert und beide gehen nicht.

      Was nun?

      map.js
      ---
      function init() {
         var myImg = document.createElement("img");
         myImg.src = "images/test.jpg";
         myImg.useMap = "#map1";
         myImg.border = "0";

      document.getElementById("content").appendChild(myImg);

      if(browser == "microsoft" || browser == "opera"){
            var myMap = document.createElement("<MAP NAME='map1'></MAP>");
         } else {
            var myMap = document.createElement("map");
            myMap.name = "map1";
         }

      var myArea = document.createElement("area");
         myArea.shape  = "rect";
         myArea.coords = "263,44,324,102";
         myArea.href   = "http://www.heptner.net/";
         myArea.target = "_blank";
         myArea.alt    = "";
         myMap.appendChild(myArea);

      document.getElementById("content").appendChild(myMap);
      }

      window.onload = init;
      ---

      1. Hallo,

        Jetzt habe ich beide Varianten mit Opera ausprobiert und beide gehen nicht.

        hier geht es nur darum, die IE's rauszufiltern. Das geht am besten mit conditonal compilation

          
        function create_named_Element(nodename,name)  
        {  
        // http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/createelement.asp  
        // http://msdn2.microsoft.com/en-us/library/7kx09ct1(VS.80).aspx  
        // conditional compilation  
          
        /*@cc_on @*/  
        /*@if (@_jscript)  
          var ele=document.createElement('<'+nodename+' name="'+name+'">');  
          @else @*/  
          var ele=document.createElement(nodename);  
          ele.name=name;  
        /*@end @*/  
          
        return ele;  
        }  
        
        

        falls du Opera erkennen möchtest, frage diese Eigenschaft ab.

          
        if (window.opera) alert("Opera");  
        
        

        einfacher ist natürlich Gernot's Vorschlag mit der Verwendung der id

        Gruß plan_B

        --
             *®*´¯`·.¸¸.·
    2. Ok, hier ist die Browserweiche und das veränderte index.html:

      browser.js
      ---
      var browser = "other";

      if (navigator.appName.indexOf("Opera") != -1) {
          browser = "opera";
      } else if (navigator.appName.indexOf("Explorer") != -1) {
          browser = "microsoft";
      } else if (navigator.appName.indexOf("Netscape") != -1) {
          browser = "netscape";
      }
      ---

      index.html
      ---
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
        <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <script src="jscripts/browser.js" type="text/javascript"></script>
          <script src="jscripts/map.js" type="text/javascript"></script>
        </head>

      <body>
          <div align="center" id="content">
          </div>
        </body>
      </html>
      ---

    3. Hallo ChrisB,

      Der IE stellt sich beim sich beim dynamischen Erzeugen von Formularelementen was das name-Attribut angeht oftmals an wie eine Nutte, die lieber Jungfrau bleiben moechte ... vielleicht ist es hier aehnlich, denn die IE Developer Toolbar zeigt kein name-Attribut fuer das map-Element.

      Das liegt wahrscheinlich daran, dass der IE NAME-Attribute, die wie hier im Falle eines MAP-Elements oder auch wie im Falle eines Ankers (Sprungmarke) oder wie im Falle eines FRAME-Elemenst nur _einmal_ im Dokument vorkommen sollten, intern mit IDs verwechselt. Der IE ist halt auch nur ein Mensch, mal ehrlich: dieses Attribut wäre ja dann auch viel näher liegend!
      ;-)

      Du koenntest es mit der alternativen Schreibweise, die das MSDN fuer createElement beschreibt, versuchen (Browserweiche erforderlich):

      var myMap = document.createElement("<MAP NAME='map1'></MAP>");

      Das funktioniert in der Tat, wie ich überprüft habe. Einfacher und ohne Browserweiche geht es aber, wenn man zusätzlich zu dem NAME-Attribut einfach noch eine gleichnamige ID vergibt. Das schadet ja dann auch den anderen Browsern nicht, denn das NAME-Attribut sollte in diesem Falle ja -wie gesagt- ohnehin dokumentweit eindeutig sein:

        
         var myMap = document.createElement("map");  
         myMap.id= "map1";  
         myMap.name = "map1";  
      
      

      Gruß Gernot