picture menu with vertical submenu dropdown [Archive]

View Full Version : picture menu with vertical submenu dropdown

Mejse78

06-29-2012, 09:21 AM

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 (http://www.dynamicdrive.com/dynamicindex4/imagebubbles.htm)

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.

☼

vwphillips

06-29-2012, 01:21 PM

<!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>

Mejse78

07-01-2012, 10:43 AM

Thanks for taking your time :D

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
☼

vwphillips

07-01-2012, 12:30 PM

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

<!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>

Mejse78

07-01-2012, 02:48 PM

Thank you SO much!
This looks really nead ☼

Mejse78

07-01-2012, 02:53 PM

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..
☼

Mejse78

07-01-2012, 03:22 PM

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

This is my HTML:

<!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>




<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>

Mejse78

07-01-2012, 03:22 PM

/* 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 { }

vwphillips

07-01-2012, 04:12 PM

<!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>

Mejse78

07-13-2012, 09:44 AM

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.
http://i1086.photobucket.com/albums/j447/Mejse78/menu.gif
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?

vwphillips

07-13-2012, 11:09 AM

please post a link to your page