Vložení obrázku - IE ho nepřečte

[Stene]

Jo, ale to se mění při najetí myši na TEXT, já myslel při najetí na obrázek.

[Myloš]

Nikoli nutně text: http://wellstyled.com/files/css-noprelo ... ample.html
anebo můj projekt Běsdiář – text „Kliknutím zvětšíte obrázek do plné velikosti“ ve skutečnosti není text, nýbrž obrázkové pozadí (text je namalovaný).

Typická ukázka obrázku na pozadí, který se změní po najetí myši pouze pomocí CSS, http://kesolim.sweb.cz/TMP/kokus/

[Stene]

Našel jsem si co potřebuju

Kód: Vybrat vše

a {
   display: block;
   width: 320px;
   height: 240px;
   overflow: hidden;
   background: url(../images/obrazek-1.jpg);
}
a:hover {
   text-indent:-320px;
   width: 320px
}
a img {
   border:none;
   margin-right: 320px;   /* pri :hover zobrazi background */
}
</style>

<a href="#"><img src="../images/obrazek-1bw.jpg" width="320" height="240" alt="alternativní text"></a>

Bohužel ale v CSS už jednou a:hover mám. Nevím jak upravit, aby se to zobrazovalo správně, nevíš? :(

[Myloš]

ID:
HTML: <a id="tenhle_jeden" href="adresa">
CSS: a#tenhle_jeden / a#tenhle_jeden:hover

anebo třídou (class)
HTML: <a class="tenhle_druh" href="adresa">
CSS: a.tenhle_druh / a.tenhle_druh:hover

ID se používá tehdy, je-li na stránce pouzue jeden prvek tohoto jména.
Class se používá, je-li na stránce tohoto jména (typu, určení) prvků víc.
ID má větší prioritu a dá se na něj dobře navázat javascript.
Jinak můžeš použít kdykoli i class (i když je prvek na stránce sám) a nic tím nepokazíš.
Jména ID/třídy nikdy nezačínej číslicí – první znak by měl být písmeno (bez diakritiky, samozřejmě).

[Stene]

čili jak bude vypadat změna aby tam nebyl hover? Nedokážu si ot představit :(

Kód: Vybrat vše

a {
   display: block;
   width: 320px;
   height: 240px;
   overflow: hidden;
   background: url(../images/obrazek-1.jpg);
}
a:hover {
   text-indent:-320px;
   width: 320px
}
a img {
   border:none;
   margin-right: 320px;   /* pri :hover zobrazi background */
}
</style>

<a href="#"><img src="../images/obrazek-1bw.jpg" width="320" height="240" alt="alternativní text"></a>

[Myloš]

Dejme tomu, že máš na stránce takový obrázek jen jeden. Uvažujme tedy ID (id="jmeno")

Kód: Vybrat vše

a#jmeno { /* tebou uváděná pravidla */ }
a#jmeno:hover { /* tebou uváděná pravidla */ }
a#jmeno img { /* tebou uváděná pravidla */ }
</style>
<a href="#" id="jmeno"> <!-- a tak dál -->

V případě, že bude na jedné stránce takových odkazů/obrázků víc, namísto ID použít třídu, neboli id nahradit class a znak # tečkou.

[Stene]

Jo, díky. Povedlo se. Zamykám (vyřešeno)