Bild Verlinkung Nicht Durch a Href Sondern Anders Möglich
Nun sollen die Buttons aber anklickbar sein. Und da entsteht das Problem. Der Code ist so, dass innerhalb des div nur img Tags vorkommen (dürfen) und diese dann gefaded werden.
Fügt man in diesem div nun einen ahref hinzu, funktioniert der fade nicht mehr
Der hier verwendete Code
<style>
*{
margin:0;
padding:0;
}
#box{
width:800px;
position:absolute;
top:10px;
left:10px;
border:1px solid black;
height:400px;
overflow:hidden;
}
#bild1,#bild7{
margin-top:70px;
}
#bild2,#bild6{
margin-top:50px;
}
#bild3,#bild5{
margin-top:30px;
}
#bild4{
margin-top:10px;
}
a{
border:2px solid white;
width:104px;
height:100px;
margin-top:0;
float:left;
}
.klein{
width:100%;
}
#ankucken{
width:100%;
height:50vh;
min-height:230px;
border:1px solid black;
overflow:hidden;
}
.big{
height:100%;
display:none;
}
#bild1:hover ~ div > #bild8,
#bild2:hover ~ div > #bild9,
#bild3:hover ~ div > #bild10,
#bild4:hover ~ div > #bild11,
#bild5:hover ~ div > #bild12,
#bild6:hover ~ div > #bild13,
#bild7:hover ~ div > #bild14{
display:block;
margin:0 auto;
}
</style>
<div id="box">
<a href="#" id="bild1"><img class="klein" src="/image/2.png"></a>
<a href="#" id="bild2"><img class="klein" src="/image/3.png"></a>
<a href="#" id="bild3"><img class="klein" src="/image/4.png"></a>
<a href="#" id="bild4"><img class="klein" src="/image/5.png"></a>
<a href="#" id="bild5"><img class="klein" src="/image/6.png"></a>
<a href="#" id="bild6"><img class="klein" src="/image/7.png"></a>
<a href="#" id="bild7"><img class="klein" src="/image/8.png"></a>
<div id="ankucken">
<img class="big" src="/image/9.png" id="bild8">
<img class="big" src="/image/7.png" id="bild9">
<img class="big" src="/image/2.png" id="bild10">
<img class="big" src="/image/7.png" id="bild11">
<img class="big" src="/image/3.png" id="bild12">
<img class="big" src="/image/9.png" id="bild13">
<img class="big" src="/image/3.png" id="bild14">
</div>