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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    show full size image on mouseover

    Hello

    I was looking for a javascript code to show an image in full size on moueover, I use this script on the site
    Code:
    function ShowPicture(id,Source) { 
    if (Source=="1"){ 
    if (document.layers) document.layers[''+id+''].visibility = "show" 
    else if (document.all) document.all[''+id+''].style.visibility = "visible" 
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" 
    } 
    else 
    if (Source=="0"){ 
    if (document.layers) document.layers[''+id+''].visibility = "hide" 
    else if (document.all) document.all[''+id+''].style.visibility = "hidden" 
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" 
    } 
    }

    CSS code i use:
    Code:
    <style type="text/css"> 
    #Style { 
    position:absolute; 
    visibility:hidden; 
    border:solid 1px #CCC; 
    padding:5px; 
    
    } 
    </style>
    On the site to to body I put this html code:
    Code:
    <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
    <div id="Style"><img src="/sites/default/files/peroulades.jpg"></div>

    When Im hovering over the link image is shown full size,

    Problem: if you take a look: http://www.online-dovolenka.sk/dovolenka_korfu

    if hover over both links "Click Here To Show Image" you will see same image, but I put two different images? where is the problem? any ideas?
    Code:
    <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
    <div id="Style"><img src="/sites/default/files/peroulades.jpg"></div> 
     
    <a href="#" onMouseOver="ShowPicture('Style',1)" onMouseOut="ShowPicture('Style',0)">Click Here To Show Image</a> 
    <div id="Style"><img src="/sites/default/files/pantokrator.jpg"></div>

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Did you write that code? because document.all and document.layers are virtually obsolete or did you get that old code from somewhere and are now trying to make it work.

    Plus you have more than 1 element with id="Style" which is a huge no-no, especially with javascript.

    And you don't need javascript for this at all. Another non-javascript option is to just put a :hover pseudo class on the img to control the display of the enlargement.
    Last edited by webdev1958; 03-21-2012 at 01:00 PM.


  •  

    Posting Permissions

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