Come sbarazzarsi del confine intorno ad un elemento immagine usata come ancoraggio

September 11

Quando si utilizza un'immagine come l'ancora per un collegamento in HTML, un bordo compare intorno all'immagine. Se si trova questo confine sgradevole, si può sbarazzarsi di esso o cambiarlo in qualcosa di più più attraente utilizzando HTML o CSS.

utilizzando HTML

Il tag <img> HTML ha un attributo opzionale chiamato "confine". È possibile utilizzare questo attributo per determinare se viene visualizzato un bordo per ogni immagine; se si imposta l'attributo confine per un valore pari a "0", non verrà visualizzato alcun confine, anche se si attiva 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 "confine" per il tag <img>, tuttavia, è deprecato; anche se i browser supportano ancora come del momento della pubblicazione, che potrebbe cambiare in futuro.

utilizzando i CSS

CSS o Cascading Style Sheets, è un'opzione alternativa per rimuovere il bordo dalle immagini. Aggiungere il seguente codice al foglio di stile del tuo sito web per evitare che i confini di mostrare su qualsiasi immagine è stata utilizzata come un link:

un img {

border: none;

}

Se si desidera rimuovere il bordo solo dalle immagini specifiche, utilizzare le classi per restringere cui immagini devono essere colpiti. Posizionando il seguente codice nel foglio di stile del tuo sito web impedirà confini di mostrare solo le immagini che avete utilizzato come un link che appartengono alla classe "noborder":

un img.noborder {

border: none;

}

Ad esempio, la prima immagine nella seguente codice HTML non visualizzerà un bordo, mentre il secondo sarà:

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

considerazioni

Rimozione del confine da collegamenti di immagine potrebbe portare alcuni utenti di computer inesperti a diventare frustrato con il vostro sito web. Se stai usando i collegamenti di immagine come la navigazione del sito, tra cui un supplente, la navigazione solo testo o una breve frase che spiega agli utenti che devono cliccare sulle immagini per navigare nel tuo sito web.

Risoluzione dei problemi di usabilità

Per garantire i tuoi lettori a capire che le immagini sono collegamenti senza includere alcun navigazione o spiegazioni aggiuntive, è possibile utilizzare i CSS per modificare lo stile del bordo, piuttosto che rimuoverlo del tutto. In alternativa al confine solido di default, provare diversi altri stili, come punteggiata, tratteggiata, doppio, inserto, fin dall'inizio, scanalato e scanalati. È inoltre possibile modificare lo spessore e il colore del bordo. Esperimento con varie impostazioni per trovare un bordo che funziona con l'aspetto generale del tuo sito web, ma ancora chiaramente identifica ogni immagine come un link.