Quando si utilizza un'immagine come il punto di ancoraggio per un link in HTML, viene visualizzato un bordo intorno all'immagine. Se trovate questo bordo sgradevole, si può sbarazzarsi di esso o cambiarlo in qualcosa di più accattivante utilizzando HTML o CSS.

Utilizzando HTML

Il tag HTML < img > ha un attributo opzionale denominato "confine." È possibile utilizzare questo attributo per determinare se qualsiasi bordo viene visualizzato per ogni immagine; Se si imposta l'attributo border per un valore pari a "0", non verrà visualizzato alcun bordo, anche se è trasformare l'immagine in un link. Per esempio:

< a href = "& lt; img" > http://www.yourhost.com/yourpage.html "> & lt; img alt ="La mia immagine"border ="0">< /a >

L'attributo di "frontiera" per il tag < img >, tuttavia, è deprecato; Sebbene i browser ancora lo supportano a partire dal momento della pubblicazione, che può cambiare in futuro.

Utilizzando i CSS

CSS o Cascading Style Sheets, è un'opzione alternativa per rimuovere il bordo dalle immagini. Aggiungere il codice seguente al foglio di stile del tuo sito Web per impedire bordi su qualsiasi immagine che avete usato come un link:

a img {

border: none;

}

Se si desidera rimuovere il bordo solo da immagini specifiche, è possibile utilizzare classi per restringere le immagini devono essere interessate. Inserendo il seguente codice nel foglio di stile del tuo sito Web impedirà bordi mostrando solo su immagini che avete usato come un link che appartengono alla classe "noborder":

a {img.noborder

border: none;

}

Ad esempio, la prima immagine nel codice HTML seguente non visualizza un bordo, mentre la seconda sarà:

< a href = "& lt; img" > http://www.yourhost.com/firstpage.html "> & lt; img alt ="Prima immagine"classe ="noborder">< /a >< a href =" & lt; img "> http://www.yourhost.com/secondpage.html" > & lt; img alt = "Seconda immagine" >< /a >

Considerazioni

Rimozione del bordo dal link immagine potrebbe portare alcuni utenti alle prime armi a diventare frustrato con il tuo sito Web. Se si utilizza link di immagine come la navigazione del tuo sito Web, considera tra cui una navigazione alternativa, solo testo o una breve frase che spiega agli utenti che devono fare clic immagini per navigare il tuo sito Web.

Risoluzione dei problemi di usabilità

Per garantire che ai vostri lettori capiscano quali immagini sono link senza includere qualsiasi navigazione supplementare o spiegazione, considerare utilizzando i CSS per modificare lo stile del bordo, piuttosto che rimuoverlo del tutto. Come alternativa al bordo solido predefinito, provare diversi altri stili, come punteggiato, tratteggiato, doppio, inserto, inizio, scanalate e increspata. È inoltre possibile modificare il colore e lo spessore del bordo. Sperimentare con diverse impostazioni per trovare un confine che funziona con l'aspetto generale del tuo sito Web, ma ancora chiaramente identifica ogni immagine come un link.