<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<p>Click on one of the two images of each pair to see it in isolation</p>
<br>Created using HTML:<br>
<img src="Pictures/Shape1and2.png" alt="2 images" usemap="#images">
<map name="images">
<area shape="rect" coords="0,0,102,99" alt="Shape 1" href="Pictures/Shape1.jpg">
<area shape="rect" coords="103,0,208,99" alt="Shape 2" href="Pictures/Shape2.jpg">
</map>
<br><br>Created using JavaScript:<br>
<img id="img2" src="Pictures/Shape1and2.png" alt="Shapes 1 and 2" usemap="#images2">
<span id="element"></span>
<script>
var x = document.createElement("MAP");
x.setAttribute("name","images2");
var x1 = document.createElement("AREA");
x1.setAttribute("shape","rect");
x1.setAttribute("coords","0,0,102,99");
x1.setAttribute("alt","Shape1 (using JavaScript)");
x1.setAttribute("href","Pictures/Shape1.jpg");
x.appendChild(x1);
var x2 = document.createElement("AREA");
x2.setAttribute("shape","rect");
x2.setAttribute("coords","103,0,208,99");
x2.setAttribute("alt","Shape2 (using JavaScript)");
x2.setAttribute("href","Pictures/Shape2.jpg");
x.appendChild(x2);
document.getElementById("element").appendChild(x);
document.getElementById("img2").setAttribute("usemap","#images2");
</script>
</body>
</html>
|