www.webdeveloper.com
Results 1 to 2 of 2

Thread: show full size image on mouseover

  1. #1
    Join Date
    Mar 2012
    Location
    Slovakia
    Posts
    2

    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. #2
    Join Date
    Mar 2011
    Posts
    1,156
    Your code was a bit long for me to play with just at the moment, but I do have a suggestion. In your top example, your code checks 'document.layers'. 'document.layers' was exclusive to Netscape 4, which was replaced by Netscape 6 in 2000 and no longer exists. Similarly, 'document.all' being available but not 'document.getElementById' was exclusive to Internet Explorer 4, which also no longer exists. Your code could be simplified to only checking:

    document.getElementById(xx).style.visibility

    for all browsers in use today and might help you find the problem. Good luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles