Link su immagini...qualche problema...

[SGUINZ]

Ciao a tutti,
vorrei inserire diverse piccole immagini su una pagina alle quali associare un collegamento che mi fa aprire la stessa immagine in dimensioni più grandi.

Vorrei che non venisse applicato il bordo all'immagine, ma solo quando ci passo sopra con il mouse.

Io ho usato questo css incorporato ma non riesco. Mi rimane il bordo con i diversi colori in ogni situazione. Dove sbaglio?

<style type="text/css">

a:link {
color: #999999;
border="0"
}
a:visited {
color: #FF6633;
}
a:hover {
color: #FF6633;
border="2"
}
a:active {
color: #FF6633;
}
</style>

[webbeloz]

i tuoi CSS presentano evidenti errori....

per esempio:

.miosu img{
border: 1px solid #ccc;
}

.miosu:hover img{
border: 1px solid navy;
}

.miosu:hover{
color: red;
}

e usa il CSS con questo HTML:

[img]tua.gif[/img]
[img]tua.gif[/img]

[SGUINZ]

ciao webbeloz e scusami ma sono alle prime armi...
ho le idee un pochino confuse.

ho provato a modificare il codice ed adesso riesco a fare quello che volevo.
grazie dell'aiuto!

già che ci sono chiedo se è possibile far apparire il bordo all'interno dell'immagine, non all'esterno...non credo esista cmq una funzione di questo tipo.

Intanto grazie ancora.

[webbeloz]

figurati...
ad essere sincero non sò se esiste!
ma potresti anche usare un'altra immagine ( hover ) con il bordo nella posizione che vuoi...
b. lavoro
ciao

[SGUINZ]

intendi che quando ci passo sopra con il mouse faccio comparire la stessa immagine alla quale però ho aggiunto il bordo? (per esempio con Photoshop)

[webbeloz]

esatto!
ma puoi anche usare questo:

#box {
      background: #f4f4f4;
      border: 1px solid #bbbbbb;
      width: 200px;
      height: 200px;
      margin: 60px auto;
      position: relative;
    }
    
    #box:before {
      border: 1px solid white;
      content: '';
      width: 198px;
      height: 198px;
      position: absolute;
    }
    
  #box:hover:after {
      content: '';
      position: absolute;
      width: 196px;
      height: 196px;
      border: 1px solid #bbbbbb;
      left: 1px; top: 1px;
    }

[webbeloz]

dimenticavo...
questo codice comporta l'uso dei DIV:

<div id="box">[img]latua_foto.png[/img]</div>