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: bermartinv en 23 de Noviembre 2016, 11:32
-
Hola chicos, necesito una ayuda.
Tengo el siguiente código que hace que cuando el usuario quiera se muestre un texto o se oculte, pero también quiere que cambie la imagen, cuando no está el texto la imagen tiene unas flechas hacia abajo y cuando está el texto tiene unas flechas hacia arriba. Si que consigo que aparezca el texto cuando yo quiero pero quiero cambiar la imagen y no consigo ver cómo hacerlo.
<div class="pulsador">
<p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
<div class="pulsador">
<p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
<div class="pulsador">
<p>Ejemplo <img class="flecha" src="...."></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
Y el código Javascript que tengo
window.onload = function(){
mostrar();
}
function mostrar(){
var items, show , imagenes;
show = false;
items = document.querySelectorAll(".pulsador");
imagenes = document.querySelectorAll(".flecha");
for ( var i = 0 ; i < items.length ; i++){
items[i].addEventListener("click",aparecer);
}
function aparecer(){
if (show == false){
this.nextElementSibling.style.display = "block";
show = true;
}else{
this.nextElementSibling.style.display = "none";
show = false;
}
}
}
-
Hola bermartinv, cuanto tiempo sin leerte.
Si no te he entendido mal, esto te valdrá, usé dos imagenes al azar, pruebaló:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com JavaScript CU01188E</title>
<meta charset="utf-8">
<script>
window.onload = function(){
mostrar();
}
function mostrar(){
var items, show , imagenes;
show = false;
items = document.querySelectorAll(".pulsador");
imagenes = document.querySelectorAll(".flecha");
for ( var i = 0 ; i < items.length ; i++){
items[i].addEventListener("click",aparecer);
}
function aparecer(){
if (show == false){
this.nextElementSibling.style.display = "block";
this.firstChild.nextSibling.firstElementChild.src = 'https://cdn.pixabay.com/photo/2014/01/29/05/49/right-254097_960_720.png';
console.log(this.firstChild.nextSibling.firstElementChild);
show = true;
}else{
this.nextElementSibling.style.display = "none";
this.firstChild.nextSibling.firstElementChild.src = 'http://1.bp.blogspot.com/-FS6YXyFZVGU/T2FBP8QSLaI/AAAAAAAAAVs/ONlVGeQ7jG4/s400/flecha-izquierda.png';
show = false;
}
}
}
</script>
</head>
<div class="pulsador">
<p>Ejemplo <img class="flecha" alt="soy una flecha" src="http://1.bp.blogspot.com/-FS6YXyFZVGU/T2FBP8QSLaI/AAAAAAAAAVs/ONlVGeQ7jG4/s400/flecha-izquierda.png" width="60"></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
<div class="pulsador">
<p>Ejemplo <img class="flecha" alt="soy una flecha" src="http://1.bp.blogspot.com/-FS6YXyFZVGU/T2FBP8QSLaI/AAAAAAAAAVs/ONlVGeQ7jG4/s400/flecha-izquierda.png" width="60"></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
<div class="pulsador">
<p>Ejemplo <img class="flecha" alt="soy una flecha" src="http://1.bp.blogspot.com/-FS6YXyFZVGU/T2FBP8QSLaI/AAAAAAAAAVs/ONlVGeQ7jG4/s400/flecha-izquierda.png" width="60"></p>
</div>
<div class="texto">
<p>Aquí pongo el texto</p>
</div>
</body>
</html>
Saludos. ;D
-
Muchas gracias Pedro,,
funciona perfecto ;)