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.
-
1Por favor edita la pregunta y agrega el código correspondiente (como texto, no como imagen).– ShazCommented 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__BCommented el 17 oct. 2017 a las 2:31
4 respuestas
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>
-
es mucho mejor este ejemplo que el mio, recomiendo que uses el de @Cesar Romero– gama984Commented el 17 oct. 2017 a las 2:15
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>
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
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>