Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

GustavoD3

menu legal

Por , em Flash, ActionScript e tecnologias Adobe

Recommended Posts

GustavoD3    0

GustavoD3
Postado

uma vez vi um post aqui que não consegui localizar, trata-se de um menu que ganha um zoom gradual no onMouse ouver, assim, no onMouseOver a imagem amplia.... nãoé um mouseover simples pq a imagem "vai cresendo" nao tenho um exemplo..... valeu

Compartilhar este post

Link para o post
Compartilhar em outros sites

alebae    0

alebae
Postado

Bom, "analisando" http://forum.imasters.com.br/public/style_emoticons/default/blush.gif o código-fonte da página, chegamos:

 

Entre as tag's <head></head>, você insere:

<style type="text/css"> 
	html {
		overflow: hidden;
	}
	body {
		background: #fff;
		width: 98%;
		height: 100%;
	}
	#dock {
		position: absolute;
		bottom: 1em;
		width: 100%;
		text-align: center;
		left: 0px;
	}
	#dock a:visited{
		text-decoration: none;
	}
	#dock a{
		text-decoration: none;
		margin: -2px;
	}
	#dock img {
		border: none;
		width: 0px;
	}
	#legend {
		position: absolute;
		bottom: 0px;
		width: 100%;
		text-align: center;
		font-family: arial;
		font-weight: bold;
		font-size: 1em;
		color: #000;
	}
</style>

Continuando, dentro das tag's <head></head>

<script type="text/javascript"><!--
// ================================================================
//				   ------ dock menu -------
// script by Gerard Ferrandez - Ge-1-doot - February 2006
// http://www.dhteumeuleu.com
// ================================================================
 
var xm = xmb = ov = 0;
var M = true;
 
function dock(dock, sMin, sMax)
{
	this.icons = document.getElementById(dock).getElementsByTagName('img');
	this.N = this.icons.length;
	this.s = sMin;
	this.ovk = 0;
	this.pxLeft = function(o)
	{
		for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
		return x;
	}
	for(var i=0;i<this.N;i++)
	{
		with(this.icons[i])
		{
			style.width = sMin+"px";
			style.height = sMin+"px";
			className = "dockicon";
		}
	}
	this.run = function()
	{
		with(this)
		{
			for(var i=0;i<N;i++)
			{
				var o = icons[i];
				var W = parseInt(o.style.width);
				if(ov && ov.className=="dockicon")
				{
					if(ov!=ovk)
					{
						ovk=ov;
						document.getElementById("legend").innerHTML = ov.lang;
					}
					if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
					s = Math.min(sMax,s+1);
				}
				else
				{
					s = Math.max(s-1,sMin);
					W = Math.max(W-N,sMin);
				}
				o.style.width = W+"px";
				o.style.height = W+"px";
			}
			if(s >= sMax) M = false;
		}
	}
}
document.onmousemove = function(e)
{
	if(window.event) e=window.event;
	xm = (e.x || e.clientX);
	if(xm!=xmb){
		M = true;
		xmb = xm;
	}
	ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
}
window.onload = function()
{
	dock = new dock("dock", 48, 128);
	setInterval("dock.run()", 16);
}
//--> 
</script>

Por fim, entre as tag's <body></body>

<div id="dock"> 
	<a href="http://www.dhteumeuleu.com/" target="_blank"><img src="../images/Home.gif" lang="Home"></a> 
	<a href="http://www.kalifrogz.net/" target="_blank"><img src="../images/My Computer.gif" lang="My Computer"></a> 
	<a href="http://www.marathon-medoc.com/marathon-fun-medoc-2.html" target="_blank"><img src="../images/Books.gif" lang="Files"></a> 
	<a href="http://ecolejda.org/" target="_blank"><img src="../images/Applications.gif" lang="Applications"></a> 
	<a href="http://www.kentdesign1.com/art/picture_gallery/gallery_experiments.html" target="_blank"><img src="../images/Chat.gif" lang="Chat"></a> 
	<a href="http://www.armenweb.org/dhteumeuleu/5.htm" target="_blank"><img src="../images/Sound App.gif" lang="Sound"></a> 
	<a href="http://www.myartonair.com/2.htm" target="_blank"><img src="../images/Printers.gif" lang="Printers"></a> 
	<a href="http://www.mafra.fot.br/" target="_blank"><img src="../images/Trash Full.gif" lang="Trash"></a> 
	<a href="http://www.z-mation.com/grumpsopt.html" target="_blank"><img src="../images/Help.gif" lang="Help"></a> 
</div> 
<div id="legend"></div>

Somente altere o caminho das imagens http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Flash, ActionScript e tecnologias Adobe
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito