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" "">
<html xmlns="">
<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; 
  background-image: url(mio.png); 
#box-link2 {
  position: absolute; 
  top: 25px; 
  left: 533px; 
  width: 367px; 
  height: 627px; 
  background-image: transparent; 
  background-image: url(mio1.png); 


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

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables