This is more a hack work around.
<!DOCTYPE html>
<html>
<style>
.box {
position:absolute;
top:attr(top);
left:attr(left);
width:attr(width);
height:attr(height);
border:8px solid #ffffff;
background-color:transparent
}
</style>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<div class="box" onclick="alert('dan oaks eats shit')" style="top: 350px; left: 295px; width: 88px; height: 88px; cursor: pointer;"></div>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
<html>
<style>
.box {
position:absolute;
top:attr(top);
left:attr(left);
width:attr(width);
height:attr(height);
border:8px solid #ffffff;
background-color:transparent
}
</style>
<body>
<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
<div class="box" onclick="alert('dan oaks eats shit')" style="top: 350px; left: 295px; width: 88px; height: 88px; cursor: pointer;"></div>
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>
</body>
</html>
Place the above html here:
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_map2
You should see an image like so ...
... note the white box around the "Cup of Coffee". Click on an you will see a very true and important message:
No comments:
Post a Comment