CSS2 řešení: efektní stylování odkazujícího obrázku

Představte si případ, kdy miniatura obrázku odkazuje na svou vlastní zvětšeninu. Vy chcete dát nějak najevo, že klikněte pro zvětšení, jenže nikoli textovm sdělením, jak v dnešní době bývá obvyklé, nýbrž symbolickým umístěním ikony lupy přes miniaturu. Nebo si představte jiný pěkný příklad, kdy je vhodné obrázek překrývat jiným obrázkem.

Než ovšem budete číst dál, vězte, že ačkoli jde o CSS 2.1 kód… zdá se, že se specifickou konstrukcí img:after se dnes dokáže vypořádat leda nejnovější Opera. Možná je na vině ta podezřelá poznámka ve specifikaci:

Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.

Co by měl být výsledek

Co by měl být kód

<a href="photo.jpg"><img src="t_photo.jpg" alt="" /></a>
a img {
        position:relative;}

a img:after {
        content:'';
        position:absolute; right:0; bottom:0;
        width:32px; height:32px;
        background:url(zoom.png) no-repeat;}

Uzávěr

Nevěděl jsem, že záleží na jaký element se aplikuje pseudotřída. Nevěděl jsem, že ani ta notoricky známá konstrukce img:after {content: attr(alt);} vlastně funguje jen… teoreticky.

A ještě jedna poznámka pro sebe za mnoho a mnoho let: Petře, až budeš tohle chtít hodit na nějakej web, ještě by bylo dobré atributově vyselektovat jen ty odkazy, které směřují na obrázek ;). Jo a ještě jedno PS: i když například Firefox jednou bude chápat img:after, není vůbec jisté, že toto řešení (kód výše) bude skutečně funkční.

Aneb není nad to si od práce odpočinout u pěkného CSS oříšku!

O článku CSS2 řešení: efektní stylování odkazujícího obrázku

Komentáře (16)

k formuláři

RSS kanál komentářů

    • Komentář číslo: 1
    • *
    • Jméno: Filosof
    • Odesláno:
      21.1. 2008 — 9:38

    Osobně to řeším prázdným elementem.. potřebuji totiž řešení DNES, nikoliv za 5 let :-)

    • Komentář číslo: 2
    • *
    • Jméno: Filosof
    • Odesláno:
      21.1. 2008 — 9:39

    (pro méně CSSzručné – do odkazu dáte prázdný SPAN, či I, který nastylujete jako ten a img:after)…

    • Komentář číslo: 3
    • *
    • Jméno: karf
    • Odesláno:
      21.1. 2008 — 10:16

    A co takto: dát obrázek na pozadí elementu A a pro element img nadefinovat záporný z-index: –1 + position: relative (a ještě bude asi potřeba přidat position: relative a z-index: 1 pro rodiče obou těchto prvků, pokud je pod ním nějaké pozadí). Teď jsem to zkusil a zdá se, že to funguje (FF, Opera, IE6–7).

    • Komentář číslo: 4
    • *
    • Jméno: Fred
    • Odesláno:
      21.1. 2008 — 10:53

    Měl jsem pocit, že tohle dřív ve FF fungovalo, zajímavé. Funguje mi řešení, které je sice k ničemu, protože se musí v css nastavit velikost obrázku, ale je zajímavé, že si FF vůbec neporadí s pozicí či z-indexem generovaného obsahu. Tu opacitu tam mám proto abych viděl, že to tam je, ale pod tím obrázkem :-(

    a {
        position:relative;
        width:196px;
        height:115px;
        display:block;
        z-index:1000;
        }
a img {
        border:none;
        position:absolute;
        z-index:1;opacity:0.6;
        }
a img:hover {
        opacity:1;
        }
a:after {
        content:'';
        position:absolute;
        top:0;
        right:0;
        z-index:1000;
        width:100%;
        height:100%;
        display:block;
        background:url(zoom.gif) bottom right no-repeat;
        }
    • Komentář číslo: 5
    • *
    • Jméno: Kahi
    • Odesláno:
      21.1. 2008 — 11:29

    [1] Filosof:, [3] karf: – a jak vyřešíš, aby odkaz rozměrově kopíroval obrázek? nebo alespoň aby se překrývaly počáteční body?

    • Komentář číslo: 6
    • *
    • Jméno: karf
    • Odesláno:
      21.1. 2008 — 13:00

    [5] Kahi: U mého postupu není potřeba nic takového řešit, pouze obrázku dát position: relative a z-index: –1, což nemá vliv na okolní tok, takže to áčko se normálně obrázku přizpůsobí, pokud bude inline.

    • Komentář číslo: 7
    • *
    • Jméno: Muflo
    • Odesláno:
      21.1. 2008 — 14:42

    [1] Filosof: Řeším to stejně… akorát, že si ještě nechávám prázdný element přidávat pomocí javascriptu – pak stačí uživatelům editoru redakčního systému pouze nastavit styl pro odkaz třeba jako „miniatura“.

    • Komentář číslo: 8
    • *
    • Jméno: Kahi
    • Odesláno:
      21.1. 2008 — 17:00

    [6] karf: – už mi to asi došlo :-).

    • Komentář číslo: 9
    • *
    • Jméno: Martin Stiborský
    • Odesláno:
      21.1. 2008 — 19:03

    Jé to je fešné, děkuji, využiji.

    • Komentář číslo: 10
    • *
    • Jméno: PJ
    • Odesláno:
      25.1. 2008 — 2:33

    [2] Filosof:, asi jsem dost natvrdlej, ale bud nevim, kam ten prazdny span dat, nebo to spatne styluju, mohl by nekdo doplnit kod?

    Reseni s pozadim odkazu se mi nelibi, chci mit ten img v kodu.

    • Komentář číslo: 11
    • *
    • Jméno: PJ
    • Odesláno:
      25.1. 2008 — 2:35

    Boze, tenhle komentarovy system je sileny. Zaprve se to nekesuje, takze pote, co jsem si klikl na Texy, tak jsem se dostal nekam uplne do pryc a musel jsem to psat znova.

    A za druhe to takhle uplne nesmyslne oreze tagy, misto toho, aby to prevedlo na entity, takze:

    div – a href=velky.jpg – img src=maly.jpg – /a – /div

    • Komentář číslo: 12
    • *
    • Jméno: Kahi
    • Odesláno:
      25.1. 2008 — 12:08

    [10] PJ: s tím spanem to vypadá nějak takto:

    a {
        position:relative; }

a span {
        position:absolute; right:0; bottom:0;
        width:32px; height:32px;
        background:url(zoom.png) no-repeat;}

    a

    <p><a href="photo.jpg"><img src="t_photo.jpg" alt="" /><span></span></a></p>

    ad komentáře – něco s tím udělám

    • Komentář číslo: 13
    • *
    • Jméno: PJ
    • Odesláno:
      25.1. 2008 — 23:11

    [12] Kahi: Diky moc, a promin mi ty zmatky, co jsem v noci vyvadel. :)

    • Komentář číslo: 14
    • *
    • Jméno: Kahi
    • Odesláno:
      27.1. 2008 — 18:24

    Ještě by zasloužilo reakci:

    [1] Filosof: napsal:

    Osobně to řeším prázdným elementem… potřebuji totiž řešení DNES

    reaguji: to je možná funkční, ale samo o sobě ne plnohodnotné řešení. Ne vždy má kodér kontrolu nad obsahem. Span navíc je něco navíc. Čili tvé řešení samo o sobě (třeba bez spanu generovaného pomocí JS) není plnohodnotné. Mé řešení je plnohodnotné, zato jen teoreticky :-).

    [3] karf: napsal:

    „obrázek je na backu odkazu a odkaz je pozicován z-indexem nad obrázek“

    reaguji: nezkoušel jsem, ale jestli to funguje spolehlivě, může to být lepší řešení než Filosofovo (se spanem navíc).

    • Komentář číslo: 15
    • *
    • Jméno: Radek Matěj
    • Odesláno:
      17.2. 2008 — 10:34

    Osobně mi připadá ideální Filosofovo řešení s prázdým spamem, který je ale dobré přidávat JavaScriptem pro obrázky, které vedou na zvětšeninu. Napříiklad pomocí jQuery href=„http://­jquery.com/“ rel=„nofollow“>http:/­/jquery.com/ je to na pár řádků.

    Řeším ale jiné problémy: Pokud chci mít lupu v pravém horním rohu, nenašel jsem jiné řešení, než formátovat odkaz jako blokový element. Stýská se mi po inline-block.

    Druhý problém a zároveň otázka na tebe =) – jak řešíš caption plovoucích obrázků? Jak udělat, aby delší caption (v tvém případě element ) s delším textem nevytékalo z pod obrázku. Vidím, že nastavuješ, stejně jako já, šířku obalujícího elementu (figure-right). Jediné efektivní řešení, abych šířku nemusel ručně psát, mi připadá opět JavaScript.

    • Komentář číslo: 16
    • *
    • Jméno: Kahi
    • Odesláno:
      17.2. 2008 — 12:30

    [15] Radek Matěj: Popisky plovoucích obrázků se mi dělají snadno. O šířku bloků se nestarám, to vypočítává Texy. Já jen napíšu [* jak-jsem-videl-slony/slon-c14.jpg >] *** Tak tenhle se mi fakt líbil

Přidat komentář

Nápověda ke psaní komentářů

Zde formátuje Texy!

  • *zvýraznění*
  • **silné zvýraznění**
  • > citace
  • "odkaz":http://kam
  • [4] reakce na komentář
  • zdrojové kódy a více

komentáře

úplně nahoru