Autor Zpráva
wojmirek
Profil
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
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
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
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
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
wojmirek:
Tak na tohle je už CSS krátké. Budeš potřebovat JS; PHP ne.
wojmirek
Profil
Díky za informaci. Mohl by mi někdo napsat tedy tu podstatu, jak to bude fungovat?
Děkuji.
wojmirek
Profil
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
wojmirek:
jaké funkce k tomu mám použít?
Nájdi si nejaké kódy s nastavovaním vlastnosti className a inšpiruj sa.
wojmirek
Profil
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>   
[JS]
$(document).ready(function(){
    
    $("#block2").hide();
    

    $("#right").click(function(){
    $("#block1").toggle();
    $("#block2").toggle();
  });
  
    $("#left").click(function(){
    $("#block1").toggle();
    $("#block2").toggle();
  });
  
  
    $("#info").click(function () {
    $(".blocky").toggle()
    });

});
... A ještě mám problém s tím, že když první kliknu na INFO (čili se skryjou blocky), a pak kliknu na Rpanel nebo Lpanel a pak zase na INFO -> tak se oba dva blocky opět zobrazí, jenže zaraz, čili se překrývají.
Poradíte mi někdo prosím?
Děkuji.
wojmirek
Profil
Pomohl by mi někdo prosím?
Děkuji.
wojmirek
Profil
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>
[JS]
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()
    }
    
}
Když kliknu na INFO, tak se mi sice vykoná to, co splňuje podmínka "if (skryte==0)" ale už se nevykoná druhá podmínka: "if (skryte==1)"

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
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.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: