Multiple image slider on hover not clickable using onClick()

Question

i have this code and it works fine on the image on hover, it plays the images fine, but if i try to click on it to get forward to the link i want to get forward it does not work. Any tips please.

here is the code:

<!doctype html>
<html lang="en">
 <head>
<meta charset="UTF-8" />
<title>test</title>
<meta name="description" content=""/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />


<style>

body{background-color:#000}

.img-wrapper{
width: 300px;
height: 400px;
position: relative;
margin: 0 auto;
cursor:pointer
}
.img-wrapper img{
top: 0px;
left: 0px;
position: absolute;
-webkit-animation: showMe 1.6s linear infinite 0s forwards;
-moz-animation: showMe 1.6s linear infinite 0s forwards;
-o-animation: showMe 1.6s linear infinite 0s forwards;
-ms-animation: showMe 1.6s linear infinite 0s forwards;
animation: showMe 1.6s linear infinite 0s forwards;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
-ms-animation-play-state: paused;
animation-play-state: paused;   
}
.img-wrapper img:nth-child(1){
z-index: 9;
}
.img-wrapper img:nth-child(2){
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
-ms-animation-delay: 0.2s;
animation-delay: 0.2s;
z-index: 8;
}
 .img-wrapper img:nth-child(3){
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
-ms-animation-delay: 0.4s;
animation-delay: 0.4s;
z-index: 7;
}
.img-wrapper img:nth-child(4){
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
-ms-animation-delay: 0.6s;
animation-delay: 0.6s;
z-index: 6;
}
.img-wrapper img:nth-child(5){
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
-ms-animation-delay: 0.8s;
animation-delay: 0.8s;
z-index: 5;
}
.img-wrapper img:nth-child(6){
-webkit-animation-delay: 1.0s;
-moz-animation-delay: 1.0s;
-o-animation-delay: 1.0s;
-ms-animation-delay: 1.0s;
animation-delay: 1.0s;
z-index: 4;
}
.img-wrapper img:nth-child(7){
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
-o-animation-delay: 1.2s;
-ms-nimation-delay: 1.2s;
animation-delay: 1.2s;
z-index: 3;
}
.img-wrapper img:nth-child(8){
-webkit-animation-delay: 1.4s;
-moz-animation-delay: 1.4s;
-o-animation-delay: 1.4s;
-ms-animation-delay: 1.4s;
animation-delay: 1.4s;
z-index: 2;
}
.img-wrapper:hover img{
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
-o-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running;
}



@-webkit-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

@-moz-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

@-o-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

@-ms-keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}

@keyframes showMe {
0% { visibility: visible; z-index: 100; }
12.5% { visibility: visible; z-index: 100; }
25% { visibility: hidden; z-index: 0; }
100% { visibility: hidden; z-index: 0; }
}





</style>

</head>

<body>
<!--Top Bar Starts-->


<div class="img-wrapper" id="beachtrain">

<img src="btns/hover1.png" alt="image01"/>
<img src="btns/hover2.png" alt="image02"/>
<img src="btns/hover3.png" alt="image03"/>
<img src="btns/hover1.png" alt="image04"/>
<img src="btns/hover2.png" alt="image05"/>
<img src="btns/hover3.png" alt="image06"/>
<img src="btns/hover2.png" alt="image07"/>
<img src="btns/hover3.png" alt="image08"/>




</div>











    <script>
        $("#beachtrain").click(function() {
  window.location.href = 'http://www.google.co.uk'
});
    </script>




</body>
</html>

Answer 1

Try putting your script code in a document.ready block. In jquery you can do it with a shortcut:

$(function(){
    $('#beachtrain').click(function(){
        // your code 
    });
});

Answer 2

I'm not sure if you just left it out, but your script at the bottom is using jquery and you don't have jquery included. If you don't want to use it, go with this:

<script>
    var myElement = document.getElementById('beachtrain');
    myElement.addEventListener('click', function(e) {
        window.location.href = 'http://www.google.co.uk'
    });
</script>

Is there any reason you're using this instead of just making your beachtrain element a link? That'd be the cleanest solution. See below for an example:

<a href="http://www.google.co.uk" class="img-wrapper" id="beachtrain" style="display:block;">
  <img src="btns/hover1.png" alt="image01"/>
  <img src="btns/hover2.png" alt="image02"/>
  <img src="btns/hover3.png" alt="image03"/>
  <img src="btns/hover1.png" alt="image04"/>
  <img src="btns/hover2.png" alt="image05"/>
  <img src="btns/hover3.png" alt="image06"/>
  <img src="btns/hover2.png" alt="image07"/>
  <img src="btns/hover3.png" alt="image08"/>
</a>

Multiple image slider on hover not clickable using onClick()

Question

2 answers

solution1
1 2016-07-01 16:20:58

solution2
0 ACCPTED 2016-07-01 16:22:08

Multiple image slider on hover not clickable using onClick()

Question

2 answers

solution1 1 2016-07-01 16:20:58

solution2 0 ACCPTED 2016-07-01 16:22:08

solution1
1 2016-07-01 16:20:58

solution2
0 ACCPTED 2016-07-01 16:22:08