immagine che si illumina al passaggio del mouse

[peter46]

Ciao, eccomi di nuovo a chiedere il Vostro prezioso aiuto.
Premetto che ho fatto ricerche in rete trovando materiale ma pultroppo non di mia comprensione.

Ho creato un sito con wordpress nel quale nella home ho due widget con due immagini che cliccandole aprono un sottodominio per le due specialità "tema del sito" pattinaggio artistico.

Vorrei ... se mi aiutate che quando passo sopra con il mouse ad una o l'altra immagine questa si illumini per aiutare la persona che stà navigando che se clicca può succedere qualcosa.

Questo il sito www.pattinaggioaltichiero.it e le immagini che mi interessano sono il logo dello "Stars' Group" e "Gruppi spettacolo Dream Dust"

Come potete vedere siamo appena partiti e mi piacerebbe poterlo personalizzare al meglio.

questo il codice che uso dentro il widget per caricare l'immagine

<div align="center"><a href="http://stars.pattinaggioaltichiero.it/" target="_blank"><img width="100%" src="http://pattinaggioartisticoaltichiero.provaprova.16mb.com/images/starsgroup.jpg"></a></div>

ciao pietro

[carlomarangoni]

<!--primo pulsante-->
<div align="center">
      <a href="http://stars.pattinaggioaltichiero.it/" target="_blank">
            <img width="100%" 
            src="http://pattinaggioartisticoaltichiero.provaprova.16mb.com/images/starsgroup.jpg"
            name="pic1" border="0"
            onmouseover="pic1.src='http://pattinaggioartisticoaltichiero.provaprova.16mb.com/images/starsgroup-over.jpg';"
            onmouseout="pic1.src='http://pattinaggioartisticoaltichiero.provaprova.16mb.com/images/starsgroup.jpg';">
      </a>
</div>
<!--secondo pulsante-->
<div align="center">
      <a href="http://stars.pattinaggioaltichiero.it/" target="_blank">
            <img width="100%" 
            src="immagine.jpg"
            name="pic2" border="0"
            onmouseover="pic2.src='immagine-over.jpg';"
            onmouseout="pic2.src='immagine.jpg';">
      </a>
</div>

[Vincent.Zeno]

oppure puoi lavorare coi filtri:
http://www.w3schools.com/css/css_image_transparency.asp

[bruno-]

[...]

Dimentico sempre opacity! Grazie mille.

[carlomarangoni]

Dimentico sempre opacity! Grazie mille.

E per quelli che non supportano i css3?

[Vincent.Zeno]

Dimentico sempre opacity! Grazie mille.

ricordati anche di filter

[peter46]

Ciao carlomarangoni ho provato ad incollare il codice che tu mi hai scritto nel tuo primo post. L'ho incollato all'interno del widget dove c'è l'immagine.
Si vede l'immagine, se passo sopra con il mouse l'immagine sparisce, il riquadro si ingrandisce. se clicco comunque mi porta al sottodominio

[carlomarangoni]

Ciao carlomarangoni ho provato ad incollare il codice che tu mi hai scritto nel tuo primo post. L'ho incollato all'interno del widget dove c'è l'immagine.
Si vede l'immagine, se passo sopra con il mouse l'immagine sparisce, il riquadro si ingrandisce. se clicco comunque mi porta al sottodominio

Ovvio che è un codice di esempio! Tu devi cambiare il nome delle immagini con il nome giusto e anche il percorso giusto! Anche il link deve essere verificato! È un codice che funziona senza alcun dubbio

[peter46]

Ciao sicuramente sbaglio io qualcosa ma quando tolgo il codice che c'era prima e incollo il tuo verificando che gli indirizzi siano esatti e che il nome della foto corrisponda con l'immagine caricata. Passo sopra con il mouse. L'immagine sparisce e la grafica trema.

Come detto sicuramemte sbaglio io ma non ho capito dove.

Ciao Pietro