Sv Community El Salvador
Soporte y Tecnología => Diseño & Webmaster Corner => Mensaje iniciado por: Reptile en enero 28, 2009, 01:54:46 pm
-
Tengo una duda
Estoy tratando de generar un comportamiento en Dreamweaver en el que al pasar el mouse sobre una opción del menú... el tamaño de la letra aumenta..
Lo he logrado con este código:
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_changeProp(objName,x,theProp,theValue) { //v6.0
var obj = MM_findObj(objName);
if (obj && (theProp.indexOf("style.")==-1 || obj.style)){
if (theValue == true || theValue == false)
eval("obj."+theProp+"="+theValue);
else eval("obj."+theProp+"='"+theValue+"'");
}
}
//-->
</script>
Y luego en la capa:
<div id="Layer1" onmouseover="MM_changeProp('Layer1','','style.fontSize','20','DIV')
"onmouseout="MM_changeProp('Layer1','','style.fontSize','14','DIV')"><a href="#" style="text-decoration:none">INICIO</a></div>
Y me va perfecto con IEx ... pero no con Firefox alguien sabe porque...? me he fijado que en el editor de comportamientos solo trae las opciones de IE3, IE4, y los NS... no veo FF será por eso?
Estoy usando Dw8...
Alguien le ha pasado esto con comportamientos? :sad:
-
Necesitas realmente esos "comportamientos"? (son propiedad de Microsoft... famosas "behaviours", archivos .htc)
Realmente eso lo podrias hacer con CSS sin tanta cosa, ej. (podes guardarlo com .htm y verlo funcionar en tu navegador favorito):
<style>
li{font-size: 20px}
li:hover{font-size: 40px}
</style>
<ul><li>Prueba</li></ul>
Asi todos los elementos de lista <li> tendrian ese efecto que podes
-
Mira.. por lo que entiendo... no te saldria mas facil hacerlo con CSS este pikete?? :unsure:
-
Mira.. por lo que entiendo... no te saldria mas facil hacerlo con CSS este pikete?? :unsure:
Pues puede ser, incluso hacerlo con flash es facilícimo.... pero me saltó la duda del porque no puedo; me parece muy raro.
Ya lo googlié y neles.
Tendría que ver como hacerlo con CSS... pero me queda la duda, la verdad que ocupo bastante los comportamientos y no me había percatado de este detalle asi que voy revisando ahora con los dos navegadores.
-
Pues puede ser, incluso hacerlo con flash es facilícimo.... pero me saltó la duda del porque no puedo; me parece muy raro.
Ya lo googlié y neles.
Tendría que ver como hacerlo con CSS... pero me queda la duda, la verdad que ocupo bastante los comportamientos y no me había percatado de este detalle asi que voy revisando ahora con los dos navegadores.
Lee esto:
http://www.maestrosdelweb.com/editorial/cssmenu/
-
Pase ese script a un archivo js externo y me corrio bien.
Si solo queres agrandar y hacer pequeño el texto una funcion asi de simple bastaria:
nombre archivo: f1.js
function agrandar()
{
var x=document.getElementById("layer1");
x.style.fontSize="20";
}
function enano()
{
var y=document.getElementById("layer1");
y.style.fontSize="16";
}
archivo html:1.html
<html>
<head>
<script languaje="javascript" src="f1.js" type="text/javascript">
</script>
</head>
<body>
<div id="layer1" onMouseOver="agrandar()" onMouseOut="enano()"><a href="#">INICIO</a></div>
</body>
</html>
-
que version de Firefox estas usando porq lo acabo de probar ese codigo q has puesto y funciona!!! :)
-
que version de Firefox estas usando porq lo acabo de probar ese codigo q has puesto y funciona!!! :)
Pues la 3!
Que raro... ya seguí mirando y no me funciona
El js externo me parece muy bueno, voy a probar asi también....
Alguien más a probado en Firefox y si le funciona??
-
Necesitas realmente esos "comportamientos"? (son propiedad de Microsoft... famosas "behaviours", archivos .htc)
Realmente eso lo podrias hacer con CSS sin tanta cosa, ej. (podes guardarlo com .htm y verlo funcionar en tu navegador favorito):
<style>
li{font-size: 20px}
li:hover{font-size: 40px}
</style>
<ul><li>Prueba</li></ul>
Asi todos los elementos de lista <li> tendrian ese efecto que podes
Odio insistir cuando me ignoran :D pero insisto en la recomendación... es mas, aplicandolo a tu caso bastaría con que pusieras al principio del <body> tu pagina esto:
<style>
#Layer1{font-size: 20px}
#Layer1:hover{font-size: 40px}
</style>
Y listo, con eso tu Layer1 hará lo que deseas que haga en cualquier navegador que soporte CSS (practicamente todos...)