Salve a tutti , con il generoso intervento del vostro illustre criric sono venuto in possesso di questo script :
ed è inutile dire che funziona benissimo, io desidero adesso che con un button la schermata si sostituisca con un'altra schermata di altre 9 immagini... il procedimento è simile o devo indirizzarmi ad altro... mi basta come riferimento anche un link da cui attingere informazioni... Provo sempre ad arrivarci prima da solo.
Grazie. Domenico.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function grande(img) {
var n = document.getElementsByTagName('img').length;
var elemento = document.getElementById(img);
for(var i = 1; i <= n; i++) {
if(img == "img" + i) {
elemento.style.width = 596 + "px";
elemento.style.height = 435 + "px";
}else{
document.getElementById("img" + i).style.display="none";
}
}
}
function piccola(img) {
var n = document.getElementsByTagName('img').length;
var elemento = document.getElementById(img);
for(var i = 1; i <= n; i++) {
if(img == "img" + i) {
elemento.style.width = 149 + "px";
elemento.style.height = 109 + "px";
}else{
document.getElementById("img" + i).style.display="inline";
}
}
}
</script>
<style type="text/css">
img {
width:149px;
height:109px;
margin: 0 15px;
} }
</style>
</head>
<body>
<div>
<img id="img1" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
<img id="img2" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
<img id="img3" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
</div>
<div>
<img id="img4" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
<img id="img5" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
<img id="img6" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
</div>
<div>
<img id="img7" src="dickinson.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
<img id="img8" src="newton.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
<img id="img9" src="Schopenhauer.jpg" onclick="grande(this.id);" ondblclick="piccola(this.id);" title="titolo" alt="testo alternativo" />
</div>
</body>
</html>ed è inutile dire che funziona benissimo, io desidero adesso che con un button la schermata si sostituisca con un'altra schermata di altre 9 immagini... il procedimento è simile o devo indirizzarmi ad altro... mi basta come riferimento anche un link da cui attingere informazioni... Provo sempre ad arrivarci prima da solo.
Grazie. Domenico.
