|
|||
Bei Mouse-Over anderes Bild einblenden (Class faden!)
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> 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);} |
Sponsored Links |
|
||||
Nur zur Info!
Die Frage wird woanders schon behandelt: Bei Mouse-Over anderes Bild einblenden (Class faden!) |
Sponsored Links |
|
|||
das war auch meine frage. ich wußte nicht, dass die foren zusammengehören. dort habe ich noch keine lösung erhalten. ich probier es in verschiedenen foren, damit die chance eine lösung zu erhalten etwas größer wird.
|
|
|||
entschuldige, ich wollte nicht unhöflich sein. ich habe gehofft, dass mir jemand eine code zeigen kann, der funktioniert, damit ich verstehe, wie ich die einzelnen komponenten ansprechen kann. wie binde ich zum beispiel den fade-effekt so ein, dass das aktuell angezeigte bin (die class) ausgeblendet und gleichzeitig die neue class eingeblendet wird?
ich weiß nicht wie ich das scripten soll. das ist meine frage. |
|
||||
Ergibt das was du vorhast überhaupt sinn?
Wofür stehen die Bilder? Was haben die Bilder für einen Hintergrund, also was sind sie? Content oder einfach nur unnütz?
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
|
|||
ich habe ein hintergrund bild in dem bild gibt es 5 kleine auswahlbilder und einen div (farbig hinterlegt mit text...relativ klein am rand). ich sehe also beim start ein größes bild mit dem textfeld an der seite. gehe ich mit der mouse über eines der fünf auswahlbilder, so soll das große bild wechseln (hierbei bekommt das bild eine neue klasse mit dem neuen hintergrundbild). das funzt auch, aber der übergang ist zu hart. würde die bilder weich wechsel, wirkt das viel freundlicher und augenschonender.
da finde ich keine lösungen zu und habe gehofft, dass mir profis helfen können. ich kenne fade-funktionen und möchte auch nicht einfach jquery, sriptaculous, mootools etc. genannt bekommen, denn ich weiß dass es die frameworks gibt. ich finde nur genau zu meinem aufbau kein script, dass mich zu einer funktionierenden lösung bringt. wenn ich da etwas wisst, dann postet doch bitte links, oder scriptet mir eine lösungsfunktion, die mir auf die sprünge hilft. |
|
|||
ich meine auch nur...einen codeansatz scripten. das ihr mir zeigt, wie ich die sache angehen kann, dass sie erfolgreich wird. da hängst bei mir. mein code oben ist auch nur stark vereinfacht um das problem zu schildern.
|
Sponsored Links |
Sponsored Links |
Stichwörter |
bild, classname, fade(), jquery, klasse, überblenden |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
mouse over effekt entfernen | eddi-kett | CSS | 1 | 28.02.2010 20:10 |
Mouse Over Effekt über Link - Extra Bild? | greenberet1 | CSS | 1 | 08.03.2009 19:32 |
mouse over problem | laco1 | CSS | 10 | 17.01.2009 17:32 |
Per :hover anderes HTML-Element einblenden möglich? | accessoire | CSS | 1 | 11.09.2008 16:46 |
Je Ecke ein anderes Bild (background) | michi-muc | CSS | 1 | 14.03.2008 13:11 |