28 users online (1 members and 27 guests)  


  Results 1 to 2 of 2

Related

  1. Replies: 5
  2. multiple windows and links from same    Forum: Javascript Forum
    Replies: 1
  3. opening multiple chromeless windows    Forum: Javascript Forum
    Replies: 3
  4. multiple popup windows on one page    Forum: Javascript Forum
    Replies: 1
  5. javascript popup windows    Forum: Javascript Forum
    Replies: 7
  1. #1
    crosputni's Avatar
    New User

    Status
    Offline
    Join Date
    Nov 2007
    Posts
    1

    Multiple Popup windows

    I'm trying to create a script that makes it so an image pops up onmouseover and the popup closes onmouseout. But I need it for multiple images on one page.
    I need it for a page with before and after photos, and on mouseover, it pops up a larger image. Then on mouseout, the image/popup window, goes away.
    Oh, and these aren't links.. just a popup image/window.
    Is this possible with Javascript? If so, please help! (I can't figure it out )

    Thanks in advance!
    CR

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: Multiple Popup windows

    Hi there crosputni,

    and a warm welcome to these forums.

    You can see an example here...
    http://mysite.orange.co.uk/azygous/mo_img_display.html
    ...and the code here...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>mouseover image display</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    * {
        margin:0;
        padding:0;
     }
    body {
        background-image:url(images/bodyBg.jpg);
        margin:10px;
     }
    #horizontal {
        width:560px;
        padding:2px 2px 6px 6px;
        border-width:4px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#fff;
        list-style-type:none;
        margin:auto;
     }
    #horizontal:after {
        content:'';
        display:block;
        clear:both;
     }
    #horizontal li {
        margin:4px 4px 0 0;
        float:left;
     }
    #horizontal img {
        display:block;
        border:3px double #999;
        cursor:pointer;
     }
    #myimg_holder {
        position:absolute;
        border-width:5px;
        border-style:solid;
        border-color:#454672 #454672 #24243c #24243c;
        background-color:#333;
        padding:10px;  
    }
    .hide {
        visibility:hidden;
     }
    </style>
    
    <script type="text/javascript">
    
       var obj;
       var obj1;
       var preloads=[];
    
    function preload(){
    
    for(c=0;c<arguments.length;c++) {
       preloads[preloads.length]=new Image();
       preloads[preloads.length-1].src=arguments[c];
      }
     }
    preload(
       'images/apple.jpg','images/banana.jpg','images/girl.jpg','images/aaa.jpg',
       'images/ten_quid.jpg','images/blood.jpg','images/grap.jpg','images/buddha.jpg',
       'images/col.jpg','images/autumn.jpg','images/lace.jpg','images/moon1.jpg',
       'images/car.jpg','images/ball_shad.jpg','images/clouds.jpg','images/dog.jpg');
    
    window.onload=function() {
    
       obj=document.getElementById('myimg_holder');
       obj1=document.getElementById('myimg');
       thmb=document.getElementById('horizontal').getElementsByTagName('img');
    
    for(c=0;c<thmb.length;c++) {
       thmb[c].id=c;
    thmb[c].onmouseover=function(){
       displayImage(this);
       }
      }
     }
    
    function displayImage(el) {
       obj1.src=preloads[el.id].src;
       w=obj1.offsetWidth;
       h=obj1.offsetHeight;
       obj.style.width=w+'px';
    if((document.body.offsetWidth-w)/2<10) {
       obj.style.left='10px';
     }
    else {
       obj.style.left=(document.body.offsetWidth-w)/2+'px';
     }
       obj.style.top='180px';
       obj.className='';
    el.onmouseout=function() {
       obj.className='hide';
      }    
     }
    </script>
    
    </head>
    <body>
    
    <ul id="horizontal">
     <li><img src="images/apple_thumb.jpg" alt=""></li>
     <li><img src="images/banana_thumb.jpg" alt=""></li>
     <li><img src="images/girl_thumb.jpg" alt=""></li>
     <li><img src="images/aaa_thumb.jpg" alt=""></li>
     <li><img src="images/ten_quid_thumb.jpg" alt=""></li>
     <li><img src="images/blood_thumb.jpg" alt=""></li>
     <li><img src="images/grap_thumb.jpg" alt=""></li>
     <li><img src="images/buddha_thumb.jpg" alt=""></li>
     <li><img src="images/col_thumb.jpg" alt=""></li>
     <li><img src="images/autumn_thumb.jpg" alt=""></li>
     <li><img src="images/lace_thumb.jpg" alt=""></li>
     <li><img src="images/moon_thumb.jpg" alt=""></li>
     <li><img src="images/car_thumb.jpg" alt=""></li>
     <li><img src="images/ball_shad_thumb.jpg" alt=""></li>
     <li><img src="images/clouds_thumb.jpg" alt=""></li>
     <li><img src="images/dog_thumb.jpg" alt=""></li>
    </ul>
    
    <div id="myimg_holder" class="hide">
    <img id="myimg" src="" alt="">
    </div>
    
    </body>
    </html>
    Last edited by HTML; 03-09-2012 at 10:25 AM.



Tags for this Thread