If you're looking for an easier way to create a clickable area/s in the image (or image map), you might consider using the HTML's <map> tag and JavaScript.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
Sample Use of Map Area with JavaScript
</title>
<script>
function writeText(txt) {
document.getElementById("AboutTheLocation").innerHTML = txt;
}
</script>
</head>
<body>
<map name="targetLocation">
<area shape="poly" coords="74,261,49,250,80,103,117,113" onmouseover="writeText('My home is located somewhere here.')" onmouseout="writeText('')" />
<map name="targetLocation">
<area shape="circle" coords="124,58,8" onmouseover="writeText('My office is located somewhere here.')" onmouseout="writeText('')" />
<img src ="vs.png" alt="Visual Studio" usemap="#targetLocation" width="145" height="126" />
<p></p>
<p id="AboutTheLocation"></p>
</body>
</html>
No comments:
Post a Comment