Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: pedro,, en 06 de Noviembre 2015, 11:04
-
Hola dejo la siguiente solución al ejercicio CU01157E del tutorial de programación web JavaScript desde cero:
EJERCICIO
A partir del siguiente código HTML, crea un script que cumpla los requisitos indicados más abajo:
a) Mediante el control de los eventos onmouseover y onmouseout, debemos hacer que cuando el usuario pase el ratón sobre las etiquetas h1 y h3, el color del texto pase a ser orange y cuando deje de pasarlo el texto quede en marrón.
b) Mediante el control del evento onmouseover, debemos hacer que cuando el usuario pase el ratón sobre un párrafo, el color de fondo del párrafo sea amarillo y cuando deje de pasarlo no haya color de fondo.
c) El código JavaScript debe estar situado entre las etiquetas <head> … </head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
var elementosH = document.querySelectorAll('h1,h3');
var elementosP = document.querySelectorAll('p');
for(var i = 0; i < elementosH.length; i++){
elementosH[i].onmouseover = onMouseOverCambioTextoColor;
elementosH[i].onmouseout = onMouseOutCambioTextoColor;
}
for(var i = 0; i < elementosP.length; i++){
elementosP[i].onmouseover = onMouseOverCambioFondoColor;
elementosP[i].onmouseout = onMouseOutCambioFondoColor;
}
function onMouseOverCambioTextoColor(){return this.style.color = 'orange';}
function onMouseOutCambioTextoColor(){return this.style.color = 'brown';}
function onMouseOverCambioFondoColor(){return this.style.backgroundColor = 'yellow';}
function onMouseOutCambioFondoColor(){return this.style.backgroundColor = 'transparent';}
}
</script>
</head>
<body> <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
<h3>Lanzamos el producto X-FASHION</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>
Saludos.
-
Hola Pedro, ejercicio interesante y muy bien resuelto por tu parte. En lugar de embeber el código de respuesta javascript en el html, asociamos el código de respuesta cuando se produce el evento onload sobre window, es decir, cuando carga la página. Esto te permite dotar de más independencia al código html. Poco que comentar, hace todo lo que se pedía y bien.
Saludos