0

Acabo de realizar un slider pero quiero colocarle un alert cuando el usuario le de clic a las imagenes, por ejemplo si da clic en la imagen uno que muestre un alert que diga esta es la imagen uno.

2
  • 1
    Por favor edita la pregunta y agrega el código correspondiente (como texto, no como imagen).
    – Shaz
    Commented el 17 oct. 2017 a las 2:10
  • Por favor indaga en lo que quieras hacer debido, hay multiples metodos para hacer lo que deseas los cuales facilmente pueden ser encontrados y de facil aprendizaje
    – Risa__B
    Commented el 17 oct. 2017 a las 2:31

4 respuestas 4

2

Pudieras añadir una etiqueta <span> y agregar un id descriptivo que quieras que se muestre en la alerta. Dentro de la etiqueta <span> agregar el atributo 'onclick' donde vas a colocar la alerta que quieras mostrar.

function alerta(variable){
  alert(variable.id)
}
<span id='imagen 1' onclick='alerta(this)'>
<img src="https://image.spreadshirtmedia.net/image-server/v1/mp/compositions/P120357271MPC139187015/views/1,width=300,height=300,appearanceId=1,backgroundColor=E8E8E8,version=1472099537/number-one-numero-uno-camisetas-camiseta-premium-hombre.jpg" width="128" height="128" >
</span>
<span id='imagen 2' onclick='alerta(this)'>
<img src="https://upload.wikimedia.org/wikipedia/commons/9/9f/2NumberTwoInCircle.png" width="128" height="128" >
</span>

1
  • es mucho mejor este ejemplo que el mio, recomiendo que uses el de @Cesar Romero
    – gama984
    Commented el 17 oct. 2017 a las 2:15
0

Trata esto,

Bueno te mando un ejemplo de como podrías hacer para mandar una alerte y decir que imagen es la que tienes, en la función del onclick='cambiar(1)' le puse una variable fija que la recupero en el script y la declaro para mandarla un alert, en tu caso le podrías poner en cada boton o también puedes ponerla variable depende de tus gustos

function cambiar(uno){
  var uno = uno;
  alert(uno)
}
<div>
<button type='button' id='button' onclick='cambiar(1)'>
SIGUIENTE IMAGEN
</button>

</div>

0

Esto es una variante de la que publica Cesar Romero. Sería lo mismo pero en este caso, el id no tendría espacios. Si las imagenes se van a crear mediante un patrón y van a ir con una identificación así, esto te puede ir muy bien.

function avisa_imagen(id){
    var aux = id.split("_");
    var id_imagen = aux[1];
    alert("Ha seleccionado la imagen " + id_imagen);
}
<img id="img_1" src="https://images-na.ssl-images-amazon.com/images/I/21oFf6dD1aL._SX355_.jpg" onclick="avisa_imagen(this.id)"/><br/>
<img id="img_2" src="http://www.handballdeprimera.com/wp-content/uploads/2012/08/2.jpg" onclick="avisa_imagen(this.id)"/>

Suerte y un saludo

0

Viendo las demás respuestas, solo te dan las ID, pero tú nunca pediste tal cosa.

Este código realiza lo que pides, que si clickeas la primera imagen (orden de izquierda a derecha) te mostrará el alert.

window.addEventListener("DOMContentLoaded",m)


function m(){
  var imgs = [" "];
  var contenedor = document.getElementById("contenedor");
  for(let i=0;i<contenedor.childNodes.length;i++){
    if(contenedor.childNodes[i].nodeName != 'IMG') continue;
    else imgs.push(contenedor.childNodes[i]);
  }
  for(let u=1;u<imgs.length;u++){
    imgs[u].addEventListener("click",function(){
      alert("La imagen clickeada es la número: "+u);
    });
  }
}
.small {
  width: 150px;
  height: 150px;
  border: 2px solid black;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="contenedor">
<img src="https://www.humanrightslogo.net/sites/default/files/HRLogoCMYKsmallRGB.png" class="small"/>
<img class="small" src="https://svbtleusercontent.com/tylerhayes_24609708604080_small.png"/>
<img class="small" src="https://fundraise.globalbrigades.org/media_gallery/thumb/320/0/Water_2014_Icon_Small.png"/>
  </div>
  </html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.