mit Mosue over button Bilder silder steuern

Hallo ich möchte mein Silder auch mit mouse over steuern können, das heißt, wenn man auf dem Button drüber fliegt das auch das Bild geändert wird, zum Button ....aber wie stelle ich mir das an....

Der hier verwendete Code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> *{ margin:0; padding:0; } .container{ margin: 0 auto; margin-top: 20px; position:relative; width: 70%; background: #1c1c1c; border: solid 10px #616161; border-radius:10px ; } nav{ width:100%; text-align:center; background:black; padding:20px; } #inbild{ width: 100%; height: 100%; } .prev,.next{ width: 10%; height:calc(100% - 20px); position:absolute; top:calc(0% + 20px); background-color: rgba(88, 88, 88,.2); color:rgba(244, 244, 244,.9); z-index: 99; transition: .45s; cursor: pointer; } .next{ right:0; } .prev span,.next span{ font-size:150px; height:150px; position:absolute; left:10px; top:calc(50% - 75px); padding:0; margin:0; } .prev:hover, .next:hover{ transition: .3s; background-color: rgba(88, 88, 89,.8); color: #ffffff; } input{ padding:5px 20px 5px 20px; font-size:20px; } </style> <nav><input type="button" data-bild="https://basti1012.bplaced.net/image/6.png" class="but" id="go1" value="Bild1"> <input type="button" data-bild="https://basti1012.bplaced.net/image/5.png" class="but" id="go2" value="Bild2"> <input type="button" data-bild="https://basti1012.bplaced.net/image/4.png" class="but" id="go3" value="Bild3"> <input type="button" data-bild="https://basti1012.bplaced.net/image/3.png" class="but" id="go4" value="Bild4"> <input type="button" data-bild="https://basti1012.bplaced.net/image/2.png" class="but" id="go5" value="Bild5"> </nav> <div class="container"> <img id="inbild" src="https://basti1012.bplaced.net/image/1.png"> <label class="prev" for="i5"><span>‹</span></label> <label class="next" for="i2"><span>›</span></label> </div> <script> $('.but').hover(function(){ j=$(this).data('bild'); $('#inbild').attr('src',j) }).click(function(){ alert('Hier könnte man den Link "'+j+'" verlinken ,oder das Bild und den Button direkt verlinken'); }); v=1; $('.prev').click(function(){ r=$('#go'+v).data('bild'); $('#inbild').attr('src',r) v++; if(v>=5){ v=5; } }); $('.next').click(function(){ r=$('#go'+v).data('bild'); $('#inbild').attr('src',r) v--; if(v<=1){ v=1; } }); </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!