ingrandire le immagini con click del mouse
Scusatemi, questa non è una risposta, ma la semplice volontà di chiarire meglio il mio precedente.
Ho la necessità di far ingrandire una immagine mediante cliccaggio della stessa con il mouse. Ho cercato di fare come sopra specificato.
Non ho ottenuto alcun risultato.
C'è qualcuno che ha la cortesia (e la pazienza) di prendermi per mano e di darmi le indicazioni necessarie?
GRazie a tutti.
Ciao
Silvano
variazione al passaggio del mouse
Sono sempre io.
mi sono ricordato di avere questo codice che ti permette di variare le dimensioni delle foto al passaggio del mouse.
Basta una foto della misura grande, scrivi width="ww" height="hh" con i numeri che vuoi e il gioco è fatto, (metti anche il nome delle foto), l'esempio ha due foto e due testi come origini ma puoi modificarlo a tuo piacimento, ti avevo scritto anche ieri sera ma si è perso il messaggio o non l'ho mandato.
Ciao.
A onor del vero il codice Style andrebbe nel Head ma funziona anche se lo metti in body
Resto in attesa di vedere i sito modificato
CODICE DA METTERE IN: AGGIUNGI UN NUOVO ELEMENTO <HTML>:
Codice HTML:
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*carateristiche dell'immagine ingandita e del testo relativo*/
position: absolute;/* mettere: relative invece di absolute per dare una posizione relativa alla foto piccola*/
background-color: lightyellow;/*colore sfondo della foto*/
padding: 5px;/*cornice*/
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*caratteristiche dell'img ingrandita*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*posizione dell'img ingrandita*/
visibility: visible;
top: 100;/*posizione verticale dell'img */
left: 60px; /*posizione orizzontale dell'img */
}
</style>
<a class="thumbnail" href="#thumb"><img src="bimbo.jpg" width="100" height="66" border="0" ><span><img src="bimbo.jpg" width="100" height="66"><br />Nome Foto 1</span></a>
<br/>
<a class="thumbnail" href="#thumb"><img src="FOTO2.jpg" width="100" height="66" border="0" ><span><img src="FOTO2.jpg" width="100" height="66"><br />Nome Foto 2</span></a>
<br />
<a class="thumbnail" href="#thumb">punto 3<span><img src="FOTO3.jpg" width="100" height="66" border="0" ><br />Nome Foto 3</span></a><br />
<br />
<a class="thumbnail" href="#thumb">Punto 4<span><img src="FOTO4.jpg" width="100" height="66" border="0" ><br />Nome Foto 4</span></a>