Hallo,
kann mir bitte jemand einen tip geben:
ich habe einen Div (id= bild) und je Hintergundbild eine eigene Klasse angelegt. Dann gibt es fünf Vorschaubilder und jedesmal, wenn man mit der Maus über ein Vorschaubild geht, soll das entsprechende Bild in dem Div #bild angezeigt werden. Das ganze habe ich so realisiert und das funktioniert auch gut. Nun möchte aber, dass die Bilder weicher überblendet werden, weil die harten wechsel für den user sehr anstrengend sind. Wie mache ich das. Die Bilder sollten bestmöglich als Klasse definiert bleiben. Als Image <img> kann ich hier keinen weiteren Divs mit Texten darin verschachteln.
Hier mein Aufbau:
HTML-Code:
<div id="bild" class="bild-1"> ... </div>
<div id="container-auswahl">
<div id="vors" class="vors-1" onmouseover="javascript:document.getElementById('bild').className='bild-1'"></div>
<div id="vors" class="vors-2" onmouseover="javascript:document.getElementById('bild').className='bild-2'"></div>
<div id="vors" class="vors-3" onmouseover="javascript:document.getElementById('bild').className='bild-3'"></div>
<div id="vors" class="vors-4" onmouseover="javascript:document.getElementById('bild').className='bild-4'"></div>
<div id="vors" class="vors-5" onmouseover="javascript:document.getElementById('bild').className='bild-5'"></div>
</div>
Style.css:
Code:
/*Bildansicht*/
#bild{ width: 900px; height: 400px;}
/*Alle Bildmotive*/
.bild-1{background-image:url(../img/bild-1.png);}
.bild-2{background-image:url(../img/bild-2.png);}
.bild-3{background-image:url(../img/bild-3.png);}
.bild-4{background-image:url(../img/bild-4.png);}
.bild-5{background-image:url(../img/bild-5.png);}
/*Vorschaubilder*/
#vors{ width: 70px; height: 60px;}
.vors-1{ background-image:url(../img/vors-1.png);}
.vors-2{ background-image:url(../img/vors-2.png);}
.vors-3{ background-image:url(../img/vors-3.png);}
.vors-4{ background-image:url(../img/vors-4.png);}
.vors-5{ background-image:url(../img/vors-5.png);}
Wie kann ich hier sinnvoll einen fade-effekt mitt js oder entsprechend vorgefertigtem framework einbinden?