Cita:
Iniciado por javier_u 
Gracias satanson. Lo he estado intentando pero el ejemplo de Alexis no lo sé aplicar. No sé nada de html mi de javascript.
Ésta es la solución de Alexis:
Código Javascript
:
Ver original<img src = "imagen1.jpg" class = "foo" />
<img src = "imagen2.jpg" class = "foo" />
<img src = "imagen3.jpg" class = "foo" />
<button id = "bar">Cambiar tamaño de imágenes</button>
Código Javascript
:
Ver originalvar boton = document.querySelector("#bar"),
imagenes = document.querySelectorAll(".foo"),
total = imagenes.length;
boton.addEventListener("click", function(){
for (var i = 0; i < total; i++){
if (getComputedStyle(imagenes[i]).maxWidth == "400px"){
imagenes[i].style.maxWidth = "120px";
}
else{
imagenes[i].style.maxWidth = "400px";
}
}
}, false);
Le estoy dando vueltas pero no sé cómo escribir éste código para mi ejemplo:
Código Javascript
:
Ver original<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo- FDW</title>
<script>
function big_img(){
var img=document.getElementById('img-p');
if(img.style.maxWidth=="400px"){
img.style.maxWidth="120px";
}else{
img.style.maxWidth="400px";
}
}
</script>
</head>
<body>
<div>
<button id = "bar" onclick="big_img(this)">Cambiar tamaño de imágenes</button>
</div>
<img " id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver">
<img " id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">
</body>
</html>
Si alguien puede decirme se lo agradezco mucho. Un saludo.
Prueba asi:
Código HTML:
Ver original<!DOCTYPE html>
#img-p{
max-width: 120px;
}
function big_img(){
var img=document.getElementById('img-p');
if(img.style.maxWidth=="400px"){
img.style.maxWidth="120px";
}else{
img.style.maxWidth="400px";
}
}
<button id="bar" onclick="big_img();">Cambiar tamaño de imágenes
</button>
<img id="img-p" src="http://www.absolut-canada.com/wp-content/uploads/2009/09/pesca-en-quebec.jpg" title="Click para ver"> <img id="img-p" src="http://static3.absolutcaribe.com/wp-content/uploads/2009/09/playa-placencia.jpg" title="Click para ver">
