al passaggio del mouse, l'immagine diventa a colori

[Zambelletti]

Buon giorno, vorrei realizzare un effetto del genere, come da oggetto.


Consideraimo 9 immagini quadrate in b/n accostate, tali da formare un unica immagine.
Al passaggio del mouse su di una, diventa a colori


Non saprei come realizzarlo, potete darmi delle dritte?
Grazie!

[skeggia]

prova a vedere questo

http://www.extrowebsite.com/articoli-css/scambio-immagine-con-i-css.html

[Miss. Lin]

Ti indico alcuni esempi in JQuery:


http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/


http://tympanus.net/codrops/2010/11/16/hover-slide-effect/


http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/


http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/


http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/

[Zambelletti]

molto interessanti, grzie mille!
Gentilissimo, provo ad usarli e vi dico

[essedi]

A me sembra il classico caso denominato in gergo "rollover di immagini", ottenibile anche senza java script.

Qui sono descritti ed esemplificati tre metodi per ottenerlo.

Trattandosi di immagini rettangolari, può essere utilizzato anche il sistema di mappatura immagine descritto qui

[Zambelletti]

Ti indico alcuni esempi in JQuery:


http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/


http://tympanus.net/codrops/2010/11/16/hover-slide-effect/


http://tympanus.net/codrops/2011/11/22/hover-and-click-trigger-circular-elements/


http://tympanus.net/codrops/2012/08/08/circle-hover-effects-with-css-transitions/


http://tympanus.net/codrops/2012/06/18/3d-thumbnail-hover-effects/

al momento non è quello che intendevo, però siccome lo ritengo molto interessante...potresti linkare altre pagine del genere?
Grazie!

[Zambelletti]

A me sembra il classico caso denominato in gergo "rollover di immagini", ottenibile anche senza java script.

Qui sono descritti ed esemplificati tre metodi per ottenerlo.

Trattandosi di immagini rettangolari, può essere utilizzato anche il sistema di mappatura immagine descritto qui

Do uno sguardo con calma e ti dico, intanto grazie mille.

[essedi]

A me sembra il classico caso denominato in gergo "rollover di immagini", ottenibile anche senza java script.

Qui sono descritti ed esemplificati tre metodi per ottenerlo.

Trattandosi di immagini rettangolari, può essere utilizzato anche il sistema di mappatura immagine descritto qui

Come ti ha fatto presente Mirko di là, non limitarti a dare uno sguardo: leggi anche quello che c'è scritto.

Per la cronaca, nella pagina che ti aveva segnalato Mirko, era descritto esattamente quello che cercavi (mappatura di un'area poligogonale).


Do uno sguardo con calma e ti dico, intanto grazie mille.

[Zambelletti]

poi guardo tutto con calma

[Zambelletti]

A me sembra il classico caso denominato in gergo "rollover di immagini", ottenibile anche senza java script.

Qui sono descritti ed esemplificati tre metodi per ottenerlo.

Trattandosi di immagini rettangolari, può essere utilizzato anche il sistema di mappatura immagine descritto qui

Ciao, allora mi interesserebbe il metodo 2.
però non ho capito quale parte di codice utilizzare tra questi :


<style type="text/css">[/size]#sdImg2 {width: 120px; height: 80px; background: url("files/img1.png") no-repeat; position: absolute; left:2px; top:2px;} #sdImg2:hover {width: 240px; height: 160px; background: url("files/img3.png"); position: absolute; left: 2px; top:2px;} #sdImg3 {width: 120px; height: 80px; background: url("files/img1.png") no-repeat; position: absolute; left:2px; top:2px;} #sdImg3:hover {background: url("files/img2.png")} .sdImg00 {display: block; background: url("files/img0.png") no-repeat;}#sdImg02 {width: 120px; height: 80px; position: absolute; left: 2px; top: 2px; background-position: 0px -160px;} #sdImg02:hover {width: 240px; height: 160px; position: absolute; left: 2px; top: 2px; background-position: 0px 0px;} #sdImg03 {width: 120px; height: 80px; position: absolute; left: 2px; top: 2px; background-position: 0px -160px;} #sdImg03:hover {width: 120px; height: 80px; position: absolute; left: 2px; top: 2px; background-position: -120px -160px;} </style>


e come viene integrato con questo :
<a id="sdImg3"href="files/img3.png"title = "Ingrandisci foto"></a>







[/color]

[essedi]

Ciao, allora mi interesserebbe il metodo 2.
però non ho capito quale parte di codice utilizzare tra questi :


<style type="text/css">#sdImg2 {width: 120px; height: 80px; background: url("files/img1.png") no-repeat; position: absolute; left:2px; top:2px;} #sdImg2:hover {width: 240px; height: 160px; background: url("files/img3.png"); position: absolute; left: 2px; top:2px;} #sdImg3 {width: 120px; height: 80px; background: url("files/img1.png") no-repeat; position: absolute; left:2px; top:2px;} #sdImg3:hover {background: url("files/img2.png")} .sdImg00 {display: block; background: url("files/img0.png") no-repeat;}#sdImg02 {width: 120px; height: 80px; position: absolute; left: 2px; top: 2px; background-position: 0px -160px;} #sdImg02:hover {width: 240px; height: 160px; position: absolute; left: 2px; top: 2px; background-position: 0px 0px;} #sdImg03 {width: 120px; height: 80px; position: absolute; left: 2px; top: 2px; background-position: 0px -160px;} #sdImg03:hover {width: 120px; height: 80px; position: absolute; left: 2px; top: 2px; background-position: -120px -160px;} </style>


e come viene integrato con questo :
<a id="sdImg3"href="files/img3.png"title = "Ingrandisci foto"></a>

Dammi tempo fino a domani.

[Zambelletti]

ok, nel frattempo ti posto un immagine per farti capire cosa mi occorre

[Zambelletti]

Ecco, posto due immagini così spero di aiutare chi mi vuole aiutare, ovviamente è giusto il post di Esse Di, ho difficoltà a metterlo in pratica.


Allora l'immagine 1, non è stato passato il mouse e sono 4 immagini attaccate a margine 0 e in b/n.


Mentre la n° 2, è stato passato il mouse su di una.


Poi mi occorre che al cli, ci si apra una pagina del sito (lo so fare)


E' più chiaro?

[essedi]

 
Ipotesi di di base

 

• le 4 immagini normali si chiamano img1.jpg, img2.jpg, img3.jpg, img4.jpg
• le 4 immagini colorate si chiamano img1-h.jpg, img2-h.jpg, img3-h.jpg, img4-h.jpg (h sta per hover)
• tutte le immagini hanno dimensioni 120 x 80 pixel

Operazioni da effettuare

In Proprietà della Pagina, Scheda Esperto, Prima del tag </HEAD> inserisci queste righe
<style type="text/css">
.sdImg {float: left; width: 120px; height: 80px;}
#sdImg1 {background: url("files/img1.jpg")}
#sdImg1:hover {background: url("files/img1-h.jpg")}
#sdImg2 {background: url("files/img2.jpg")}
#sdImg2:hover {background: url("files/img2-h.jpg")}
#sdImg3 {background: url("files/img3.jpg")}
#sdImg3:hover {background: url("files/img3-h.jpg")}
#sdImg4 {background: url("files/img4.jpg")}
#sdImg4:hover {background: url("files/img4-h.jpg")}
</style>


Nella pagina inserisci due oggetti HTML, uno sull'altro, a cui assegni queste caratteristiche:
 

• Margine Esterno ed Interno uguale a zero
• Altezza 80 (la stessa delle immagini)
  

 
Nel primo oggetto HTML inserisci questo codice:
<a class = "sdImg" id="sdImg1" href="link1"> </a>
<a class = "sdImg" id="sdImg2" href="link2"> </a>
 
Nel secondo oggetto HTML inserisci questo codice:
<a class = "sdImg" id="sdImg3" href="link3"> </a>
<a class = "sdImg" id="sdImg4" href="link4"> </a>
 
link1, link2, link3, link4 sono gli indirizzi delle pagine a cui vuoi trasferire il controllo al click sulle singole immagini (questo hai detto che lo sai fare).

 Tutte le immagini vanno caricate nella cartella files tramite il comando "Aggiungi" della Scheda Esperto di un oggetto HTML.
 
Questo  sistema funziona, ma non è il migliore per ottener il tuo obiettivo. Meglio andrebbe il sistema di mappatura delle immagini tramite CSS, descritto qui


Un esempio dell'applicazione del sistema descritto può essere visto a questo indirizzo
http://www.essedi.altervista.org/_rollover/index.html


 
 

[Zambelletti]

mi sembra chiarissimo, dopo mi metto con calma e vedo.
Poi ti dico, intanto, grazie mille........vedo che hai fatto un codice per l'occasione.