| Autor | Zpráva | ||
|---|---|---|---|
| wojmirek Profil |
#1 · Zasláno: 23. 7. 2012, 20:27:06
Zdravím, nikdy jsem s WEBy nepracoval, proto berte to co napíšu s velkou rezervou. Chtěl bych docílit toho, že když kliknu na tlačítko(obrázek), tak se skryje jeden obrázek a pomocí nějaké animace se na tom stejném místě objeví další.
Nevím jak to udělat, jestli stačí jen HTML + JS, nebo dělat podmínky přes PHP a proto se ptám Vás. ...... //Osobně bych to udělal nějak takhle: $promenna if(select <img>){ // obrazně vytvořená podmínka, která říká: pokud uživatel klikne na tlačítko (obrázek) Hide(<img1>) // skryje obrázek 1 Animace<img2> // úkáže nový obrázek 2 s animací Set(promenna,1);} // nastaví hodnotu proměnné na 1 if(select <img0>){ if(Get(promenna)==1){ // pokud najde v hodnotě proměnné 1 Hide(<img2> Animace<img2> Set(promenna,0);}} // smaže hodnotu proměnné pro další použití // když pominu správnost scriptu, tak nějak takhle bych si to představil // jde o to, že když kliknu na tlačítko, skryje se jeden obrázek o oběví se druhý a když kliknu na druhé tlačítko, vykoná se opačná funkce ...... Ukázal by mi někdo řešení (pravděpodobně jednodušší) jak by to mohlo fungovat? Děkuji |
||
| Petr ZZZ Profil |
#2 · Zasláno: 23. 7. 2012, 21:34:58
Na tohle stačí HTML + CSS. Princip je v tom, že oba stavy jsou v jednom obrázku, ze kterého je vidět vždy jen část. Pomocí CSS se obrázek posouvá a tak se určuje, která jeho část je zrovna vidět. Podívej se třeba na Bubákovu ukázku CSS rollover jedním obrázkem (doporučuji shlédnout i další ukázky menu v Bubákově "náhodném výbuchu").
|
||
| wojmirek Profil |
#3 · Zasláno: 23. 7. 2012, 22:04:56
Děkuji zítra se na to podívám ... a můžu v tom použít i animace? nebo jak by vypadal kód při jejich přítomnosti?
|
||
| Petr ZZZ Profil |
#4 · Zasláno: 23. 7. 2012, 22:30:02
Obrázky ve formátu
.gif mohou být i animované. Mohla by být například polovina obrázku pohyblivá a polovina statická.
|
||
| wojmirek Profil |
#5 · Zasláno: 24. 7. 2012, 17:16:31
No tak to nevím, jde mi totiž o to, že když kliknu na tlačítko tak jeden obrázek odjede ze středu směrem doprava a v tu chvíli zrovna vyjede další obrázek z leva na střed .
|
||
| jenikkozak Profil |
#6 · Zasláno: 24. 7. 2012, 17:23:53
wojmirek:
Tak na tohle je už CSS krátké. Budeš potřebovat JS; PHP ne. |
||
| wojmirek Profil |
#7 · Zasláno: 24. 7. 2012, 17:40:07
Díky za informaci. Mohl by mi někdo napsat tedy tu podstatu, jak to bude fungovat?
Děkuji. |
||
| wojmirek Profil |
#8 · Zasláno: 24. 7. 2012, 21:16:58
Stačilo by mi, kdyby jste mi napsali, jaké funkce k tomu mám použít? .. jak udělám třeba to, že když kliknu na tlačítko tak nastaví display:none; a když na to tlačítko kliknu znovu tak se obrázek znovu objeví.?? díky
|
||
| _es Profil |
#9 · Zasláno: 24. 7. 2012, 21:58:19
wojmirek:
„jaké funkce k tomu mám použít?“ Nájdi si nejaké kódy s nastavovaním vlastnosti className a inšpiruj sa. |
||
|
Časová prodleva: 4 dny
|
|||
| wojmirek Profil |
#10 · Zasláno: 28. 7. 2012, 15:53:20
Mám takový problém... to co mi funguje v PSPadu mi nefunguje v jiném prohlížeči. Jedná se o jquery.
Přesně jde o to, že když kliknu na tlačítko, tak se mi má schovat obrázek, jenže se tak nestane (tedy ne v prohlížeči) .. v PSPadu to jde ale normálně. Jak to vypadá?: [HTML] <body>
<div id="info"><img src="img/info.png" onmouseover="this.src='img/svinfo.png'" onmouseout="this.src='img/info.png'"></div>
<div id="left"><img src="img/Rpanel.png" onmouseover="this.src='img/svRpanel.png'" onmouseout="this.src='img/Rpanel.png'"></div>
<div id="right"><img src="img/Lpanel.png" onmouseover="this.src='img/svLpanel.png'" onmouseout="this.src='img/Lpanel.png'"></div>
<div class="blocky">
<div id="block1"><img src="img/omd.png"></div>
<div id="block2"><img src="img/obsah.png"></div>
</div>
</body> $(document).ready(function(){
$("#block2").hide();
$("#right").click(function(){
$("#block1").toggle();
$("#block2").toggle();
});
$("#left").click(function(){
$("#block1").toggle();
$("#block2").toggle();
});
$("#info").click(function () {
$(".blocky").toggle()
});
});Poradíte mi někdo prosím? Děkuji. |
||
| wojmirek Profil |
#11 · Zasláno: 29. 7. 2012, 15:10:57
Pomohl by mi někdo prosím?
Děkuji. |
||
| wojmirek Profil |
#12 · Zasláno: 30. 7. 2012, 21:33:50
Tak jsem to zkoušel vymyslet pomocí proměnných ale vůbec mi to nefunguje.
Mám to takhle: [HTML] <div id="info"><img src="img/info.png" onclick="infooo()" onmouseover="this.src='img/svinfo.png'" onmouseout="this.src='img/info.png'"></div> function infooo()
{
var skryte = 0;
if (skryte==1){
skryte = 0;
block1.style.display="block"
block2.style.display="block"
$("#vlevo").hide()
}
if (skryte==0){
skryte = 1;
block1.style.display="none"
block2.style.display="none"
$("#vlevo").show()
}
}Jak to mám prosím Vás udělat? Nebo poradí mi někdo jiné řešení celého problému? Děkuji moc. |
||
| Ugo Profil |
#13 · Zasláno: 31. 7. 2012, 10:28:06 · Upravil/a: Ugo
wojmirek:
krom chybějících středníků to asi nebude fungovat nikdy, dej var skryte = 0 před funkci jako globální. Možností toho čeho chceš docílit je spousta, šlo by to jistě i přes css transition (ale podpora neni dobrá). toto najíždení jsem řešil nedávno, rozhodl jsem se pro posouvání background-position abych nemusel pozicovat, žel k tomu (co se jquery týče) je třeba doplněk. Další možnost je například div okénka s overflow:hidden a v něm absolutně širší div kterému budeš animovat pozici left. |
||
|
Časová prodleva: 11 let
|
|||
0