Make Some Parts of the Image Clickable
Here's the demo showing it:
The trick is create a separate image for hover effect (in this case, glow). The hard part is getting the position right. We used, absolute positioning and here's the code below.
The trick is create a separate image for hover effect (in this case, glow). The hard part is getting the position right. We used, absolute positioning and here's the code below.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Clickable Parts of Image</title>
<style type="text/css">
.bg {
position: relative;
margin: 20px 0 20px 40px;
padding: 5px 0;
height: 766px;
width: 900px;
background-image: url(kon.png);
background-repeat: no-repeat;
}
#box-link1 {
position: absolute;
top: 0px;
left: 0px;
width: 384px;
height: 575px;
background-image: transparent;
}
#box-link1:hover{
background-image: url(mio.png);
}
#box-link2 {
position: absolute;
top: 25px;
left: 533px;
width: 367px;
height: 627px;
background-image: transparent;
}
#box-link2:hover{
background-image: url(mio1.png);
}
</style>
</head>
<body>
<div class="bg">
<a id="box-link1" href="#" title="Mio with Yellow Glow"></a>
<a id="box-link2" href="#" title="Mio with Blue Glow"></a>
</div>
</body>
</html>
