SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: clickable area

  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Canada
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question clickable area

    Can some one tell me how i can do this:

    I want to make an entire area clickable, for example the area bettween the beganing and ending div tags (irrespective of the content between the two tags), if a user clicks in that area it will take him to page xyz.htm (just like a normal link, it will also show a hand on house over)

    could someone give me a simple code to do this.

    greatly appreciated

    merry Christmas!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    function setOnClick(){
    document.getElementbyId('anyoldid').onclick=function(){ myfunction(); }
    }


    <body onload="setOnClick();" >



    any variation of the above will do it

    sorry too complicated

    <div onclick="javascript:MyFunction();" >

    </div>

    make sure the div has a background color

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Canada
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the answer, However it did'nt solve my problem.

    by using the above code it does not change the cursor to the hand on mouse over. and i am also not fimilar with how to put the url in the fuction

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:
    <html>
    <
    head>
    <
    script>
    var 
    Cur='pointer';
    if (
    document.all){ Cur='hand'; }

    function 
    Link(url){ 
    window.top.location=url;
    }

    function 
    MseOver(t){
     
    t.style.cursor=Cur;
    // extras to change the bg color
     
    t.bgcol=t.style.backgroundColor;
     
    t.style.backgroundColor='yellow';
     
    t.onmouseout=function(){ t.style.backgroundColor=t.bgcol; }
    }

    </script>
    </head>
    <body>

    <div style="width:100px;height:100px;background-Color:red;" 
    onmouseover="javascript:this.style.cursor=Cur;"
    onclick="javascript:window.top.location=url;"
     >
    <br>
    or
    <br>
    <div style="width:100px;height:100px;background-Color:red;" 
    onmouseover="javascript:MseOver(this);"
    onclick="javascript:Link('http://www.vicsjavascripts.org.uk');"
     >

    </div>

    </body>
    </html> 
    Hope this is better
    I now have a better idea what you want.
    more you explain the more we can help

    ps added extras to change the background color(pity to wast the function), hope this does not confuse

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Canada
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful !!!!

    exactly what I wanted..... :-)

    thank you soooooooo much!

  6. #6
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So much code for something that could be as simple as this:
    Code:
    <div style="cursor:pointer" onclick="location.href='xyz.htm'">Whatever you want to put in your div.</div>


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
  •