Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: picture menu with vertical submenu dropdown

  1. #1
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default picture menu with vertical submenu dropdown

    Hi, there...

    I'll try and explain, what I'm looking for...
    I'm looking for some kind of docmenu (I think it's called)
    - like the bubble effect menu CLICK HERE

    BUT:
    I want the title to each menuitem to be visible at all times (not just on roll over)
    - and I want a line of submenu to appear beneath the pictures, when I hoover over a picture (menuitem)

    Does this make sence?
    Please ask if this is not understandeble.
    Thanks for your time.

    Last edited by Mejse78; 07-01-2012 at 02:51 PM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 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">
    
    /*CSS for 2 demos on the page*/
    
    .bubblewrap{
    list-style-type:none;
    margin:0;
    padding:0;
    }
    
    .bubblewrap li{
    display:inline-block;
    zoom:1; /*Trigger haslayout in IE7 and less*/
    *display:inline; /*For IE7 and less*/
    position:relative;
    width: 200px;
    height:80px;
    border:solid red 0px;
    }
    
    .bubblewrap li img{
    position:absolute;
    width: 100px; /*default width of each image.*/
    height: 60px; /*default height of each image.*/
    left:0;
    top:0;
    border:0;
    }
    
    .bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
    position:absolute;
    font:bold 12px Arial;
    left:0px;
    width:100%;
    text-align:center;
    background:white;
    }
    
    .menu {
     position:relative;width:600px;height:100px;border:solid red 1px;
    }
    
    .page {
     width:600px;height:100px;background-Color:#FFFFCC;
    }
    
    </style>
    
    </head>
    
    <body>
    <ul id="orbs" class="bubblewrap">
     <li>
      <div class="tooltip" >Add to Stumbleupon</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Add to Stumbleupon" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Facebook</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Add to Facebook" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Digg</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Add to Digg" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Twitter</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Add to Twitter" /></a>
     </li>
     <li>
      <div class="tooltip" >Add RSS Feed</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Add RSS Feed" /></a>
     </li>
    </ul>
    
    <div id="menu" class="menu" >
    <div class="page" >Menu 1</div>
    <div class="page" >Menu 2</div>
    <div class="page" >Menu 3</div>
    <div class="page" >Menu 4</div>
    <div class="page" >Menu 5</div>
    </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Bubble (29-June-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcImageBubble(o){
     var ul=document.getElementById(o.ULID),menu=document.getElementById(o.MenuID),lis=ul.getElementsByTagName('LI'),m=o.MagBy,m=typeof(m)=='number'?m:1,ms=o.Animate,img,d,pw,ph,w,h,ary=[],clds=menu.childNodes,mary=[],z0=0,z1=0;
     for (;z0<lis.length;z0++){
      img=lis[z0].getElementsByTagName('IMG')[0];
      d=lis[z0].getElementsByTagName('DIV')[0];
      w=img.width;
      h=img.height;
      pw=lis[z0].offsetWidth;
      ph=lis[z0].offsetHeight;
      ary[z0]=[img,d,[w,h,(pw-w)/2,(ph-h)/2],[w*m,h*m,(pw-w*m)/2,(ph-h*m)/2]]
      img.style.width=ary[z0][2][0]+'px';
      img.style.height=ary[z0][2][1]+'px';
      img.style.left=ary[z0][2][2]+'px';
      img.style.top=ary[z0][2][3]+'px';
      d.style.top=ary[z0][2][3]-d.offsetHeight+'px';
      this.addevt(img,'mouseout','mse',z0,2);
      this.addevt(img,'mouseover','mse',z0,3);
     }
     for (;z1<clds.length;z1++){
      if (clds[z1].nodeType==1){
       clds[z1].style.position='absolute';
       clds[z1].style.zIndex=mary.length>0?'0':'1';
       clds[z1].style.left='0px';
       clds[z1].style.top='0px';
       this.opac(clds[z1],mary.length>0?0:100);
       mary.push([clds[z1],mary.length>0?0:100,'o'+z1]);
      }
     }
     this.mdes=['width','height','left','top'];
     this.ary=ary;
     this.mary=mary;
     this.lst=mary[0];
     this.ms=typeof(ms)=='number'?ms:1000;
    }
    
    zxcImageBubble.prototype={
    
     mse:function(nu,ud){
      var ary=this.ary[nu],img=ary[0],d=ary[1],mdes=this.mdes,mary=this.mary,z0=0;
      for (;z0<mdes.length;z0++){
       clearTimeout(this['to'+nu+z0]);
       this.animate(img,mdes[z0],parseInt(img.style[mdes[z0]]),ary[ud][z0],new Date(),this.ms,'to'+nu+z0);
      }
      clearTimeout(this['dly'+nu]);
      this.animate(d,'top',parseInt(d.style.top),ary[ud][3]-d.offsetHeight,new Date(),this.ms,'dly'+nu);
      d.style.top=ary[ud][3]-d.offsetHeight+'px'
      if (ud==3){
       if (this.lst&&mary[nu]){
        this.lst[0].style.zIndex='0';
        clearTimeout(this[this.lst[2]]);
        this.animate(this.lst,'o',this.lst[1],0,new Date(),this.ms,this.lst[2]);
       }
       if (mary[nu]){
        this.lst=mary[nu];
        this.lst[0].style.zIndex='1';
        clearTimeout(this[this.lst[2]]);
        this.animate(this.lst,'o',this.lst[1],100,new Date(),this.ms,this.lst[2]);
       }
      }
     },
    
     animate:function(obj,mde,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       if (mde!='o'){
        obj.style[mde]=now+'px';
       }
       else {
        obj[1]=now
        this.opac(obj[0],now);
       }
      }
      if (ms<mS){
       oop[to]=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,to); },10);
      }
      else {
       if (mde!='o'){
        obj.style[mde]=t+'px';
       }
      }
     },
    
     opac:function(obj,opc){
      obj.style.filter='alpha(opacity='+opc+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
     }
    
    }
    
    
    new zxcImageBubble({
     ULID:'orbs',    // the unique ID name of the parent UL.               (string)
     MenuID:'menu',  // the unique ID name of the menu parent DIV.         (string)
     MagBy:1.2,      //(optional) the image magnification.                 (number, default = 1)
     Animate:500     //(optional) the animation duration in milli seconds. (number, default = 1000)
    });
    
    /*]]>*/
    </script></body>
    
    </html>
    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/

  3. #3
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thanks for taking your time

    I have some questions....

    Is it possible to make the red menu box only apear, when I hover over a picture?
    - and place it, so that it's left side is right under the picture?

    And teqhnical.... can I put the script in an js file, instead of having it at the bottom of my html page?

    And.... I can see, that you have theese two classes: menu and page... what is the page class for, exactly?

    Thanks
    Last edited by Mejse78; 07-01-2012 at 10:53 AM.

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    all class names are for style purposes only
    the scripts can be external

    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">
    
    /*CSS for 2 demos on the page*/
    
    .bubblewrap{
    position:relative;
    top:20px;
    list-style-type:none;
    margin:0;
    padding:0;
    }
    
    .bubblewrap li{
    display:inline-block;
    zoom:1; /*Trigger haslayout in IE7 and less*/
    *display:inline; /*For IE7 and less*/
    position:relative;
    width: 200px;
    height:80px;
    border:solid red 0px;
    }
    
    .bubblewrap li img{
    position:absolute;
    width: 100px; /*default width of each image.*/
    height: 60px; /*default height of each image.*/
    left:0;
    top:0;
    border:0;
    }
    
    .bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
    position:absolute;
    font:bold 12px Arial;
    left:0px;
    width:100%;
    text-align:center;
    background:white;
    }
    
    .parent {
     position:relative;overflow:hidden;width:1200px;height:200px;border:solid red 1px;
    }
    
    .menu {
     position:relative;left:50px;top:20px;width:600px;height:100px;
    }
    
    .page {
     width:600px;height:100px;background-Color:#FFFFCC;
    }
    
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Bubble (01-July-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcImageBubble(o){
     var ul=document.getElementById(o.ULID),menu=document.getElementById(o.MenuID),lis=ul.getElementsByTagName('LI'),m=o.MagBy,m=typeof(m)=='number'?m:1,ms=o.Animate,img,d,pw,ph,w,h,ary=[],clds=menu.childNodes,mary=[],z0=0,z1=0;
     for (;z0<lis.length;z0++){
      img=lis[z0].getElementsByTagName('IMG')[0];
      d=lis[z0].getElementsByTagName('DIV')[0];
      w=img.width;
      h=img.height;
      pw=lis[z0].offsetWidth;
      ph=lis[z0].offsetHeight;
      ary[z0]=[img,d,[w,h,(pw-w)/2,(ph-h)/2],[w*m,h*m,(pw-w*m)/2,(ph-h*m)/2]]
      img.style.width=ary[z0][2][0]+'px';
      img.style.height=ary[z0][2][1]+'px';
      img.style.left=ary[z0][2][2]+'px';
      img.style.top=ary[z0][2][3]+'px';
      d.style.top=ary[z0][2][3]-d.offsetHeight+'px';
      this.addevt(img,'mouseout','mse',z0,2);
      this.addevt(img,'mouseover','mse',z0,3);
     }
     for (;z1<clds.length;z1++){
      if (clds[z1].nodeType==1){
       clds[z1].style.position='absolute';
       clds[z1].style.zIndex='2';
       clds[z1].style.left='0px';
       clds[z1].style.top='0px';
       this.opac(clds[z1],0);
       mary.push([clds[z1],0,'o'+z1,'lft'+z1]);
      }
     }
     this.mdes=['width','height','left','top'];
     this.ary=ary;
     this.menu=menu;
     this.mary=mary;
     this.lst=mary[0];
     this.ms=typeof(ms)=='number'?ms:1000;
    }
    
    zxcImageBubble.prototype={
    
     mse:function(nu,ud){
      var ary=this.ary[nu],img=ary[0],d=ary[1],mdes=this.mdes,mary=this.mary,lft=0,z0=0;
      for (;z0<mdes.length;z0++){
       clearTimeout(this['to'+nu+z0]);
       this.animate(img,mdes[z0],parseInt(img.style[mdes[z0]]),ary[ud][z0],new Date(),this.ms,'to'+nu+z0);
      }
      clearTimeout(this['dly'+nu]);
      this.animate(d,'top',parseInt(d.style.top),ary[ud][3]-d.offsetHeight,new Date(),this.ms,'dly'+nu);
      d.style.top=ary[ud][3]-d.offsetHeight+'px'
      while (img.parentNode){
       lft+=img.offsetLeft;
       if (img.nodeName.toUpperCase()=='DIV'){
        break;
       }
       img=img.parentNode;
      }
      this.animate(this.menu,'left',this.menu.offsetLeft,lft+(ud==2?0:ary[2][0]-ary[3][0]),new Date(),this.ms,mary[nu][3]);
      if (mary[nu]){
       clearTimeout(this[mary[nu][2]]);
       mary[nu][0].style.zIndex=ud;
       this.animate(mary[nu],'o',mary[nu][1],ud==2?0:100,new Date(),this.ms,mary[nu][2]);
      }
     },
    
     animate:function(obj,mde,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       if (mde!='o'){
        obj.style[mde]=now+'px';
       }
       else {
        obj[1]=now
        this.opac(obj[0],now);
       }
      }
      if (ms<mS){
       oop[to]=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,to); },10);
      }
      else {
       if (mde!='o'){
        obj.style[mde]=t+'px';
       }
      }
     },
    
     opac:function(obj,opc){
      obj.style.filter='alpha(opacity='+opc+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
     }
    
    }
    
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    new zxcImageBubble({
     ULID:'orbs',    // the unique ID name of the parent UL.               (string)
     MenuID:'menu',  // the unique ID name of the menu parent DIV.         (string)
     MagBy:1.2,      //(optional) the image magnification.                 (number, default = 1)
     Animate:500     //(optional) the animation duration in milli seconds. (number, default = 1000)
    });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div class="parent" >
    <ul id="orbs" class="bubblewrap">
     <li>
      <div class="tooltip" >Add to Stumbleupon</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Add to Stumbleupon" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Facebook</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Add to Facebook" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Digg</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Add to Digg" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Twitter</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Add to Twitter" /></a>
     </li>
     <li>
      <div class="tooltip" >Add RSS Feed</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Add RSS Feed" /></a>
     </li>
    </ul>
    
    <div id="menu" class="menu" >
    <div class="page" >Menu 1</div>
    <div class="page" >Menu 2</div>
    <div class="page" >Menu 3</div>
    <div class="page" >Menu 4</div>
    <div class="page" >Menu 5</div>
    </div>
    </div>
    
    
    
    </body>
    
    </html>
    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/

  5. #5
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you SO much!
    This looks really nead ☼

  6. #6
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Ohh.... one more thing, now that I look closer at it....

    Can it be so, that I can put links in that yellow box (page) and be able to click on them, befor the box disapears again?

    Sorry for keeping on asking..

  7. #7
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    I can't find the positioning of the yellow box..

    This is my HTML:
    Code:
    <!DOCTYPE HTML>
    <html>
    
    <head>
    	
    	
        <link href="css/basic.css" rel="stylesheet" type="text/css" media="screen">
    	<link href="css/bubble.css" rel="stylesheet" type="text/css" media="screen">  
        <script type="text/javascript" src="js/bubbles.js"></script> 
        <script type="text/javascript" src="js/bubblesmenu.js"></script> 
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Type" content="cache" />
    	<meta name="robots" content="INDEX,FOLLOW" />
    	<meta name="keywords" content="Enter Keywords" />
    	<meta name="description" content="Description Here" />
    	
    	<title>Web Site By Timothy Web Design - www.timothywebdesign.com</title>
    	
        
        
        <!-- Google Analytics Code Goes Below Here -->
            
        
        <!-- End Google Analytics Code -->
    <style type="text/css">
    
    /*CSS for 2 demos on the page*/
    
    .bubblewrap{
    position:relative;
    top:20px;
    list-style-type:none;
    margin:0px auto 0px auto;
    padding:0;
    }
    
    .bubblewrap li{
    display:inline-block;
    zoom:1; /*Trigger haslayout in IE7 and less*/
    *display:inline; /*For IE7 and less*/
    position:relative;
    width: 150px;
    height:80px;
    border:solid red 0px;
    }
    
    .bubblewrap li img{
    position:absolute;
    width: 100px; /*default width of each image.*/
    height: 60px; /*default height of each image.*/
    left:0;
    top:0;
    border:0;
    }
    
    .bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
    position:absolute;
    font:bold 12px Arial;
    left:0px;
    width:100%;
    text-align:center;
    background:transparrent;
    }
    
    .parent {
     position:relative;overflow:hidden;width:900px;height:200px;border:solid red 1px;
    }
    
    .menu {
     position:relative;left:50px;top:20px;width:400px;height:50px;
    }
    
    .page {
     width:400px;height:50px;background-Color:#b7cfc2;
    }
    
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Bubble (01-July-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcImageBubble(o){
     var ul=document.getElementById(o.ULID),menu=document.getElementById(o.MenuID),lis=ul.getElementsByTagName('LI'),m=o.MagBy,m=typeof(m)=='number'?m:1,ms=o.Animate,img,d,pw,ph,w,h,ary=[],clds=menu.childNodes,mary=[],z0=0,z1=0;
     for (;z0<lis.length;z0++){
      img=lis[z0].getElementsByTagName('IMG')[0];
      d=lis[z0].getElementsByTagName('DIV')[0];
      w=img.width;
      h=img.height;
      pw=lis[z0].offsetWidth;
      ph=lis[z0].offsetHeight;
      ary[z0]=[img,d,[w,h,(pw-w)/2,(ph-h)/2],[w*m,h*m,(pw-w*m)/2,(ph-h*m)/2]]
      img.style.width=ary[z0][2][0]+'px';
      img.style.height=ary[z0][2][1]+'px';
      img.style.left=ary[z0][2][2]+'px';
      img.style.top=ary[z0][2][3]+'px';
      d.style.top=ary[z0][2][3]-d.offsetHeight+'px';
      this.addevt(img,'mouseout','mse',z0,2);
      this.addevt(img,'mouseover','mse',z0,3);
     }
     for (;z1<clds.length;z1++){
      if (clds[z1].nodeType==1){
       clds[z1].style.position='absolute';
       clds[z1].style.zIndex='2';
       clds[z1].style.left='0px';
       clds[z1].style.top='0px';
       this.opac(clds[z1],0);
       mary.push([clds[z1],0,'o'+z1,'lft'+z1]);
      }
     }
     this.mdes=['width','height','left','top'];
     this.ary=ary;
     this.menu=menu;
     this.mary=mary;
     this.lst=mary[0];
     this.ms=typeof(ms)=='number'?ms:1000;
    }
    
    zxcImageBubble.prototype={
    
     mse:function(nu,ud){
      var ary=this.ary[nu],img=ary[0],d=ary[1],mdes=this.mdes,mary=this.mary,lft=0,z0=0;
      for (;z0<mdes.length;z0++){
       clearTimeout(this['to'+nu+z0]);
       this.animate(img,mdes[z0],parseInt(img.style[mdes[z0]]),ary[ud][z0],new Date(),this.ms,'to'+nu+z0);
      }
      clearTimeout(this['dly'+nu]);
      this.animate(d,'top',parseInt(d.style.top),ary[ud][3]-d.offsetHeight,new Date(),this.ms,'dly'+nu);
      d.style.top=ary[ud][3]-d.offsetHeight+'px'
      while (img.parentNode){
       lft+=img.offsetLeft;
       if (img.nodeName.toUpperCase()=='DIV'){
        break;
       }
       img=img.parentNode;
      }
      this.animate(this.menu,'left',this.menu.offsetLeft,lft+(ud==2?0:ary[2][0]-ary[3][0]),new Date(),this.ms,mary[nu][3]);
      if (mary[nu]){
       clearTimeout(this[mary[nu][2]]);
       mary[nu][0].style.zIndex=ud;
       this.animate(mary[nu],'o',mary[nu][1],ud==2?0:100,new Date(),this.ms,mary[nu][2]);
      }
     },
    
     animate:function(obj,mde,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       if (mde!='o'){
        obj.style[mde]=now+'px';
       }
       else {
        obj[1]=now
        this.opac(obj[0],now);
       }
      }
      if (ms<mS){
       oop[to]=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,to); },10);
      }
      else {
       if (mde!='o'){
        obj.style[mde]=t+'px';
       }
      }
     },
    
     opac:function(obj,opc){
      obj.style.filter='alpha(opacity='+opc+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
     }
    
    }
    
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    new zxcImageBubble({
     ULID:'orbs',    // the unique ID name of the parent UL.               (string)
     MenuID:'menu',  // the unique ID name of the menu parent DIV.         (string)
     MagBy:1.2,      //(optional) the image magnification.                 (number, default = 1)
     Animate:500     //(optional) the animation duration in milli seconds. (number, default = 1000)
    });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div id="space">
    <div id="wrapper">
    		
    				
    		<div id="banner">
    			<img src="images/banner2.gif" />
    		</div>
    		
    				
    <div >
    <ul id="orbs" class="bubblewrap">
     
     <li>
      <div class="tooltip" >Add to Stumbleupon</div>
      <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
      
     </li>
     
     
     <li>
      <div class="tooltip" >Add to Facebook</div>
      <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
     </li>
     
     <li>
      <div class="tooltip" >Add to Digg</div>
      <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
     </li>
     
     
     <li>
      <div class="tooltip" >Add to Twitter</div>
      <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
     </li>
     
      <li>
      <div class="tooltip" >Add to Twitter</div>
      <a href="http://dynamicdrive.com"><img src="http://i1086.photobucket.com/albums/j447/Mejse78/aktive.png" border="0" alt="Photobucket"></a>
     </li>
     
     
    
    </ul>
    
    <div id="menu" class="menu" >
    <div class="page" ><a href="http://dynamicdrive.com">xxxx</a>    <a href="http://dynamicdrive.com">yyyy</a></div>
    <div class="page" >Menu 2</div>
    <div class="page" >Menu 3</div>
    <div class="page" >Menu 4</div>
    <div class="page" >Menu 5</div>
    </div>
    </div>
    
    
    	
    		<div id="leftnav">
    				
    		</div>
    			
            <div id="content">
                
            </div>
                
            <div id="rightside">
                
            </div>
    	
    		<div id="footer">
    		
    		</div>
       	</div>     
       </div>
    
    </body>
    </html>
    Last edited by Mejse78; 07-01-2012 at 03:43 PM.

  8. #8
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default my basic css - so far

    Code:
    /* Timothy Framework - www.timothyframework.com */
    /* This work is licensed under the MIT License - http://www.opensource.org/licenses/mit-license.php */
    
    
    /* Reset */
    
    html, body { margin: 0; padding: 0; border: 0;  
    				background: transparent; font-size:10px; }
    
    div, span, article, aside, footer, header, hgroup, nav, section,
    h1, h2, h3, h4, h5, h6, p, blockquote, a, ol, ul, li, 
    table, tr, th, td, tbody, tfoot, thead {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	vertical-align: baseline;
    	background: transparent;
    	}
    
    img 	{ margin:0; padding:0; border:0; }
    
    table, tr, th, td, tbody, tfoot, thead {
    	margin: 0; padding: 0; border: 0;
    	vertical-align: baseline;
    	background: transparent;
    	}
    	
    table { border-collapse: collapse; border-spacing: 0; }
    	
    input, select, textarea, form, fieldset {
    	margin: 0; padding: 0; border: 0;
    	}
    
    article, aside, dialog, figure, footer, header, hgroup, nav, section { 
    	display:block; }
    
    h1, h2, h3, h4, h5, h6, p, li, blockquote, td, th, a, caption, em, strong, strike { 
    	font-family: Arial, Helvetica, sans-serif;
    	font-size:100%;
    	font-weight: normal;
    	font-style: normal;
    	line-height: 100%; 
    	text-indent: 0;
    	text-decoration: none;
    	text-align: left;
    	color: #000;
    	}
    
    ol, ul { list-style: none; }
    
    
    
    
    
    /* Global */
    
    html 	{	}
    body	{ background-color: #7e9f8d; }
    
    
    
    /* Headings */
    
    h1, h2, h3, h4, h5, h6 { font-weight: bold; color: #000; }
    
    h1 { font-size:24px; }
    h2 { font-size:20px; }
    h3 { font-size:16px; }
    h4 { font-size:14px; }
    h5 { font-size:14px; }
    h6 { font-size:14px; }
    
    h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }
    
    
    
    /* Text Elements */
    
    p           	{ color:#000; font-size:12px; line-height:150%;  }
    p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
    p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }
    
    
    
    
    a           	{   }
    a:link			{ color: #00f;  }
    a:visited		{ color: #0f0;  }
    a:active		{ color: #000;  }
    a:focus			{ color: #666;  }
    a:hover     	{ color: #f00;  }
    
    
    
    /* Images */
    
    
    
    
    
    
    
    /* Lists */
    
    ul          	{  }
    ol          	{ list-style-type:decimal; }
    
    ul li		    { color:#000; font-size:12px; }
    ol li	     	{ color:#000; font-size:12px; }
    
    dl          	{  	}
    dt       		{  	}
    dd          	{ 	}
    
    
    
    
    
    /* Containers */
    
    	
    #space			{ height: auto; width: 1000px; margin: 0px auto 0px auto; background-color:#FFF; }
    
    #wrapper		{ width: 940px; margin: 0px auto 0px auto; background-color:#FFF }
    
    #banner 		{ padding-top: 20px;  }
    
    
    					
    
    
    
    
    /*HOME*/
    
    
    
    #content		 	{ height: 400px;  }
    
    #leftnav 			{   }
    
    #leftside 			{   }
    
    #rightside 			{   }
    
    #content 			{   }
    
    #footer 			{   }

  9. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,799
    Thanks
    2
    Thanked 420 Times in 414 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">
    
    /*CSS for 2 demos on the page*/
    
    .bubblewrap{
    position:relative;
    top:20px;
    list-style-type:none;
    margin:0;
    padding:0;
    }
    
    .bubblewrap li{
    display:inline-block;
    zoom:1; /*Trigger haslayout in IE7 and less*/
    *display:inline; /*For IE7 and less*/
    position:relative;
    width: 200px;
    height:80px;
    border:solid red 0px;
    }
    
    .bubblewrap li img{
    position:absolute;
    width: 100px; /*default width of each image.*/
    height: 60px; /*default height of each image.*/
    left:0;
    top:0;
    border:0;
    }
    
    .bubblewrap .tooltip{ /*CSS for image tooltip (alt attribute of image)*/
    position:absolute;
    font:bold 12px Arial;
    left:0px;
    width:100%;
    text-align:center;
    background:white;
    }
    
    .parent {
     position:relative;overflow:hidden;width:1200px;height:200px;border:solid red 1px;
    }
    
    .menu {
     position:relative;left:50px;top:20px;width:600px;height:100px;
    }
    
    .page {
     width:600px;height:100px;background-Color:#FFFFCC;
    }
    
    </style>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Image Bubble (01-July-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcImageBubble(o){
     var ul=document.getElementById(o.ULID),menu=document.getElementById(o.MenuID),lis=ul.getElementsByTagName('LI'),m=o.MagBy,m=typeof(m)=='number'?m:1,ms=o.Animate,img,d,pw,ph,w,h,ary=[],clds=menu.childNodes,mary=[],z0=0,z1=0;
     for (;z0<lis.length;z0++){
      img=lis[z0].getElementsByTagName('IMG')[0];
      d=lis[z0].getElementsByTagName('DIV')[0];
      w=img.width;
      h=img.height;
      pw=lis[z0].offsetWidth;
      ph=lis[z0].offsetHeight;
      ary[z0]=[img,d,[w,h,(pw-w)/2,(ph-h)/2],[w*m,h*m,(pw-w*m)/2,(ph-h*m)/2]]
      img.style.width=ary[z0][2][0]+'px';
      img.style.height=ary[z0][2][1]+'px';
      img.style.left=ary[z0][2][2]+'px';
      img.style.top=ary[z0][2][3]+'px';
      d.style.top=ary[z0][2][3]-d.offsetHeight+'px';
      this.addevt(img,'mouseout','mse',z0,2);
      this.addevt(img,'mouseover','mse',z0,3);
     }
     this.ary=ary;
     for (;z1<clds.length;z1++){
      if (clds[z1].nodeType==1){
       this.addevt(clds[z1],'mouseover','mse2',z1,3);
       this.addevt(clds[z1],'mouseout','mse2',z1,2);
       clds[z1].style.position='absolute';
       clds[z1].style.zIndex='2';
       clds[z1].style.left='0px';
       clds[z1].style.top='0px';
       this.opac(clds[z1],0);
       mary.push([clds[z1],0,'o'+z1,'lft'+z1,this.pos(mary.length)]);
      }
     }
     menu.style.visibility='hidden';
     this.mdes=['width','height','left','top'];
     this.menu=menu;
     this.mary=mary;
     this.lst=null;
     this.ms=typeof(ms)=='number'?ms:1000;
    }
    
    zxcImageBubble.prototype={
    
     mse2:function(nu,ud){
      if (this.ary[this.lst]){
       this.mse(this.lst,ud);
      }
     },
    
     mse:function(nu,ud){
      var oop=this,ary=oop.ary[nu],img=ary[0],d=ary[1],mdes=oop.mdes,mary=oop.mary,lft=0,z0=0;
      for (;z0<mdes.length;z0++){
       clearTimeout(oop['to'+nu+z0]);
       oop.animate(img,mdes[z0],parseInt(img.style[mdes[z0]]),ary[ud][z0],new Date(),oop.ms,'to'+nu+z0);
      }
      clearTimeout(oop['dly'+nu]);
      oop.animate(d,'top',parseInt(d.style.top),ary[ud][3]-d.offsetHeight,new Date(),oop.ms,'dly'+nu);
      d.style.top=ary[ud][3]-d.offsetHeight+'px'
      while (img.parentNode){
       lft+=img.offsetLeft;
       if (img.nodeName.toUpperCase()=='DIV'){
        break;
       }
       img=img.parentNode;
      }
      if (mary[nu]){
       oop.animate(oop.menu,'left',oop.menu.offsetLeft,mary[nu][4],new Date(),oop.ms,mary[nu][3]);
       clearTimeout(oop[mary[nu][2]]);
       mary[nu][0].style.zIndex=ud;
       oop.menu.style.visibility='visible';
       oop.animate(mary[nu],'o',mary[nu][1],ud==2?0:100,new Date(),oop.ms,mary[nu][2]);
       this.lst=nu;
      }
     },
    
     pos:function(nu){
      var ary=this.ary[nu],img=ary[0],lft=0;
      while (img.parentNode){
       lft+=img.offsetLeft;
       if (img.nodeName.toUpperCase()=='DIV'){
        break;
       }
       img=img.parentNode;
      }
      return lft+ary[2][0]-ary[3][0];
     },
    
     animate:function(obj,mde,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       if (mde!='o'){
        obj.style[mde]=now+'px';
       }
       else {
        obj[1]=now
        this.opac(obj[0],now);
       }
      }
      if (ms<mS){
       oop[to]=setTimeout(function(){ oop.animate(obj,mde,f,t,srt,mS,to); },10);
      }
      else {
       if (mde!='o'){
        obj.style[mde]=t+'px';
       }
       else if (t==0){
        oop.menu.style.visibility='hidden';
       }
      }
     },
    
     opac:function(obj,opc){
      obj.style.filter='alpha(opacity='+opc+')';
      obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
     }
    
    }
    
    
    /*]]>*/
    </script>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Init(){
    
    new zxcImageBubble({
     ULID:'orbs',    // the unique ID name of the parent UL.               (string)
     MenuID:'menu',  // the unique ID name of the menu parent DIV.         (string)
     MagBy:1.2,      //(optional) the image magnification.                 (number, default = 1)
     Animate:500     //(optional) the animation duration in milli seconds. (number, default = 1000)
    });
    
    }
    
    if (window.addEventListener){
     window.addEventListener('load',Init, false);
    }
    else if (window.attachEvent){
     window.attachEvent('onload',Init);
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div class="parent" >
    <ul id="orbs" class="bubblewrap">
     <li>
      <div class="tooltip" >Add to Stumbleupon</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Add to Stumbleupon" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Facebook</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Add to Facebook" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Digg</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Add to Digg" /></a>
     </li>
     <li>
      <div class="tooltip" >Add to Twitter</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="Add to Twitter" /></a>
     </li>
     <li>
      <div class="tooltip" >Add RSS Feed</div>
      <a href="http://dynamicdrive.com"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Add RSS Feed" /></a>
     </li>
    </ul>
    
    <div id="menu" class="menu" >
    <div class="page" >Menu 1</div>
    <div class="page" >Menu 2</div>
    <div class="page" >Menu 3</div>
    <div class="page" >Menu 4</div>
    <div class="page" >Menu 5</div>
    </div>
    </div>
    
    
    
    </body>
    
    </html>
    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/

  10. #10
    Join Date
    Feb 2012
    Location
    Denmark
    Posts
    66
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default I'm still lost.

    Hi again...

    I've tried looking at this again.. but I need help.
    I've been trying to work with positioning of menu and page... but it doesn't work.. so it must be further down the code, where I'm lost :'|

    When I hover over the first img the blue box apears too far to the right.

    I would like it to appear under the img I'm hovering over.

    I would allso like it to be possible to click on a link in the blue box.
    (As it is now, it dissapears, when I move the mouse.

    Can you help?

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
  •