CSS (1. díl) - Nejen použití JavaScriptu ve stylopisu

článek v kategorii Kódování , autor článku je jan-hommer , článek přidán dne 2007-12-31 10:00:42


JavaScript můžeme použít takřka všude. Není tomu jinak ani u kaskádových stylů. Ukážeme si třeba, jak docílit hover u divu v nejrozšířenějším prohlížeči MIE. Ten totiž nepodporuje hover efekt u všech elementů, ale jenom u odkazů. Ale to není v tomto článku vše!

K docílení hover efektu nám stačí vytvoření nové třídy, pro přehlednost pojmenována .hover, ve stylopisu a krátký JS zápis. Nemusím zde asi rozebírat, jak to celé funguje. Z ukázky je to více než zřejmé.

Soubor index.html

<html>
 <head>
  <title>Příklad 1</title>
 </head>
 <style type="text/css">
  #hover {
   width: 210px;
   padding: 20px;
   margin: 50px;
   border: 1px solid #000;
   background-color: expression(
    this.onmouseover = new Function("this.className += ' hover';"),
    this.onmouseout = new Function("this.className = this.className.replace(' hover', '')")
   );
   text-align: justify;
  }

  #hover:hover, #hover.hover {
   background: #e87817;
  }

  #hover p {
    padding: 0;
	margin: 0;
  }
 </style>
 <body>
  <div id="hover">
   <p>Toto je obsah divu hover. Najeďte na něj a uvidíte, co se stane!</p>
  </div>
 </body>
</html>

Ukázku si můžete prohlédnout zde, nebo si stáhněte zdrojové kódy.

Je libo selektory

Následující využití selektorů není podporováno v MIE 6 a jeho nižších verzích, takže jeho využití zatím nemá patřičný význam. Respektive se vyplatí používat v případech, kdy je to pouze "na okrasu".

Například ve stylopise pro tisk můžeme docílit toho, že za odkazy se nám do závorky vypíše odkazovaná URL, což je ve verzi pro tisk více než vhodné.

a:after {
  content: " (" attr(href) ") ";
}

A třeba tento selektor vybere všechny všechny obrázky, jejichž hodnota src začíná na thumb a nastaví jim 1px plný černý rámeček. Takže funguje v případě hodnot thumb/31.jpg či thubm31.jpg. Ale nefungoval by v případě /thumb/31.jpg.

img[src]="thumb"] {
   border: 1px solid #000;
}

Pokračování příště ;-)

Zpět