Prendendo il controllo di rollover Image

Sulla maggior parte dei browser, vi è un confine di default che circonda le immagini che vengono utilizzati come collegamenti. Di solito è un grande, brutto, grosso brillante bordo blu. Questo è probabilmente auspicabile, quindi in questo articolo esamineremo i modi si può prendere cura di lui nel CSS ...

Per rimuovere il bordo predefinito utilizzare questo nel CSS:


a img { border: none; }


È inoltre possibile rimuovere il bordo di default sulle immagini legate da cui "border = 0" all'interno del tag di immagine, ma questa è una struttura obsoleta e non è raccomandato. Purtroppo è incluso in molti copia-e-incolla esempi di codice, poiché costringe il risultato desiderato, senza dover contare su il proprietario del sito mantenendo una buona CSS.

Che di default bordo blu non è male, è solo cercando di essere utile e di farvi conoscere l'immagine che è circostante è un collegamento ipertestuale. Let's Take That responsabilità su noi stessi e vedere se possiamo trovare un qualche rollover per le immagini sono un po 'più bello e più interessante.

Il modo migliore per vedere questi esempi è quello di visualizzare la pagina di esempio e il modo migliore per capire il loro funzionamento è quello di scaricare l'esempio e guardare il codice.

Esempio 1: Thick Border

Questo esempio dà l'immagine di alcuni pixel di padding e un confine è stato normale e aggiunge un colore di sfondo il rollover.

Esempio 2: Dashed Thick Border

Questa è una tecnica simile solo il rollover aggiunge un bordo spesso tratteggiato l'immagine. Il trucco è che il confine è lì che è stato normale, come pure, solo che è bianco come colore di sfondo. Se la frontiera non c'era in esso è stato normale ed è stata aggiunta nel corso del cambio di data, l'immagine sarebbe cambiare posizione per far posto alla frontiera, che sarebbe un risultato stridente e indesiderabile.

Esempio 3: Black & White a colori

Questa tecnica provoca l'immagine di "colorare" il rollover. Questo è un po 'più complicato in quanto non sarà in grado di utilizzare i normali tag img nel codice HTML. Si intende utilizzare gli elementi di ancoraggio con nomi di classe unica. Queste ancore avranno altezze specifiche e larghezze e immagine di sfondo. Poi, il cambio di data, è possibile scambiare l'immagine di sfondo per una versione a colori.

Esempio 4: Aggiungi Gradient Background

Invece di aggiungere un colore solido come nell'esempio 1, è possibile utilizzare un'immagine. Basta dare l'immagine di una imbottitura su entrambi i lati per cui vi è un certo spazio per la grafica fino a mostrare.

Esempio 5: Information Display

Questa tecnica rende il testo visualizzato sotto l'immagine di rollover. Si avvale della proprietà background-image in CSS, come ad esempio in 3, ma in questo caso, l'immagine di sfondo rimane lo stesso. La differenza è che nello stato regolare, il testo è preso il via lo schermo con un enorme offset negativo che viene eliminato il rollover. Per ottenere il testo di presentarsi sotto l'immagine anziché su di esso dà l'ancora una spaziatura superiore di un po 'più grande l'altezza dell'immagine.