<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
.x1 {} .x1-5 {zoom:1.5;} .x1-8 {zoom:1.8;} .x2 {zoom:2;}
.selected {background-color:#808080;border-color:#808080;}
</style>
</head>
<body>
<p>
<input type="button" value="x1" class="selected">
<input type="button" value="x1.5">
<input type="button" value="x1.8">
<input type="button" value="x2">
</p>
<p>
<img src="https://image.ibb.co/fUL9nS/wolf.png" id="img">
</p>
</body>
</html>
<script>
const inputs=document.querySelectorAll("input");for(input of inputs) {
// Definimos el evento click para cada botón
input.addEventListener("click",function(e) {
// Quitamos los estilos a cada boton
for(input of inputs) { input.className="";
}
// Ponemos el estilo de "selected" al botón seleccionado
e.srcElement.className="selected";
// Ponemos el class de zoom a la imagen
// Reemplazamos el . por el -, ya que no puede haber puntos en los nombre de las clases de css
document.getElementById("img").className=e.srcElement.value.replace(".","-"); });
}
</script>
Crear cuenta
Comentarios sobre la versión: Utilizando clases de CSS (0)
No hay comentarios