...

View Full Version : Where can I find this script of very similar script?



neex1233
11-10-2010, 04:32 AM
On this website: http://evancoleman.net/index.php
I really like on the top how the menu has like 5 or 6 icons, and when you hover over them it shows a bubble with the name in them. Does anybody know where I can find this script? Thanks.

Philip M
11-10-2010, 08:40 AM
Search this forum or Google for tooltips.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Kor
11-10-2010, 09:09 AM
Does anybody know where I can find this script?
You should ask yourself how can you code a script like that, not where you can find a script. You should first learn JavaScript, and after that you may analyze whichever code, use it, change it or write one of your own. Finding a script is not enough. You should understand how is written and how to use it.

vwphillips
11-10-2010, 09:09 AM
<!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[*/

#menu {
position:relative;
}

#menu IMG{
margin-Right:20px;
}

#tooltip {
position:absolute;overflow:hidden;left:0px;top:35px;width:60px;height:45px;border:solid black 0px;
background-Image:url(http://themes.nimblehost.com/rw_common/themes/NimbleHostThemes-v2/images/head.png);
background-Repeat:none;
}

#tooltip DIV{
position:absolute;left:10px;top:18px;
}

/*]]>*/
</style>
<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.

// **** Application Notes

// **** The HTML Code
//
// when moving an element the inline or class rule style position of the element should be assigned as
// 'position:relative;' or 'position:absolute;'
//
// The element would normally be assigned a unique ID name.
//

// **** Initialising the Script.
//
// The script is initialised by assigning an instance of the script to a variable.
// e.g A = new zxcAnimate('left','id1')
// where:
// A = a global variable (variable)
// parameter 0 = the mode(see Note 1). (string)
// parameter 1 = the unique ID name or element object. (string or element object)
// parameter 1 = the initial value. (digits, default = 0)

// **** Executing the Effect
//
// The effect is executed by an event call to function 'A.animate(10,800 ,5000,[10,800]);'
// where:
// A = the global referencing the script instance. (variable)
// parameter 0 = the start value. (digits, for opacity minimum 0, maximum 100)
// parameter 1 = the finish value. (digits, for opacity minimum 0, maximum 100)
// parameter 2 = period of time between the start and finish of the effect in milliseconds. (digits or defaults to previous or 0(on first call) milliSeconds)
// parameter 3 = (optional) to scale the effect time on a specified minimum/maximum. (array, see Note 3)
// field 0 the minimum value. (digits)
// field 1 the maximum value. (digits)
// parameter 3 = (optional) the type of progression, 'sin', 'cos' or 'liner'. (string, default = 'liner')
// 'sin' progression starts fast and ends slow.
// 'cos' progression starts slow and ends fast.
//
// Note 1: Examples modes: 'left', 'top', 'width', 'height', 'opacity.
// Note 2: The default units(excepting opacity) are 'px'.
// For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
// Note 3: The scale is of particular use when re-calling the effect
// in mid progression to retain an constant rate of progression.
// Note 4: The current effect value is recorded in A.data[0].
// Note 5: A function may be called on completion of the effect by assigning the function
// to the animator intance property .Complete.
// e.g. [instance].Complete=function(){ alert(this.data[0]); };
//



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
this.to=null;
this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
this.mde=mde.replace(/\W/g,'');
this.data=[srt||0];
return this;
}

zxcAnimate.prototype={

animate:function(srt,fin,ms,scale,c){
clearTimeout(this.to);
this.time=ms||this.time||0;
this.neg=srt<0||fin<0;
this.data=[srt,srt,fin];
this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
this.inc=Math.PI/(2*this.mS);
this.srttime=new Date().getTime();
this.cng();
},

cng:function(){
var oop=this,ms=new Date().getTime()-this.srttime;
this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
this.apply();
if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
else {
this.data[0]=this.data[2];
this.apply();
if (this.Complete) this.Complete(this);
}
},

apply:function(){
if (isFinite(this.data[0])){
if (this.data[0]<0&&!this.neg) this.data[0]=0;
if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
else zxcOpacity(this.obj,this.data[0]);
}
}

}

function zxcOpacity(obj,opc){
if (opc<0||opc>100) return;
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>



</head>

<body>
<div id="menu" >
<img src="http://evancoleman.net/images/home.png" />
<img src="http://evancoleman.net/images/products.png" />
<img src="http://evancoleman.net/images/donate.png" />
<img src="http://evancoleman.net/images/blog.png" />
<img src="http://evancoleman.net/images/contact.png" />
<img src="http://evancoleman.net/images/about.png" />
<div id="tooltip" >
<div>Home</div>
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/

function Menu(o){
var menu=document.getElementById(o.MenuID);
var imgs=menu.getElementsByTagName('IMG');
this.items=[];
for (var ary=o.MenuItems,z0=0;z0<imgs.length;z0++){
this.items[z0]=[imgs[z0].offsetLeft,ary[z0][0]||'',ary[z0][1]||0];
this.addevt(imgs[z0],'mouseover','slide',z0);
}
var tooltip=document.getElementById(o.ToolTipID);
this.txt=tooltip.getElementsByTagName('DIV')[0];
var lft=this.items[0][0];
tooltip.style.left=lft+'px';
tooltip.style.width=this.items[0][2]+'px';
this.txt.innerHTML=this.items[0][1];
this.tooltip=new zxcAnimate('left',tooltip,lft);
this.ms=o.Duration||500;
}


Menu.prototype={

slide:function(nu){
this.tooltip.animate(this.tooltip.data[0],this.items[nu][0],this.ms);
this.tooltip.obj.style.width=this.items[nu][2]+'px';;
this.txt.innerHTML=this.items[nu][1];
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p); });
}


}
new Menu({
MenuID:'menu',
ToolTipID:'tooltip',
MenuItems:[
['Home',55],
['Products',75],
['Donate',65],
['Blog',50],
['Contact',70],
['About',60]
],
Duration:500
});
/*]]>*/
</script>
</body>

</html>

neex1233
11-11-2010, 03:45 PM
Thanks! But I have one problem. If you look at the image I attached, the bubble has no tail. I've been trying to fix this but I can't.

Old Pedant
11-11-2010, 07:29 PM
To add a tail, you have to have an image of the tail and then you just have to position it relative to the main tooltip box.

It's not hard to do, and if Vic is feeling his overly-generous self, maybe he'll do it for you. But if you really want to do a lot of stuff like this, maybe it's time to learn JavaScript, as Kor said.

vwphillips
11-12-2010, 10:08 AM
if you are refering to the triangle pointing at the icon this is part of the tootip background image

Rangers
11-12-2010, 04:36 PM
Nice Script. How can you add links for each of these icons?

Old Pedant
11-12-2010, 07:12 PM
Nice Script. How can you add links for each of these icons?

?? Same way it's been done since 1996 or so.

<a href="url you want to link to"><img ...></a>

Add some CSS to style it the way you like and done.

Did you mean something different??

Old Pedant
11-12-2010, 07:14 PM
if you are refering to the triangle pointing at the icon this is part of the tootip background image

?? Really? I didn't look at the code. I just assumed it would need to be a separate image to accomodate the stretching/squeezing, else the size of the triangle would vary.

connollyc4
11-12-2010, 07:27 PM
Nice Script. How can you add links for each of these icons?

Two thinks you will need to do...

add this to your css (in the <head> section)

a { text-decoration:none }

and change the part with the images to this...



<a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/home.png" />
<a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/products.png" />
<a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/donate.png" />
<a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/blog.png" />
<a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/contact.png" />
<a href="whatever1.html"><img border="0" img src="http://evancoleman.net/images/about.png" />



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum