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
    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
    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
    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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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