Printable View
Salve ragazzi, volevo rinnovare la grafica del sito, e mi servirebbe qualcosa (con qualcosa intendo uno script in php, flash, javascript o qualunque cosa :wink:) per far alzare al passaggio del mouse alcune immagini...
Premettendo che di php ci capisco poco...che mi consigliate di fare?
Forse si può fare con i CSS, ma non ne sono sicuro. E altrimenti con javascript (onmouseover), ma di JS so ben poco. Sicuramente qualcun'altro potrà dare un aiuto più concreto.
Eh ci avevo pensato anche io, ma non saprei che cosa inserire per faro alzare...:???:Citazione:
Originalmente inviato da tonnaer
Grazie in ogni caso
qualcosa come
dovrebbe bastarti no?Codice HTML:A.immagine:hover {
margin-top: -2px;
margin-left: -2px;
}
...
<a href="..." class="immagine"><img src="..."/></a>
Ma se utilizzo questo mi si alzano tutte le immagini no? Io volevo solo quelle in una parte della pagina, più precisamente in una cella di una tabella....
Il file nel quale lo devo applicare è inserito nelle altre pagine con l'include....
inserisci nel codice della cella id="nomechevuoi"
e poi metti
Codice:#nomechevuoi A.immagine:hover {
margin-top: -2px;
margin-left: -2px;
}
Non è
"A.img:hover"
?
con il codice che ho scritto io si alzano solo le immagini che sono all'interno di link con class="immagine", tutte le altre rimangono ferme, senza ulteriori aggiunte.
Se le immagini sono tutte in una particolare sezione, e sono tutti i link nella sezione stessa, allora come suggerisce Grafikando, puoi usare una classe o id per il contenitore:
se ci sono altri link del contenitore, aggiungi class="immagine" come da esempio sopraCodice HTML:#contenitore A:hover { // oppure .contenitore A:hover se vuoi una classe
margin-top: -2px;
margin-left: -2px;
}
...
<div id="contenitore">
<a href=".."><img .../></a>
<a href=".."><img .../></a>
<a href=".."><img .../></a>
</div>
@phelp:
in un mondo perfetto sarebbe img:hover{ ... } direttamente, ma siccome IE6< supporta :hover solo sui link, ho preferito suggerire (come probabilmente serve) di muovere tutto il link invece dell'immagine nel link
Scusa, ho sbagliato, non avevo letto bene.
Non ho capito solo una cosa: il seguente codice
Devo metterlo nella head vero?Codice HTML:#contenitore A:hover { // oppure .contenitore A:hover se vuoi una classe
margin-top: -2px;
margin-left: -2px;
}
EDIT: ho provato cn questo codice:
Ma mi compare questo :(Codice HTML:<html>
<head>
<title>mona</title>
A.immagine:hover {
margin-top: -2px;
margin-left: -2px;
}
</head>
<body>
<a href="wp" class="immagine"><img src="images/7900.jpg"></a>
<a href="wp" class="immagine"><img src="images/7900.jpg"></a>
<a href="wp" class="immagine"><img src="images/7900.jpg"></a>
</body>
</html>
se vuoi lo puoi mettere nell'head cosìCitazione:
Originalmente inviato da NokiaN70
Codice HTML:<style type=text/css>
#contenitore A:hover { // oppure .contenitore A:hover se vuoi una classe
margin-top: -2px;
margin-left: -2px;
}
</style>
Ho provato ora non mi compare nessuna scritta ma le immagini non si muovono :(
EDIT: ora si muovono!! però a sinistra, non in alto...
in ritardo :tongue - puoi metterlo nell'<head> o in un file esterno, cfr. http://css.html.it/
uhm, metti online la pagina e posta il link, che ci diamo un'occhiata :wink
Eccola: http://nokian70.altervista.org/2.phpCitazione:
Originalmente inviato da dreadnaut
beh, già preferirei partire con a) del codice html corretto b) niente tabelle :|
comunque, se proprio vuoi piazzarlo in quella pagina, dovrebbe essere
mettendo padding invece di margin perché devi fare i conti con un altro bordo esterno, e quindi mantenere le dimensioni totali.Codice:a.immagine {
display: block;
padding: 2px 0 0 2px;
}
A.immagine:hover {
padding: 0 2px 2px 0 ;
}