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....
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<script src="/js_webseite/jquery.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="/image/1.png" class="but" id="go1" value="Bild1">
<input type="button" data-bild="/image/5.png" class="but" id="go2" value="Bild2">
<input type="button" data-bild="/image/4.png" class="but" id="go3" value="Bild3">
<input type="button" data-bild="/image/3.png" class="but" id="go4" value="Bild4">
<input type="button" data-bild="/image/2.png" class="but" id="go5" value="Bild5"> </nav>
<div class="container">
<img id="inbild" src="/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>