Diskuze: CSS zvetseni obrazku

HTML a CSS HTML a CSS CSS zvetseni obrazku American English version English version

Avatar
vvsvs
Neregistrovaný
Avatar
vvsvs:

Zdravim, nevite nekdo jak udelat zvetseni obrazku jako je tomu na 4chanu ? ... pro ukazku zde: http://boards.4chan.org/wsg/ .. nahore v Settings is zaskrtnete Image hover, dejte save a dole prejedte pres jakykoliv obrazek ... tak nejak bych to potreboval i ja na webu pouzit u fotogalerie ... nejake reseni ? :)

 
Odpovědět 21.11.2013 21:07
Avatar
FastNode
Redaktor
Avatar
Odpovídá na vvsvs
FastNode:

To víš že ti uvěřím wsg... Na /b/ všichni choděj! :D

Tohle podle mě rozhodně nezvládne jenom CSS. Myslím, že to bude javascript v kombinaci s jQuery přibližně takhle:

$(".obrazek")
  .mouseenter(function() {
    $("#big_image").attr("src", $(this).attr("src"));
    $("#big_image").show();
  })
  .mouseleave(function() {
    $("#big_image").hide();
  });

Je to ono? http://jsfiddle.net/ke79M/1/

Editováno 25.11.2013 18:17
 
Nahoru Odpovědět 25.11.2013 18:15
Avatar
Peco
Člen
Avatar
Peco:

ta stránka mi nejde otvoriť. Podľa mňa by to malo ísť aj pomocou CSS, pokiaľ to stačí zväčšiť.

skúsil by som to takto :

//html
<a href="obrVelky.jpg"><img src="obrMaly.jpg" alt="malý obrázok"></a>

//css
a img {width:80%;}
a:hover img {width:100%;}
Nahoru Odpovědět 25.11.2013 18:29
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
FastNode
Redaktor
Avatar
Odpovídá na Peco
FastNode:

Pokud to chce stejně jako na 4chanu, tak to s pomocí CSS nepůjde, protože se tam ten obrázek duplikuje (načte se do jiného elementu), navíc ty náhledy jsou zmenšeniny, takže se tam vlastně načítá úplně jiný obrázek (s upravenou URL).

Což ovšem neznamená, že by mu tvoje řešení nestačilo :)

Editováno 25.11.2013 19:01
 
Nahoru Odpovědět 25.11.2013 19:00
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.