SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot pavanpuligandla's Avatar
    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

  2. #2
    SitePoint Addict
    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/

  3. #3
    SitePoint Zealot coothead's Avatar
    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

  4. #4
    SitePoint Zealot pavanpuligandla's Avatar
    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.
    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.
    PHP Professional turned ASP.NET Professional

  5. #5
    SitePoint Zealot coothead's Avatar
    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>
    
    coothead

  6. #6
    SitePoint Zealot pavanpuligandla's Avatar
    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

  7. #7
    SitePoint Zealot pavanpuligandla's Avatar
    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/
    Hi champ,

    Fantastic, It also helped me..
    Thank you all for sharing your stuff with me..

    Thanks,
    PHP Professional turned ASP.NET Professional

  8. #8
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, you're very welcome.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •