как заменить ссылку href на изображение в переходах

я хочу заменить эту ссылку href на изображение, поэтому я просто хочу сделать движущееся изображение вместо ссылки, легко заменить «a href» на «img src», перемещение запускается javascript «onclick», вы можете мне помочь? если я это сделаю, анимация не работает, так что не знаю, как это сделать, вот Jsfiddle: http://jsfiddle.net/px7ezeka/< /а>

 <!DOCTYPE html>
<html lang="cs-CZ">
<head>
    <meta charset="UTF-8" />
    <meta name="generator" content="Prace">
    <link rel="stylesheet" href="Web9.css">
    <title>Rostik</title>
</head>
<body>
    <div id="links">
        <a class="link" href="#">bullshit</a>
    </div>
    <script>
        document.querySelector('.link').onclick = function () {
            var d = document.getElementById("links");
            d.className = d.className + " fly";
        }
    </script>
</body>
</html>


#links.fly {
    position: absolute;
    margin-left: 400px;
    transition: all 2s ease-out;
}

javascript html css onclick transitions
person Rostislav Danko    schedule 06.11.2014    source источник
comment
это нормально jsfiddle.net/px7ezeka/1?   -  person Alex Filatov    schedule 06.11.2014

Ответы (1)


arrow_upward
0
arrow_downward

Попробуйте это, если вы хотите заменить текст на изображение при нажатии на него:

HTML

<div id="links">
    <a class="link" href="#">bullshit</a>
    <img src="" class="hide image" />
</div>

JAVASCRIPT

document.querySelector('.link').onclick=function() {

            var d = document.getElementById("links");
            d.className = d.className + " fly";  
            $(".image").toggleClass("hide");
            $(".link").toggleClass("hide");
        }

CSS

#links.fly {
    position: absolute;
    margin-left: 400px;
    transition: all 2s ease-out;
}
.hide{
    display:none;
}

Это скрыть ваш текст и показать изображение, которое вы хотите.

Демонстрация на FIDDLE

person kupendra    schedule 06.11.2014