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.
<!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>

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables

Hot/Cute flat-chested Girls