Home/ Questions/Q 7787291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T20:37:02+00:00

I try to add a to an HTML-Document and link it to an image

  • 0

I try to add a to an HTML-Document and link it to an image using the following code:

<!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>

The image should contain linked areas, that alert a text when clicking on them. Unformtunatly the areas do not show up. Does anyone find my mistake?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First of all, your map identifiers mismatch. Also the property name is useMap, not usemap. Use

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

    or

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

    instead. You also have to add your map to the document:

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

    JSFiddle demonstration

    • 0