Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image can't hyperlink

    First Post here.

    I have this script that I found online. It works great.
    The Problem I am having is I am now trying to hyperlink the image and it's not working.

    what the script does is onmouseover it enlarges the image.
    I would like when it does this to be able to click on the enlarged image as a link to another page.

    Code:
    <style>
    #img_container
    { 
    position:absolute; 
    display:none; 
    border:1px solid #f00; 
    background:#fff; 
    }
    #large_img
    { 
    width:200px; 
    height:290px; 
    }
    </style>
    
    <script>
    function show(obj,obj1,obj2)
    { 
    document.getElementById(obj).style.display="block"; 
    document.getElementById(obj2).src=obj1.src; 
    var x_coords=findPosX(obj1); 
    var y_coords=findPosY(obj1); 
    document.getElementById(obj).style.left=x_coords; 
    document.getElementById(obj).style.top=y_coords; 
    }
    function hide(id)
    { 
    document.getElementById(id).style.display="none"; 
    }
    function findPosX(obj)
    { 
    var curleft = 0; 
    if (document.getElementById || document.all) 
    {  
    while (obj.offsetParent)  
    {   
    curleft += obj.offsetLeft   
    obj = obj.offsetParent;  
    } 
    } 
    else if (document.layers)  
    curleft += obj.x; 
    return curleft;
    }
    function findPosY(obj)
    { 
    var curtop = 0; 
    if (document.getElementById || document.all) 
    {  
    while (obj.offsetParent)  
    {   
    curtop += obj.offsetTop   
    obj = obj.offsetParent;  
    } 
    } 
    else if (document.layers)  
    curtop += obj.y; 
    return curtop;
    }
    </script>
    Here is what the image code is
    Code:
    <img id="img1" width="117" height="180" src="../Images /David.jpg" border="2" onmouseover="show('img_container',this,'large_img');" alt="David">
    Hope someone can help.
    Thanks

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    Welcome Eric, thanks for stealing my name LOL.

    Found your problem bud something small but easy to fix, You have a space in between Images and /David.jpg just remove that space so it looks like this


    PHP Code:
    <img id="img1" width="117" height="180" src="../Images/David.jpg" border="2" onmouseover="show('img_container',this,'large_img');" alt="David"
    instead of

    PHP Code:
    <img id="img1" width="117" height="180" src="../Images /David.jpg" border="2" onmouseover="show('img_container',this,'large_img');" alt="David"
    or try

    PHP Code:
    <img id="img1" width="117" height="180" src="Images/David.jpg" border="2" onmouseover="show('img_container',this,'large_img');" alt="David"
    Last edited by PitbullMean; 03-05-2009 at 05:32 AM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the typo error but it still doesn't work. I am trying to do something like this.

    It seems not to work because of the script effect it does.
    It works without the effect but I would like to hyperlink the 'large_img'. With the Effect

    PHP Code:
    <a href="David.html" target="right"><img id="img1" width="117" height="180" src="../Images /David.jpg" border="2" onmouseover="show('img_container',this,'large_img');" alt="David"
    Last edited by XtremeEric; 03-05-2009 at 05:43 AM.

  • #4
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    I think why its not working is cause you need to specify the large image in your CSS coding not just the size

    or look at your javascript it says function show(obj,obj1,obj2)
    try replaceing that with img1 seeing as i dont see any obj in ur code.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    PHP Code:
    <style>
    #img_container

    position:absolute
    display:none
    border:1px solid #f00; 
    background:#fff; 
    }
    #large_img

    width:200px
    height:290px
    }
    </
    style>

    <
    script>
    function 
    show(obj,obj1,obj2)

    document.getElementById(obj).style.display="block"
    document.getElementById(obj2).src=obj1.src
    var 
    x_coords=findPosX(obj1); 
    var 
    y_coords=findPosY(obj1); 
    document.getElementById(obj).style.left=x_coords
    document.getElementById(obj).style.top=y_coords
    }
    function 
    hide(id)

    document.getElementById(id).style.display="none"
    }
    function 
    findPosX(obj)

    var 
    curleft 0
    if (
    document.getElementById || document.all
    {  
    while (
    obj.offsetParent)  
    {   
    curleft += obj.offsetLeft   
    obj 
    obj.offsetParent;  


    else if (
    document.layers)  
    curleft += obj.x
    return 
    curleft;
    }
    function 
    findPosY(obj)

    var 
    curtop 0
    if (
    document.getElementById || document.all
    {  
    while (
    obj.offsetParent)  
    {   
    curtop += obj.offsetTop   
    obj 
    obj.offsetParent;  


    else if (
    document.layers)  
    curtop += obj.y
    return 
    curtop;
    }
    </script> 
    This is the script obj,obj1,obj2 are used in this script.

  • #6
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    yes but ur target id is img one so try using obj instead of img in the target

    img id="img1" to img id="obj"
    Last edited by PitbullMean; 03-05-2009 at 06:19 AM.
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #7
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have about 10 img id's on this page
    img1 - img10. I don't know how changing "img" to "obj" will help.

  • #8
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    cause your javascript isnt calling for img id's they are looking for obj just try i9t and see if that helps
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #9
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried the obj and still didn't work.
    Is there another way I can make this work?


  •  

    Posting Permissions

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