View Full Version : [HTML] Cambio immagine al passaggio del mouse
OrcaAssassina
30-08-2006, 20:41
Ho una tabella. Uso FRONRPAGE 2003
Ad ogni casella ho associato una immagine di fondo
Come faccio a far caricare un'altra immagine al passaggio sopra del mouse ????
L'immagine è 06.gif al passaggio vorrei 062.gif
<td background="images/06.gif">.: Normativa</td>
</tr>
<tr>
<td background="images/06.gif">.: Turni</td>
</tr>
<tr>
<td background="images/06.gif">.: Vademecum</td>
</tr>
<tr>
<td background="images/06.gif">.: Sicurezza</td>
</tr>
Ciao e grazie
prova a informarti un po' sull' evento "onmouseover"
anche con i CSS volendo...
a:hover ;)
OrcaAssassina
31-08-2006, 23:09
Non sono molto preparato, ma senza farlo sul CSS, è possibile farlo direttamente per ogni casella del menù??
Ad ogni casella ho associato una immagine di fondo
Come faccio a far caricare un'altra immagine al passaggio sopra del mouse ????
L'immagine è 06.gif al passaggio vorrei 062.gif
In giro ho visto questo:
onMouseOver="javascript: this.style=background-image: url('<path>');"
Qui sotto c'è il mio codice....qualcuno sa unirmi il tutto, cosi lo provo
<td background="images/06.gif">.: Normativa</td>
</tr>
<tr>
<td background="images/06.gif">.: Turni</td>
</tr>
<tr>
<td background="images/06.gif">.: Vademecum</td>
</tr>
<tr>
<td background="images/06.gif">.: Sicurezza</td>
</tr>
Ciao e grazie
Se usi JavaScript il sito sarà inutilizabile se il browser ha JavaScript disabilitato. Il modo giusto di risolvere il problema è usare i css e :hover. Un piccolo esempio.
<style>
.td-speciale {
background-image: url(immagine-normale.jpg);
}
.td-speciale:hover {
background-image: url(immagine-con-il-mouse-sopra.jpg);
}
</style>
<tr>
<td class="td-speciale">Bla bla bla</td>
<td class="td-speciale">Bla bla bla 2</td>
</tr>
ciao ;)
OrcaAssassina
01-09-2006, 00:11
Se usi JavaScript il sito sarà inutilizabile se il browser ha JavaScript disabilitato. Il modo giusto di risolvere il problema è usare i css e :hover. Un piccolo esempio.
<style>
.td-speciale {
background-image: url(immagine-normale.jpg);
}
.td-speciale:hover {
background-image: url(immagine-con-il-mouse-sopra.jpg);
}
</style>
<tr>
<td class="td-speciale">Bla bla bla</td>
<td class="td-speciale">Bla bla bla 2</td>
</tr>
ciao ;)
Devo creare un file "style.css"
e copiare quello che tu hai scritto
Poi nella pagina dove lo voglio usare lo richiamo con:
class="td-speciale"
Fammi sapere
Certo se vuoi puoi inserirlo in un file .css pero devi ricordarti di inserire il link al file in <head> altrimenti poi trova la classe.
ciao ;)
ovviamente ci vuole il
<link href="stili.css" type="text/css" rel="stylesheet">
:)
OrcaAssassina
01-09-2006, 11:05
Invece l'esempio che mi aveva scritto VICIUS.
Lo posso mettere direttamente sulla pagina senza usare CSS????
<style>
.td-speciale {
background-image: url(immagine-normale.jpg);
}
.td-speciale:hover {
background-image: url(immagine-con-il-mouse-sopra.jpg);
}
</style>
<tr>
<td class="td-speciale">Bla bla bla</td>
<td class="td-speciale">Bla bla bla 2</td>
</tr>
VegetaSSJ5
01-09-2006, 13:46
Lo posso mettere direttamente sulla pagina senza usare CSS????
si
Lù-Killer
05-09-2006, 21:04
scusate se mi intrometto ...io vorrei un immagine che quando ci passo sopra con il puntatore parte una suono...mi serve x un sito con Html
quale è il codice ?
scusate se mi intrometto ...io vorrei un immagine che quando ci passo sopra con il puntatore parte una suono...mi serve x un sito con Html
quale è il codice ?
Nn credo proprio che si possa a meno che esista qualcosa in javascript...
ma sono quasi certo che non puoi
Lù-Killer
05-09-2006, 21:16
grazie :cry:
Lù-Killer
05-09-2006, 21:45
trovatooooooooo
siiiiiiiiiii
esiste
trovatooooooooo
siiiiiiiiiii
esiste
puoi postare il codice?
Lù-Killer
06-09-2006, 15:52
vai qui --> http://www.htmlscriptweb.com/esempiscript.htm#19
sezione Multimedialità
vai qui --> http://www.htmlscriptweb.com/esempiscript.htm#19
sezione Multimedialità
va solo se hai quick time installato e solamente con Internet Explorer...
trovatooooooooo
siiiiiiiiiii
esiste
ue' ma te di fare cose un po' più compatibili mai eh? :D
Lù-Killer
07-09-2006, 01:26
va solo se hai quick time installato e solamente con Internet Explorer...
quik time lo hanno tutti...si spera...poi x IE io uso quello per Fox non sò
quik time lo hanno tutti...si spera...poi x IE io uso quello per Fox non sò
il 20% almeno delle persone che navigano non hanno Quick Time e più del 30% sicuramente usano firefox....
dipende se la cosa la usi solo tu o no...
quik time lo hanno tutti...si spera...poi x IE io uso quello per Fox non sò
Quick Time lo hanno tutti???
mmmm
mi sa che ti conviene rivedere un po' le tue convinzioni.
Sul 30% che usa firefox avrei qualche dubbio, diciamo che potrebbe esserci un 30% che non usa Internet explorer
Sul 30% che usa firefox avrei qualche dubbio, diciamo che potrebbe esserci un 30% che non usa Internet explorer
in qualunque caso una bella percentuale lavora su FF
Devo ricredermi un po'
Non sapevo di una crescita così sostenuta di FF nell'ultimo anno
http://www.w3schools.com/browsers/browsers_stats.asp
Mi accodo a questa vecchia discussione visto che ho un problema simile e vorrei sapere se c'è un modo per usare i css con A:HOVER senza usare le tabelle.
Per chi non volesse leggere tutta la discussione faccio un rapido riepilogo del problema:
Ho una parte di codice PHP/CSS e dei link sotto forma di immagini, vorrei che le immagini cambiassero al passaggio o al click del mouse:
Vi posto direttamente la parte di codice "incriminata" che è la cosa più semplice. Visto che ho letto un pò la teoria ma non sono riuscito a risolvere potreste gentilmente farmi un esempio direttamente sul mio codice? Grazie
Questo è parte del file php:
...
<div class="MenuSup">
<img src="immagini/SpaziatoreMenuSup.png" border="0" width="20" height="50">
<a href="Home.php" title="Torna alla homepage" ><img src="immagini/Home.png" alt="Homepage" border="0" width="80" height="50"></a>
<a href="Contatti.php" title="Come contattarci" > <img src="immagini/Contatti.png" alt="Come contattarci" border="0" width="70" height="50"></a>
...
</div>
...
E questa è la parte del css che contiene le regole per il div "MenuSup":
.MenuSup {
position: relative;
height: 50px;
width: 640px;
left: 0px;
top: 65px;
visibility: visible;
}
Ho provato a fare così:
...
<div class="MenuSup">
<img src="immagini/SpaziatoreMenuSup.png" border="0" width="20" height="50">
<a class="HomeButton" href="Home.php" title="Torna alla homepage" ><img src="immagini/Home.png" alt="Homepage" border="0" width="80" height="50"></a>
<a href="Contatti.php" title="Come contattarci" > <img src="immagini/Contatti.png" alt="Come contattarci" border="0" width="70" height="50"></a>
...
</div>
...
.MenuSup {
position: relative;
height: 50px;
width: 640px;
left: 0px;
top: 65px;
visibility: visible;
}
.MenuSup.HomeButton a:HOVER { background-image: url(../Immagini/hoverHome.png);}
...ma non succede nulla!
Mi date una mano per favore?!! :cry:
Grazie a tutti! Ciao!:)
prova a mettere direttamente nel css:
.classeImmagine{
background-image:url(../immagini/Home.png);
}
.classeImmagine:hover{
background-image:url(../immagini/hoverHome.png);
}
e assegnare la classe "classeImmagine" alla tua immagine:
<img class=classeImmagine src="immagini/Home.png" alt="Homepage" border="0" width="80" height="50" />
non ho avuto il tempo di provarlo, spero funzioni
ps: se ti interessa validarlo il tuo codice ricorda i tag di chiusura e quelli richiesti per certi elementi come <img src="" alt="" />
Grazie mille rfp! In parte funziona! Sono sulla buona strada.
L'unico problema che mi da adesso è che si vede cmq in primo piano l'immagine data da
<img class=classeImmagine src="immagini/Home.png" alt="Homepage" border="0" width="80" height="50" />
E quando ci passo sopra con il mouse l'immagine "hoverHome.png" si vede sullo sfondo coperta da quella di Home.png.
Per risolvere avrei pensato di mettere in <img class=classeImmagine .... > un riquadro trasparente della dimensione 80 x 50 in modo che si veda solo lo sfondo, secondo te è una soluzione accettabile o è troppo approssimativa?
Grazie anche per il consiglio sui tag di chiusura, pensavo di averli messi tutti ma non sapevo che il tag "<img ..." richiedesse "/" in chiusura provvederò subito a sistemare tutti i tag img!
oppure utilizzare javascript:
<img src="immagini/Home.png" alt="Homepage" width="80" height="50" onmouseover="javascript:this.src='immagini/hoverHome.png'" onmouseout="javascript:this.src='immagini/Home.png'" />
VegetaSSJ5
03-01-2008, 19:38
ragazzi non ho mai provato però secondo me c'è un problema. cioè nel momento in cui un'immagine cambia, questa deve anche caricarsi, quindi ci mette del tempo in base a quanto è grande l'immagine e al traffico di rete. non c'è un modo per precaricare l'immagine in modo tale che non appena serve è subito disponibile?
se questo problema sussiste, una possibile soluzione (ripeto che non ci ho mai provato, sono solo mie pippe mentali) potrebbe essere aggiungere alla pagina queste immagini per farle caricare simultaneamente con la pagina web, ma con la proprietà display:none in modo tale che l'oggetto non venga mostrato. cioè una cosa del tipo: <img src="img_alternativa.jpg".... style="display: none;" />
ragazzi non ho mai provato però secondo me c'è un problema. cioè nel momento in cui un'immagine cambia, questa deve anche caricarsi, quindi ci mette del tempo in base a quanto è grande l'immagine e al traffico di rete. non c'è un modo per precaricare l'immagine in modo tale che non appena serve è subito disponibile?
se questo problema sussiste, una possibile soluzione (ripeto che non ci ho mai provato, sono solo mie pippe mentali) potrebbe essere aggiungere alla pagina queste immagini per farle caricare simultaneamente con la pagina web, ma con la proprietà display:none in modo tale che l'oggetto non venga mostrato. cioè una cosa del tipo: <img src="img_alternativa.jpg".... style="display: none;" />
Ti sei risposto da solo :D
VegetaSSJ5
03-01-2008, 20:05
Ti sei risposto da solo :D
:asd:
Grazie ma preferirei non usare javascript per rendere il sito accessibile a tutti, anche a quelli che hanno javascript disattivato.
Vabbè cmq come mi hai suggerito la prima volta già funziona! Grazie! Ciao!
vBulletin® v3.6.4, Copyright ©2000-2025, Jelsoft Enterprises Ltd.