Team,
I was asked to create a simple web page with a static image and hotspots (hyperlinks which will navigate to other pages) on some of the image features.
Did some digging work and was able to write this code.
Here is the working link.
The link above contains two visible hotspots and one invisible hotspot.
Key points are :
1. The main DIV tag must contain the background image with style position relative.
2. The inner hyperlinks must contain style position absolute and you can place those hyperlinks wherever you want on the image.
I have added the source code below.
Happy coding !
Cheers
Anand
================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hotspot on Image</title>
</head>
<body style="text-align: center;">
<div id="divMain" style="background-image: url('sampleImage.png'); width: 528px;
height: 396px; position: relative;">
<a id="birdyahoo" href="http://www.yahoo.com" target="_blank" style="border: medium solid Red;
width: 46px; height: 75px; position: absolute; left: 186px; top: 81px;" title="Click here to visit Yahoo Website">
</a><a id="birdGoogle" href="http://www.google.com" target="_blank" style="border: medium solid Red;
width: 92px; height: 64px; position: absolute; left: 184px; top: 255px;" title="Click here to visit Google Website">
</a><a id="birdMicrosoft" href="http://www.microsoft.com" target="_blank" style="width: 69px; height: 38px; position: absolute; left: 347px; top: 162px;" title="Click here to visit Microsoft Website">
</a>
</div>
</body>
</html>
================
I was asked to create a simple web page with a static image and hotspots (hyperlinks which will navigate to other pages) on some of the image features.
Did some digging work and was able to write this code.
Here is the working link.
The link above contains two visible hotspots and one invisible hotspot.
Key points are :
1. The main DIV tag must contain the background image with style position relative.
2. The inner hyperlinks must contain style position absolute and you can place those hyperlinks wherever you want on the image.
I have added the source code below.
Happy coding !
Cheers
Anand
================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hotspot on Image</title>
</head>
<body style="text-align: center;">
<div id="divMain" style="background-image: url('sampleImage.png'); width: 528px;
height: 396px; position: relative;">
<a id="birdyahoo" href="http://www.yahoo.com" target="_blank" style="border: medium solid Red;
width: 46px; height: 75px; position: absolute; left: 186px; top: 81px;" title="Click here to visit Yahoo Website">
</a><a id="birdGoogle" href="http://www.google.com" target="_blank" style="border: medium solid Red;
width: 92px; height: 64px; position: absolute; left: 184px; top: 255px;" title="Click here to visit Google Website">
</a><a id="birdMicrosoft" href="http://www.microsoft.com" target="_blank" style="width: 69px; height: 38px; position: absolute; left: 347px; top: 162px;" title="Click here to visit Microsoft Website">
</a>
</div>
</body>
</html>
================
