0

HTML ドキュメントに を追加し、次のコードを使用して画像にリンクしようとしています。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
    <title>Website</title>
    <script type="text/javascript">
    function addArea(map, xstart, ystart, xende, yende, idCol, col) {
        area = document.createElement("area");

        area.shape  = "rect";
        area.coords = "" + xstart + ", " + ystart + ", " + xende + ", " + yende + "";
        area.href   = "#" + idCol;
        area.title  = col;
        area.alt    = col;
/*
        area.shape  = "\"rect\"";
        area.coords = "xstart + \", \" + ystart + \", \" + xende + \", \" + yende";
        area.href   = "\"#\" + idCol";
        area.title  = "col";
        area.alt    = "col";

*/      area.setAttribute(
            "onclick",
            "alert(\"Color: \" + col); return false;"
        );

        // append the area to the map
        map.appendChild(area);
    }

    function showMap() {
        idCol = "text";

        // generate the map
        mapCol      = document.createElement("map");
        mapCol.name = "map_" + idCol;
        mapCol.id   = "map_" + idCol;
        addArea(mapCol, 1, 1, 25, 13, idCol, "00FF00");
        addArea(mapCol, 25, 1, 49, 13, idCol, "00FF33");


        imgCol              = document.createElement("img");
        imgCol.src          = "https://www.google.de/images/srpr/logo3w.png";
        imgCol.width        = 275;
        imgCol.height       = 95;
        imgCol.style.border = "1px solid #000";
        imgCol.usemap       = "#name_und_raute_sind_notwendig_bunt_" + idCol;
        imgCol.alt          = "Farbe auswählen";

        imgColArea      = document.createElement("p");
        imgColArea.appendChild(imgCol);

        testcol = "ffffff";
        testlink    = document.createElement("a");
        testlink.appendChild(document.createTextNode("testlink"));
        testlink.setAttribute(
            "onclick",
            "alert(\"Color: \" + testcol); return false;"
        );

        document.getElementById("area").appendChild(imgColArea);
        document.getElementById("area").appendChild(testlink);

        alert("map added with " + mapCol.areas.length + " entries.");

    }


    </script>
</head>
<body onLoad="showMap()">
<div>
before
<div id="area"></div>
after
</div>
</body>

画像にはリンクされた領域が含まれている必要があり、クリックするとテキストで警告されます。残念ながら、エリアは表示されません。誰かが私の間違いを見つけますか？

4

2 に答える 2

3

まず、マップ識別子が一致しません。また、プロパティ名はuseMapではなくusemapです。使用する

imgCol.setAttribute('usemap',"#" + mapCol.name);

また

imgCol.useMap = "#" + mapCol.name;

代わりは。また、マップをドキュメントに追加する必要があります。

/* ... */
imgColArea.appendChild(imgCol);
imgColArea.appendChild(mapCol);
/* ... */

JSFiddle デモンストレーション

于 2012-04-13T20:58:23.257 に答える
0

MAPこれについてはよくわかりませんが、子をドキュメントに割り当てる前に、ドキュメントに要素を追加する必要があると思います。新しい要素を作成することは、追加されていない要素にプロパティを作成することとは異なります。

于 2012-04-13T20:59:24.853 に答える