Stránka 1 z 1

TEXT/images HTMS/CSS

Napsal: 02 srp 2015 23:58
od Montes
Zdravím, potřebuju udělat menší věc u sebe na webu.

Mám nějakej obrázek 1 a potřebuju, když na něj najedu kurzorem, aby se změnil na obrázek 2. Jak by se to dalo udělat prosím? Nevím, jak to nazvat, tak nevím ani, co hledat.

Druhá věc je s textem. Mám nějaký text

>>click here<<<

a po kliknutí na text by se mi vyscrolovalo

>>>click here<<<
text text text

Ví někdo, jak to udělat prosím?

Re: TEXT/images HTMS/CSS

Napsal: 03 srp 2015 00:26
od x-rated
1) buď máš jeden obrázek na pozadí, kdy viditelná je vždycky jenom jedna jeho část a při hoveru se mění background-position,
nebo dáš dva img s position absolute do nějakýho bloku s position relative a při hoveru měníš visibility nebo z-index

2) na místo, kam se to má posunout, dáš třeba na nějakej div id="nazev_odkazu", a z místa, odkud se tam chceš dotat, vytvoříš odkaz s href="nazev_odkazu"
ale jak tak na to teď koukám, ty spíš chceš, aby se ten obsah vysunul přímo z toho textu, v tom případě https://jqueryui.com/toggle/ nebo https://jqueryui.com/accordion/ - má to celou řadu možností a nastavení, viz dokumentace k tomu přímo na stránkách jquery

Re: TEXT/images HTMS/CSS

Napsal: 03 srp 2015 12:28
od Montes
Koukal jsem na to Jquery. Přesně něco takového potřebuju. Ale potřebuju, aby to takto vyjelo jenom z obyčejné věty. Třeba "zelenina" a pod tím vyjelo "brokolice, květák, paprika" atp. Jde to nějak udělat prosím tě?

Re: TEXT/images HTMS/CSS

Napsal: 03 srp 2015 14:06
od LuCaCZ
tady příklad na fotogalerii, klidně si to obšlehni http://petr.grulich77.cz/zednicke-prace.php

Re: TEXT/images HTMS/CSS

Napsal: 03 srp 2015 14:18
od CZechBoY
Zavoláš tu metodu na "obyčejný větě".

Vyžaduje jQuery (jQuery UI není potřeba)

Kód: Vybrat vše

<span id="zelenina">Zelenina</span>
<
p id="zeleninaPopisek">brokolicekvětákpaprika</p>
 

Kód: Vybrat vše

var $zelenina = $('#zelenina');
var 
$zeleninaPopisek = $('#zeleninaPopisek');

$zelenina.on('click', function() {  // při kliknutí se provede tato funkce
    
$zeleninaPopisek.slideToggle();      // zobrazit/skrýt popisek
});

$(
document).ready(function() {
    
$zeleninaPopisek.slideUp();       // schovat popisek po načtení stránky
});