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: Pepote21 en 07 de Junio 2017, 16:31
-
Hola a todos. Os dejo mi código del ejercicio CU01157E del curso básico de programación web con JavaScript usando Notepad++ como editor.
Gracias. Un saludo.
<!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">
function colorText(elemento,c){
elemento.style.color=c;
}
function colorFondo(elemento,c){
elemento.style.backgroundColor=c;
}
</script>
</head>
<body>
<p onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')"><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
<h1 onmouseover="colorText(this,'#FF9900')" onmouseout="colorText(this,'#993333')">Novedades</h1>
<p style="display:inline-block;" onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')">Aquí presentamos las novedades del sitio.</p>
<h3 onmouseover="colorText(this,'#FF9900')" onmouseout="colorText(this,'#993333')">Lanzamos el producto X-FASHION</h3>
<p style="display:inline-block;" onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')">Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')"><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
<h3 onmouseover="colorText(this,'#FF9900')" onmouseout="colorText(this,'#993333')">Mejoramos el producto T-MOTION</h3>
<p style="display:inline-block;" onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')">Hemos lanzado una nueva versión del producto T-MOTION</p>
<p onmouseover="colorFondo(this,'yellow')" onmouseout="colorFondo(this,'#FFFFFF')"><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>
-
Hola. Estoy repasando los eventos y rectifico el ejrcicio anterior.
Un saludo
<!DOCTYPE html>
<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(){
function cambiarColorText(){
this.style.color='orange';
}
function restaurarColorText(){
this.style.color='brown';
}
function cambiarColorFondo(){
this.style.backgroundColor='yellow';
}
function restaurarColorFondo(){
this.style.backgroundColor='';
}
var nodoH=document.querySelectorAll('h1,h3');
for (var i=0; i<nodoH.length; i++){
nodoH[i].onmouseover=cambiarColorText;
nodoH[i].onmouseout=restaurarColorText;
}
var nodoP=document.getElementsByTagName('p');
for (var i=0; i<nodoP.length; i++){
nodoP[i].onmouseover=cambiarColorFondo;
nodoP[i].onmouseout=restaurarColorFondo;
}
}
</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>
-
Buenas Pepote21, todo correcto
Salu2