Results 1 to 2 of 2

Thread: Code for 3-4 images appearing on ONE mouse rollover/hover?

  1. #1
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Code for 3-4 images appearing on ONE mouse rollover/hover?

    Describe problem:
    Is there a JS script (or other code) that allows 3-4 images to appear one after another on ONE mouseover - as opposed to just 1 image?

    ie. Instead of the usual:
    ---> Click on button image A and image B appears with a single hot link.
    Is there a code to do this:
    ---> Click on button image A and images B, C, D appear one after another with a single hot link.

    Thanks in advance for any input (or code).

    - pAuL

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,791
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .popup {
      position:absolute;z-Index:101;left:105px;top:0px;width:200px;height:150px;border:solid red 1px;
    }
    
    .popup IMG{
      width:200px;height:150px;border-Width:0px;
    }
    
    .popup2 {
      position:absolute;z-Index:101;left:-205px;top:-40px;width:200px;height:150px;border:solid red 1px;
    }
    
    .popup2 IMG{
      width:200px;height:150px;border-Width:0px;
    }
    /*]]>*/
    </style>
    
    </head>
    
    <body>
    <center>
    <br />
    <br />
    <a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5,jpg"
     onclick="return zxcSPopUp('tst',1000,'popup',['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg']);"
     >
    <img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
    </a>
    <br />
    <br />
    <a onclick="return zxcSPopUp('tst2',2000);" >
    <img id="tst2" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" width="100" height="75" />
    </a>
    </center>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Pop Up Slide Show. (14-January-2013)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcSPopUp(id,ms,cls,ary){
     var o=zxcSPopUp['zxc'+id],obj=document.getElementById(id),p,pop;
     if (!o&&obj&&typeof(cls)=='string'&&typeof(ary)=='object'&&ary.constructor==Array){
      var pop=document.createElement('DIV'),a=document.createElement('A'),img=document.createElement('IMG'),z0=0;
      pop.className=cls;
      pop.style.visibility='hidden';
      a.href=obj.parentNode.href;
      pop.appendChild(a);
      for (;z0<ary.length;z0++){
       img=img.cloneNode(false);
       img.src=ary[z0];
       img.style.position='absolute';
       img.style.zIndex='0';
       img.style.left='0px';
       img.style.top='0px';
       ary[z0]=img;
       a.appendChild(img);
      }
      pop.appendChild(a);
      document.body.appendChild(pop);
      o=zxcSPopUp['zxc'+id]={
       pop:pop,
       ary:ary,
       lft:pop.offsetLeft,
       top:pop.offsetTop,
       ud:false,
       cnt:0
      }
      pop.onmousemove=function(){ clearTimeout(o.to); }
      pop.onmouseout=function(){ rotate(o,100); }
      pop.onmouseup=function(){ zxcSPopUp(); }
     }
     if (zxcSPopUp.pop&&zxcSPopUp.pop!=o){
      pop=zxcSPopUp.pop;
      pop.pop.style.visibility='hidden';
      pop.ary[pop.cnt].style.zIndex='0';
      pop.ud=false;
      clearTimeout(pop.to);
     }
     if (o&&typeof(ms)=='number'&&ms>0){
      p=this.pos(obj);
      o.pop.style.left=p[0]+o.lft+'px';
      o.pop.style.top=p[1]+o.top+'px';
      o.ary[o.cnt].style.zIndex='0';
      o.cnt=0;
      o.pop.style.visibility=o.ud?'hidden':'visible';
      o.ud=!o.ud;
      clearTimeout(o.to);
      o.ms=ms;
      if (o.ud){
       rotate(o);
      }
      zxcSPopUp.pop=o;
     }
     return false
    }
    
    function rotate(o,ms){
     o.ary[o.cnt].style.zIndex='2';
     o.to=setTimeout(function(){ o.ary[o.cnt].style.zIndex='0'; o.cnt=++o.cnt%o.ary.length; rotate(o); },ms||o.ms);
    }
    
    function pos(obj){
     var rtn=[0,0];
     while(obj){
      rtn[0]+=obj.offsetLeft;
      rtn[1]+=obj.offsetTop;
      obj=obj.offsetParent;
     }
     return rtn;
    }
    
    zxcSPopUp('tst2',0,'popup2',['http://www.vicsjavascripts.org.uk/StdImages/1.gif','http://www.vicsjavascripts.org.uk/StdImages/2.gif','http://www.vicsjavascripts.org.uk/StdImages/3.gif']);
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Last edited by vwphillips; 01-15-2013 at 06:28 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Similar Threads

  1. To change from mouse-click to mouse-hover on SlashDot menu script *please*
    By kevinhannan in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-28-2010, 09:22 PM
  2. Replies: 2
    Last Post: 05-22-2009, 01:58 AM
  3. Mouse Rollover
    By 1ziggi1 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 11-12-2008, 03:26 PM
  4. Thumb Pop images On mouse houre images code
    By sreenivasulareddy in forum JavaScript
    Replies: 0
    Last Post: 04-14-2008, 12:30 PM
  5. Help - mouse rollover - I am clueless
    By co_gooner in forum CSS
    Replies: 1
    Last Post: 02-15-2007, 09:48 PM

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
  •