NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Libor HUDÁK
Člen
Avatar
Libor HUDÁK:12.11.2017 20:37

eším problém:
mám obrázek, který se mi po najetí myší zvětší...
a potřeboval bych, aby se po zvetšení překryl dalším (průhledné png s popiskami)...

kód:

<!doctype html>
<html>
<head>
<style type="text/css">
button {
transition: 0.5s transform;
border-radius: 8px;
border: 2px solid #CC0000;
margin-top: 13px;
margin-right: 15px;
margin-bottom: 18px;
margin-left: 13px;
background-color: #FFFFFF;}

button:hover {
margin-top: 11px;
margin-right: 14px;
margin-bottom: 15px;
margin-left: 12px;
border: 3px solid #CC0000;}
</style>

<script>
function zvetsit(el) {
var pomer = 1.3;
var transformace = "scale(" + pomer + ")";
el.style.webkit­Transform = transformace;
el.style.mozTran­sform = transformace;
el.style.oTransform = transformace;
el.style.MsTran­sform = transformace;
el.style.transform = transformace;}

function zmensit(el) {
var pomer = 1;
var transformace = "scale(" + pomer + ")";
el.style.webkit­Transform = transformace;
el.style.mozTran­sform = transformace;
el.style.oTransform = transformace;
el.style.MsTran­sform = transformace;
el.style.transform = transformace;}
</script>

</head>

<body>
<button onMouseOver="zvet­sit(this)" onMouseOut="zmen­sit(this)" onclick="javas­cript:location­.href='$PHP_SEL­F?page=1'">
<img src="image.jpg" width="170" height="170"> </button>
</body>
</html>

děkuji za každou radu

libor [email protected]

 
Odpovědět
12.11.2017 20:37
Avatar
Verquido
Tvůrce
Avatar
Odpovídá na Libor HUDÁK
Verquido:12.11.2017 21:18

Jdi na to přes CSS. Na tohle je zbytečné používat JavaScript :)

 
Nahoru Odpovědět
12.11.2017 21:18
Avatar
Cobis
Člen
Avatar
Odpovídá na Libor HUDÁK
Cobis:12.11.2017 21:45

Třeba takto:

<!doctype html>
<html>
    <head>
        <style type="text/css">
            button {
                transition: 0.5s transform;
                border-radius: 8px;
                border: 2px solid #CC0000;
                margin-top: 13px;
                margin-right: 15px;
                margin-bottom: 18px;
                margin-left: 13px;
                background-color: #FFFFFF;

                position: relative;
                width: 186px;
                height: 186px;
            }

            button img {
                position: absolute;
                left: 8px;
                top: 8px;
            }

            button:hover {
                margin-top: 11px;
                margin-right: 14px;
                margin-bottom: 15px;
                margin-left: 12px;
                border: 3px solid #CC0000;
            }
        </style>

        <script>
            var image = document.createElement("img");
            image.width = "170";
            image.height = "170";
            image.src = "frontImage.png";

            function zvetsit(el)
            {
                el.appendChild(image);
                var pomer = 1.3;
                var transformace = "scale(" + pomer + ")";
                el.style["webkitTransform"] = transformace;
                el.style["mozTransform"] = transformace;
                el.style.oTransform = transformace;
                el.style["MsTransform"] = transformace;
                el.style.transform = transformace;
            }

            function transitionEnd(event)
            {
                this.removeChild(this.lastChild);
                this.removeEventListener("transitionend", transitionEnd);
            }

            function zmensit(el)
            {
                el.addEventListener("transitionend", transitionEnd);
                var pomer = 1;
                var transformace = "scale(" + pomer + ")";
                el.style["webkitTransform"] = transformace;
                el.style["mozTransform"] = transformace;
                el.style.oTransform = transformace;
                el.style["MsTransform"] = transformace;
                el.style.transform = transformace;
            }
        </script>
    </head>

    <body>
        <button onmouseover="zvetsit(this)" onmouseout="zmensit(this)">
            <img src="obr.jpg" width="170" height="170" alt="">
            <!--<img src="frontImage.jpg" width="170" height="170" alt="">-->
        </button>
    </body>
</html>

Já bych požil nějakou knihovnu na animaci.

Verquido, jak by to bylo pouze v CSS? Není tam nutné zachytit událost konce animace?

 
Nahoru Odpovědět
12.11.2017 21:45
Avatar
Libor HUDÁK
Člen
Avatar
Odpovídá na Cobis
Libor HUDÁK:12.11.2017 21:56

ajajaj... <:)
tak jasně CSS udělal bych v pohodě každý zvlášť
zvětšení přes "transaction" a prolnutí přes opacitu...
ale nevím jak dát dohromady dvě animace na dvou obrázcích
přes vrstvy (z-index)? a zároveňa aby to byl "a href" odkaz? jsem z toho volako zmeteny...

potrápím se s tím kódem a dám vědět
díky moc.... <:)

Libor

 
Nahoru Odpovědět
12.11.2017 21:56
Avatar
Lukáš Křehula
Tvůrce
Avatar
Odpovídá na Libor HUDÁK
Lukáš Křehula:12.11.2017 22:59

Když ty obrázky od sebe nějak odlišíš (ID nebo classou) tak to nebude problém přes CSS, např.

button:hover > img.obrazek-zvetseni {

}

button:hover > img.obrazek-prekryti {

}
 
Nahoru Odpovědět
12.11.2017 22:59
Avatar
Libor HUDÁK
Člen
Avatar
Odpovídá na Lukáš Křehula
Libor HUDÁK:19.1.2018 21:34

lukáši, super... vypadá, že to funguje...
poladím to ke svému účelu a dám vědět jak to dopadlo <:)

(omlouvám se za nepřítomnost měl jsem teď čtvrt roku moc práce...)

 
Nahoru Odpovědět
19.1.2018 21:34
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 6 zpráv z 6.