Cambiar tamaño de capa con onmouseover

floyd_23 · #1 (**permalink**) 18/02/2011, 13:53

Hola,

Se que cada consulta que os hago es mas complicada que la anterior (nótese la ironía en mis palabras), pero por lo visto no doy para mas.

Tengo una capa, y me gustaría cambiar el tamaño de la capa y de la fuente al pasar el ratón por encima. Aquí os dejo la idea que tengo, y a ver si me podéis decir lo que falla, o directamente alguna otra idea.

Código HTML:

<html>
<head>
	<style type="text/css">
		.capa { position: absolute;
			top: 100px;
			left: 150px;
			width: 300px;
			height: 60px;
			background-color: orange;
			color: blue;
			font-family: arial;
			font-size: 12pt;
			border-style: solid;
			border-color: black;
			border-width: 2px;
		}
	</style>
	<script type="text/javascript">+
		function tamaño(){
			var conjunto = document.getElementById("capa");
			capa.width=600px;
			capa.height=120px;
			//capa.font-size=14pt;
		}
	</script>
</head>
<body>
	<div id="capa" onmouseover="tamaño()">CONTENIDO DE LA CAPA</div>
</body>
</html>

Saludos, y gracias de antemano.

omarMusic · #2 (**permalink**) 18/02/2011, 14:45

En primera no coloque caracteres especiales como 'ñ' o con acentos para los nombres de tus funciones, y corrigiendo tendrías:

Código Javascript:

Ver originalfunction cambiar(){
    var capa = document.getElementById("capa");
    capa.style.width="600px";
    capa.style.height="120px";
    capa.style.fontSize="14pt";
}

HTML:
<div id="capa" onmouseover="cambiar()">CONTENIDO DE LA CAPA</div>

Suerte!

floyd_23 · #3 (**permalink**) 18/02/2011, 15:13

Muchas gracias, seguiré tus consejos sobre los caracteres especiales.
Funciona perfectamente en Internet Explorer, pero en firefox no, supongo que usara otra sintaxis.

Una vez mas, muchas gracias.

Cita:

Iniciado por omarMusic

En primera no coloque caracteres especiales como 'ñ' o con acentos para los nombres de tus funciones, y corrigiendo tendrías:

Código Javascript:

Ver originalfunction cambiar(){
    var capa = document.getElementById("capa");
    capa.style.width="600px";
    capa.style.height="120px";
    capa.style.fontSize="14pt";
}

HTML:
<div id="capa" onmouseover="cambiar()">CONTENIDO DE LA CAPA</div>

Suerte!

omarMusic · #4 (**permalink**) 18/02/2011, 15:23

Que raro a mi me funciona perfecto en firefox, si es mi navegador predeterminado, talvez por la versión yo estoy con la 3.6.13.

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
    function cambiar(){
        var capa = document.getElementById("capa");
        capa.style.width="600px";
        capa.style.height="120px";
        capa.style.fontSize="10pt";
    }
</script>
<style type="text/css">
    .capa { position: absolute;
        top: 100px;
        left: 150px;
        width: 300px;
        height: 60px;
        background-color: orange;
        color: blue;
        font-family: arial;
        font-size: 12pt;
        border-style: solid;
        border-color: black;
        border-width: 2px;
    }
</style>
</head>
<body>
    <div id="capa" class="capa" onmouseover="cambiar()">CONTENIDO DE LA CAPA</div>
</body>
</html>

Saludos!

_cronos2 · #5 (**permalink**) 18/02/2011, 15:28

En principio, que yo sepa, si tienes el charset adecuado no debería haber problemas con ñ y acento, pero sí, es mejor usar carácteres "normales". Sin embargo a mí me funciona en FF, quizás sea porque en tu primer post hay un '+' detrás del tag script, y si no pues mira a ver qué te dice la consola de errores.
Saludos (:

floyd_23 · #6 (**permalink**) 18/02/2011, 16:08

La verdad es que yo tampoco lo entiendo.

Yo también uso la versión 3.6.13. En la consola de errores salta el siguiente error:

"cambiar is not defined"

Saludos.

_cronos2 · #7 (**permalink**) 18/02/2011, 16:16

Es lo que me pasó a mí porque al copiar y pegar tu código copié también el '+', comprueba que no esté porque tiene pinta de ser eso.
Saludos :D

floyd_23 · #8 (**permalink**) 18/02/2011, 16:27

Como dije en el primer post cuando realizaba mi consulta, por lo visto no doy para mas

.

Efectivamente es el '+'.

En fin, muchas gracias una vez mas.

enrique4480 · #9 (**permalink**) 18/02/2011, 16:29

para hacer solo eso ¿no seria mejor con css? quedaria mas limpio si quieres aplicarlo en mas de un sitio.

zerokilled · #10 (**permalink**) 18/02/2011, 16:43

Cita:

Iniciado por omarMusic

En primera no coloque caracteres especiales como 'ñ' o con acentos para los nombres de tus funciones...

aunque es de preferencia no utilizarlos, ese detalle realmente no tiene que ver nada. en javascript puedes escribir perfectamente cualquier caracter puesto que el lenguaje soporta internamente utf-16.