link-immagine con bordo....

[bigrattle]

come devo fare per ottenere che l'immagine con link abbia un bordo che da tratteggiato cambi colore e diventi solid al passaggio del mouse?

Ho provato questo css:

.imgLink a:link {border:1px dotted #ffff00}
.imgLink a:visited {border:1px dotted #ffff00}
.imgLink a:hover {border:1px solid #ff0000}

ma funziona solo nel preview del programma (topstylepro).
sbaglio forse a richiamarlo con class="imgLink" nel tag <a>?
ho provato a dare dimensioni 0 al border dell'immagine, ma ottengo solo di far scomparire il bordo blu del link che la circonda.
Inoltre: questo css come si comporterebbe con Mac?

ciao

[Mich_]

Se hai un tag
<a href="..." class="imgLink" ...>
i selettori corretti sono i seguenti:

a.imgLink:link { ... }
a.imgLink:visited { ... }
a.imgLink:hover { ... }

.imgLink:link { ... }
.imgLink:visited { ... }
.imgLink:hover { ... }


Il tuo modo sarebbe corretto per una cosa cosi`:

<div class="imgLink">
...
...
...
...
</div>

[bigrattle]

si, diciamo che avendo una mappa su un'immagine e non volendo che venga applicato il bordo anche ai links su questa mappa mi serve una classe in modo da applicarla solo ad alcune immagini-link.
il problmema è che mi sono accorto che Mac ed IE si inchiodano completamente quando trovano questo script... Per cui cercavo qualcosa di compatibile (e vorrei decisamente evitare di dover fare un rollover con immagini già bordate)...
So che questo non è il forum adatto (e per di più non voglio crosspostare) ma per completezza dico che la mia idea sarebbe quella di fare un redirect per utenti mac. Ma quest'ultima parte (il redirect nella stessa pagina) non so come farla...

Ciao

edit:
Grazie per la risposta e per la precisazione!

[Mich_]

Il redirect e` una cosa non molto ben vista in questo forum, dato che e` un po' contraria alla programmazione universale.
Un hack sarebbe preferibile.

Piu` che un redirect vero, potresti applicare un CSS diverso per ogni browser; pur essendo piu` facile da gestire, anche questo non e` il massimo (l'hack e` sempre preferibile).

Sia per il redirect che per il CSS diverso, mi sa che devi usare JS (pero` in IE esiste l'if condizionale <!--if IE > - non ricordo la sintassi corretta).

Comunque se e` solo per una questione estetica, puoi usare il trucco JS:
<a href="..." onclick="this.blur;">

[bigrattle]

E qui tutta la mia natura fagiana si mette in bella mostra: cos'è un hack? immagino non sia cosa facile da spiegare in poche parole, per cui se hai qualche indicazione su dove poter leggere in maniera più approfondita...

Anche io preferirei utilizzare i css per questa cosa, ma non so quali possa accettare mac/ie per ottenere l'effetto desiderato.

Tale effetto dovrà essere applicato a 6 immagini, mi converrebbe usarne uno esterno che viene richiamato a seconda dei casi o meglio metterlo in linea?

[floyd46]

ciao a tutti
ho seguito questa discussione in quanto anche a me interessa una cosa del genere; continuo a postare qui per non aprire un altro 3d.
In pratica vorrei avere un bordo di 1px attorno ad una immagine nello stato a:hover.
Ho scritto questo codice CSS:

img{
margin:0;
padding:0;
border:none;
}

a.imgLink:link,  a.imgLink:visited{
margin:0;
padding:0;
width:60px; 
height:60px; /* alt + largh. dell'immagine*/
} 

a.imgLink:hover { 
margin:0;
padding:2px;
width:64px;
height:64px;
border: 1px solid #aaa;
}

In IE 6 appare il bordo attorno alla piccola foto ma ho notato un piccolo difetto: se aumento il padding attorno all'imm., nn viene visualizzato
il bordo inferiore, In pratica a 2 px di padding è tutto ok; portandolo a 3px accade quanto ho scritto.
Invece in Opera, Mozilla e FireFox x Win, il bordo non circonda l'immagine; si vede un quadrato non delle dimensioni
dichiarate (64px), ma in basso. A qualcuno è capitata la stessa cosa?
Grazie per la risposta che vorrete postare.
saluti
Floyd

[Mich_]

Provo a rispondere (ma non conosco tutto bene come vorrei):

Un hack e` un trucco per fare in modo che un browser non standard (esempio IE, o qualche browser vecchio) si comporti come gli altri browser. Tali trucchetti si trovano in giro in link citati nei "link utili" di questo forum (ad esempio in constile.org).

Il padding si comporta in modo diverso in IE rispetto ai browser standard (errore nel box model di IE).
Inoltre in IE non si puo` scrivere <img href="..." (cosa possibile in altri browser piu` recenti); e non vengono riconosciute le pseudoclassi :hover , :visited, ... in tag diversi da <a>

Comunque se 60x60 sono le dimensioni (fisiche) dell'immagine, se metti 1 px di bordo per parte e 2 px di padding il totale fa 66, non 64 come da te specificato.

[floyd46]

ciao Mich_ e grazie per la tua risposta;
allora...... ho risolto la questione del bordo e funzia bene.
Scrivo qui di seguito il codice; potrebbe essere utile per qualche amico/a. Codice CSS:

img{
margin:0;
padding:0;
border:none;
}
a.imgLink:link, a.imgLink:visited{
margin:0;
padding:3px; 
width:60px;  /* larghezza vera  e propria dell'immagine*/
height:60px; /* altezza vera  e propria dell'immagine*/
border: 1px solid #fff;  
display:block; 
} 
a.imgLink:hover { 
margin:0;
padding:3px;
border: 1px solid #aaa;
height:60px;
width:60px;
}

In questo modo si ottiene il bordo di colore desiderato nello stato :hover.
E' importante impostare un bordo nello stato :link e :visited altrimenti si vede uno "spostamento" dell'immagine quando si passa con il mouse.
Ho provato a visualizzare l'esempio nei browser ed appare in tutti e 4 il bordo.
Spero di essere stato chiaro.
Grazie ancora e saluti.
Floyd

[bigrattle]

Ciao Mich_, cercherò di capire come far funzionare questa cosa dell'hack.

Per Floyd: sai dirmi se questo codice funziona anche con Mac/IE?

ciao

[floyd46]

ciao bigrattle, proverò a chiedere ad un amico che ha Mac se si vede bene.