Immagine che si alza di 2-3 pixel al passaggio del mouse

24-01-2008, 15.32.14

Salve ragazzi, volevo rinnovare la grafica del sito, e mi servirebbe qualcosa (con qualcosa intendo uno script in php, flash, javascript o qualunque cosa

) per far alzare al passaggio del mouse alcune immagini...

Premettendo che di php ci capisco poco...che mi consigliate di fare?

24-01-2008, 16.08.10

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.

24-01-2008, 16.10.21

Originalmente inviato da tonnaer

altrimenti con javascript (onmouseover)

Eh ci avevo pensato anche io, ma non saprei che cosa inserire per faro alzare...

Grazie in ogni caso

**dreadnaut** · 24-01-2008, 16.33.22

qualcosa come

Codice HTML:

A.immagine:hover {
 margin-top: -2px;
 margin-left: -2px;
}

...

<a href="..." class="immagine"><img src="..."/></a>

dovrebbe bastarti no?

24-01-2008, 16.42.56

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....

24-01-2008, 16.48.04

inserisci nel codice della cella id="nomechevuoi"

e poi metti

Codice:

#nomechevuoi A.immagine:hover {
 margin-top: -2px;
 margin-left: -2px;
}

24-01-2008, 16.56.32

Non è
"A.img:hover"
?

**dreadnaut** · 24-01-2008, 16.57.18

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:

Codice 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>

se ci sono altri link del contenitore, aggiungi class="immagine" come da esempio sopra

@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

24-01-2008, 17.01.36

Scusa, ho sbagliato, non avevo letto bene.

24-01-2008, 19.05.22

Non ho capito solo una cosa: il seguente codice

Codice HTML:

#contenitore A:hover {     // oppure .contenitore A:hover se vuoi una classe
 margin-top: -2px;
 margin-left: -2px;
}

Devo metterlo nella head vero?

EDIT: ho provato cn questo codice:

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>

Ma mi compare questo :(

24-01-2008, 19.12.29

Originalmente inviato da NokiaN70

Non ho capito solo una cosa: il seguente codice

Codice HTML:

#contenitore A:hover {     // oppure .contenitore A:hover se vuoi una classe
 margin-top: -2px;
 margin-left: -2px;
}

Devo metterlo nella head vero?

se vuoi lo puoi mettere nell'head così

Codice HTML:

<style type=text/css>
#contenitore A:hover {     // oppure .contenitore A:hover se vuoi una classe
 margin-top: -2px;
 margin-left: -2px;
}
</style>

24-01-2008, 19.17.06

Ho provato ora non mi compare nessuna scritta ma le immagini non si muovono :(

EDIT: ora si muovono!! però a sinistra, non in alto...

**dreadnaut** · 24-01-2008, 19.18.05

in ritardo

- 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

24-01-2008, 21.03.38

Originalmente inviato da dreadnaut

uhm, metti online la pagina e posta il link, che ci diamo un'occhiata :wink

Eccola: http://nokian70.altervista.org/2.php

**dreadnaut** · 26-01-2008, 01.08.51

beh, già preferirei partire con a) del codice html corretto b) niente tabelle

comunque, se proprio vuoi piazzarlo in quella pagina, dovrebbe essere

Codice:

a.immagine {
 display: block;
 padding: 2px 0 0 2px;
}
A.immagine:hover {
 padding: 0 2px 2px 0 ;
}

mettendo padding invece di margin perché devi fare i conti con un altro bordo esterno, e quindi mantenere le dimensioni totali.

Discussione: Immagine che si alza di 2-3 pixel al passaggio del mouse

LinkBack

Strumenti discussione

Display

Immagine che si alza di 2-3 pixel al passaggio del mouse

Regole di scrittura