Bordo Immagini con CSS

**wider** · 13-11-2005, 20:03

Salve a tutti e buona Domenica,
vorrei sapere come faccio con i CSS (o similar) a rendere un effetto simile a quello reso fassando il sorcio sopra un immagine qualsiasi di questo URL msn search immaini.
Cioè in pratica, come fare a fare i bordi che cambiano colore al passaggio del mause sopra 'immagine stessa (ovviamente con tag <a> aperto).
Grazi e buona serata.

**ecoweb** · 14-11-2005, 00:07

a: hover {
border-width:1px;
border-style:solid;
border-color:#ff0000;
}

nel momento che il mouse e sopra ti farà vedere il bordo
dovrebbe essere cosi

ciao

**wider** · 15-11-2005, 17:04

no, non funziona....
Ho provato anche a spulciare il codice di msn search, ma non ci ho capito nulla, è incasinato 100%
strano he sia valido....

**salasir** · 15-11-2005, 17:10

Prova a postare la parte del codice relativa ai link (compreso eventuali div) ed al CSS che proviamo a dargli un occhio.

**wider** · 15-11-2005, 17:14

si, ora lo posto:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
immy a: hover {
border-width:1px;
border-style:solid;
border-color:#ff0000;
}
immy a {
border-width:1px;
border-style:solid;
border-color:#999999;
}
</style>
</head>
<body>
[img]btn_searchgo.gif[/img]
</body>
</html>

**salasir** · 15-11-2005, 17:21

Per prima cosa le classi devono avere un "." (punto) che le precede

codice:

.immy a {
border-width:1px;
border-style:solid;
border-color:#999999;
}
.immy a:hover {
border-width:1px;
border-style:solid;
border-color:#ff0000;
}

Poi la classe deve stare "prima" del tag che stai gestendo

codice:

<p class="immy">
[img]btn_searchgo.gif[/img]
</p>

Ho messo "p" ma potrebbe essere anche "span" oppure addirittura "div"

PS probabilmente vorrai far sparire il bordo classico dei link blu/viola:

codice:

.immy a:link { TEXT-DECORATION:none; }

**wider** · 15-11-2005, 17:42

Thanks!
Ora funziona:http://wider.altervista.org/mao.htm
una cosa... perchè mi mette il bordo solo su un pezzo di immy? come risolvo per metterlo su tutta?

**salasir** · 15-11-2005, 17:50

Se intendi il bordo superiore ...

Prova ad iniziare ad impostare la pagina come vorresti fosse il risultato. Probabilmente quando l'immagine va al suo posto si sistema.
Ma non saprei dirti.

**wider** · 15-11-2005, 17:51

Ok, grazie a tutti.... ciao ciao

**wider** · 15-11-2005, 18:15

Volevo segnalare che il broblema dei bordi, è solo con firefox, con ie si vede bene.... stà a capire perchè.... http://wider.altervista.org/mao.htm

Discussione: Bordo Immagini con CSS

Strumenti discussione

Ricerca discussione

Visualizza

Bordo Immagini con CSS

Permessi di invio