mouse click on only a portion of image

**pavanpuligandla** · Jun 20, 2009, 11:30

Hi all,

I'm using a big image on my website home page, which was designed in photoshop with a button Register Now embedded.
i now need to make only "Register Now" button clickable and the rest of image to be not clicked.
can anyone please help me out, how to do this?

Many Thanks,

**champ** · Jun 20, 2009, 11:45

Search google for "image map"

You can also use this online tool to create your image map:
http://www.image-maps.com/

**coothead** · Jun 20, 2009, 11:46

Hi there pavanpuligandla,

may we see this image?

We can then supply the appropriate code.

coothead

**pavanpuligandla** · Jun 20, 2009, 12:11

may we see this image?

We can then supply the appropriate code.

Nothing special, but let us take ur avatar pic,
that is the full image, i want only the skull part clickable other region set to non clickbale.

**coothead** · Jun 20, 2009, 12:39

Hi there pavanpuligandla,

here is an example with a slightly larger image

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#mypic {
    width:171px;
    height:228px;
    padding:10px 0 0 274px;
    border:2px solid #000;
    background-image:url(http://www.coothead.co.uk/images/ten_quid.jpg);
    margin:auto;
 }
#mypic a {
    display:block;
    width:134px;
    height:170px;
    background-color:#0f0;
    opacity:0.1;
    filter:alpha(opacity=10);
 }
#mypic span {
    display:none;
 }
</style>

</head>
<body>

<div id="mypic">
 <a href="http://www.sitepoint.com/" title="clickable area"><span>sitepoint.com</span></a>
</div>

</body>
</html>

coothead