Rollover

Rollover efekt (po najetí na obrázek se zamění za jiný) lze realizovat pomocí JavaSciptu, případně pomocí CSS, kdy se překrývají dva regiony. Nicméně částečného rollover efektu, záměny barvy, lze dosáhnout s pouhým XHTML.

Nyní chci, aby se barva písma obrázku změnila na červenou. Obrázek připravíme v editoru, tak aby text byl průhledný (nutný formát GIF nebo PNG). A pak stačí toto:

<a href="#"><img src="../_img/weblog.gif" alt="obrázek"/></a>

A potom je nutné dodat na stránku následující styl:

 a:hover img {background-color: red}
 a img {background-color: green}

Funguje to velmi jednodušše. Text obrázku je průhledný a proto je vidět pouze, když je na tmavém pozadí. Po najetí na odkaz se změní barva pozadí -> tudíž i barva obrázku.

Navigace