SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Hybrid View
-
Jun 20, 2009, 11:30 #1
- Join Date
- Sep 2008
- Location
- hyderabad
- Posts
- 179
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
mouse click on only a portion of image
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,PHP Professional turned ASP.NET Professional
-
Jun 20, 2009, 11:45 #2
- Join Date
- Jun 2005
- Posts
- 262
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Search google for "image map"
You can also use this online tool to create your image map:
http://www.image-maps.com/
-
Jun 20, 2009, 11:46 #3
- Join Date
- Jan 2005
- Location
- Chertsey, London, England
- Posts
- 164
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi there pavanpuligandla,
may we see this image?
We can then supply the appropriate code.
coothead
-
Jun 20, 2009, 12:11 #4
- Join Date
- Sep 2008
- Location
- hyderabad
- Posts
- 179
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
may we see this image?
We can then supply the appropriate code.
that is the full image, i want only the skull part clickable other region set to non clickbale.PHP Professional turned ASP.NET Professional
-
Jun 20, 2009, 12:39 #5
- Join Date
- Jan 2005
- Location
- Chertsey, London, England
- Posts
- 164
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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>
-
Jun 20, 2009, 12:41 #6
- Join Date
- Sep 2008
- Location
- hyderabad
- Posts
- 179
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi,
Thanks for the code,
It worked.. Rellay Thanks alot
i thought of using fireworks..PHP Professional turned ASP.NET Professional
-
Jun 20, 2009, 12:44 #7
- Join Date
- Sep 2008
- Location
- hyderabad
- Posts
- 179
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Search google for "image map"
You can also use this online tool to create your image map:
http://www.image-maps.com/
Fantastic, It also helped me..
Thank you all for sharing your stuff with me..
Thanks,PHP Professional turned ASP.NET Professional
Bookmarks