1
Aprender a programar desde cero / Re:ejercicio CU01127E JavaScript getElementById y cambiar imagen al pulsar botón
« en: 03 de Diciembre 2014, 20:47 »
Hola Mario, el código para el punto 3. con los valores de src, alt y title definidos usando arrays, es el que he subido en el primer mensaje.
El punto 4. duplicando el body, no lo había subido. Es éste:
Muchas gracias por tus comentarios
El punto 4. duplicando el body, no lo había subido. Es éste:
Código: [Seleccionar]
<html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroImagenActual =9;
function moverImagen(movimiento) {
var valorsrc; var valoralt; var valortitle; valorsrc=[]; valoralt=[]; valortitle=[];
valorsrc[0]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
valorsrc[1]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
valorsrc[2]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
valoralt[0]='Camiseta 9 aprenderaprogramar.com'; valoralt[1]='Camiseta 6 aprenderaprogramar.com';valoralt[2]= 'Camiseta 11 aprenderaprogramar.com';
valortitle[0]='Diálogo entre informáticos'; valortitle[1]= 'Desbordado por los números'; valortitle[2]='Estudiando programacion';
if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
document.getElementById('imgCarrusel').src = valorsrc[0];
document.getElementById('imgCarrusel').alt = valoralt[0];
document.getElementById('imgCarrusel').title = valortitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
document.getElementById('imgCarrusel').src = valorsrc[1];
document.getElementById('imgCarrusel').alt = valoralt[1];
document.getElementById('imgCarrusel').title = valortitle[1];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
document.getElementById('imgCarrusel').src = valorsrc[2];
document.getElementById('imgCarrusel').alt = valoralt[2];
document.getElementById('imgCarrusel').title = valortitle[2];
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div></body></html>
Muchas gracias por tus comentarios