Avatar
Libor Šimo (libcosenior):

Povedzme že mám na v bloku niekoľko obrázkov a keď na jeden kliknem, zväčší sa na veľkosť bloku, ale chcel by som, aby sa zároveň ostatným obrázkok zmenilo opacity na nulu.
Dá sa toto dosiahnuť klikom na jeden obrázok?

Odpovědět 23.3.2014 8:20
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Libor Šimo (libcosenior):

Mám takýto kód.

<!--index.html-->

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
        <link rel="stylesheet" href="style.css" type="text/css">
        <title>testy css</title>
        </head>

        <body>
                <div>
                <img class="upravene1" src="obrazky/simi.jpg" alt="Simonka" />
                <img class="upravene2" src="obrazky/simi.jpg" alt="Simonka" />
                </div>

  </body>
</html>

/*style.css*/

.upravene1 {
        position: fixed;
        left: 0px;
        top: 0px;
  width: 10%;
        transition-property: width padding;
        transition-durwation: 5s;
}
.upravene2 {
        position: fixed;
        left: 200px;
        top: 0px;
        width: 10%;
        transition-property: widfh padding;
        z-duration: 5s;
}

/* kliknutie na element */
img:hover {
  position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        padding-left: 0px;
        padding-top: 0px;
}

div {
        width: 100%;
}

a používam obrázok v prílohe.
Keď kliknem na ľavý obrázok, ten sa zväčší na celý div a pravý sa za ním schová.
Ale keď kliknem na pravý, zväčší sa, ale ľavý sa neschová a ostane viditeľný.

Poradí mi niekto, ako vzriešiť, aby sa ľavý obrázok tiež schoval?

Nahoru Odpovědět 23.3.2014 9:41
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Libor Šimo (libcosenior)
Zdeněk Pavlátka:
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
<style>
.upravene1 {
       position: fixed;
       left: 0px;
       top: 0px;
       width: 10%;
       transition-property: width padding;
       transition-durwation: 5s;
}
.upravene2 {
       position: fixed;
       left: 200px;
       top: 0px;
       width: 10%;
       transition-property: width padding;
       z-duration: 5s;
}

div {
       width: 100%;
}
</style>
    <title>testy css</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
    $(".upravene1").mouseenter(function(){
        $(".upravene1").css({
            "left": "0px",
            "top": "0px",
            "width": "100%",
            "padding-left": "0px",
            "padding-top": "0px"
        });
        $(".upravene2").css({
            "left": "0px",
            "top": "0px",
            "width": "0%",
            "padding-left": "0px",
            "padding-top": "0px"
        });
    });
    $(".upravene2").mouseenter(function(){
        $(".upravene2").css({
            "left": "0px",
            "top": "0px",
            "width": "100%",
            "padding-left": "0px",
            "padding-top": "0px"
        });
        $(".upravene1").css({
            "left": "0px",
            "top": "0px",
            "width": "0%",
            "padding-left": "0px",
            "padding-top": "0px"
        });
    });
    $(".upravene1").mouseleave(function(){
        $(".upravene1").css({
            "left": "0px",
            "top": "0px",
            "width": "10%"
        });
        $(".upravene2").css({
            "position": "fixed",
            "left": "200px",
            "top": "0px",
            "width": "10%"
        });
    });
    $(".upravene2").mouseleave(function(){
        $(".upravene1").css({
            "left": "0px",
            "top": "0px",
            "width": "10%"
        });
        $(".upravene2").css({
            "position": "fixed",
            "left": "200px",
            "top": "0px",
            "width": "10%"
        });
    });
});
</script>
       </head>

       <body>
               <div>
               <img class="upravene1" src="http://www.itnetwork.cz/images/forum/80606_image_0_thumb.png" alt="Simonka" />
               <img class="upravene2" src="http://www.itnetwork.cz/images/forum/80606_image_0_thumb.png" alt="Simonka" />
               </div>

  </body>
</html>

přibližně takhle by to šlo přes javaScript.
EDIT: dalo by se to zjednodušit, ale na to teď nemám čas :) ten js by měl být ve zvláštním souboru

Editováno 23.3.2014 10:24
Nahoru Odpovědět  ±0 23.3.2014 10:23
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Zdeněk Pavlátka
Tým ITnetwork
Avatar
Odpovídá na Zdeněk Pavlátka
Zdeněk Pavlátka:

Vím, že to není přímo odpověď na původní otázku. Tohle je výsledek diskuze přes chat.

Nahoru Odpovědět 23.3.2014 10:33
Kolik jazyků umíš, tolikrát jsi programátor.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
Honza Bittner:

Něco jako

div:hover img
{
  opacity: 0;
}

div img:hover
{
  opacity: 1;
}

by mělo fungovat, ne?

Co máš namysli tou změnou velikostí?

Editováno 23.3.2014 10:39
Nahoru Odpovědět  +3 23.3.2014 10:35
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
Jiří Gracík:

Popravdě nevím, co by ten kód měl dělat, pokud to, co si myslím, tak je tak na 20 řádku css. Každopádně tam teď vidím chybu v css, mělo by tam být duration :)

transition-durwation: 5s;
Nahoru Odpovědět 23.3.2014 10:42
Creating websites is awesome till you see the result in another browser ...
Avatar
Libor Šimo (libcosenior):

Díky všetkým za reakcie. Tú chybu som si tiež všimol.:-)

Nahoru Odpovědět 23.3.2014 11:38
Aj tisícmíľová cesta musí začať jednoduchým krokom.
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 7 zpráv z 7.