Emloy Emloy - 4 months ago 9
Javascript Question

HTML DOM Area Object / Javascript

Tried to create this map area, but it doesn't work. Does someone know the solution? Thanks

html:





<table border="1">
<tr>
<td>logo</td>
<td>description</td>
</tr>
<tr>
<td colspan="2">
<map id ="first" name="Homepage"></map>

<script src="appendChild.js"></script>



</td>
</tr>
</table>






js:

var start= document.createElement("AREA");
start.setAttribute("href", "Homepage.html");
start.setAttribute("src" , "Homepage.jpg");
start.setAttribute("shape", "rect");
start.setAttribute("coords", "18,131,113,140");

document.getElementById("first").appendChild(start);

Answer

You have to create an element (usually an <img>) with the usemap attribute set to # + [the <map> element's name value]. In your case, you'd need to have an <img src="Homepage.jpg" usemap="#Homepage" />.

var start = document.createElement("AREA");
start.setAttribute("href", "Homepage.html");
//start.setAttribute("src" , "Homepage.jpg"); // The <area> doesn't do anythign with a 'src' attribute
start.setAttribute("shape", "rect");
start.setAttribute("coords", "18,131,113,140");

document.getElementById("first").appendChild(start);
<table border="1">
  <tr>
    <td>logo</td>
    <td>description</td>
  </tr>
  <tr>
    <td colspan="2">
      <img src="//placekitten.com/221/221" alt="" usemap="#Homepage" />
      <map id="first" name="Homepage"></map>

      <script src="appendChild.js"></script>

    </td>
  </tr>
</table>

Comments