zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Bei Mouse-Over anderes Bild einblenden (Class faden!)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.06.2011, 11:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2011
Beiträge: 8
plums befindet sich auf einem aufstrebenden Ast
Standard 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>
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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.06.2011, 12:04
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Nur zur Info!

Die Frage wird woanders schon behandelt: Bei Mouse-Over anderes Bild einblenden (Class faden!)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.06.2011, 12:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2011
Beiträge: 8
plums befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.06.2011, 12:09
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Dann wäre eine Information darüber, zumindest höflich. Das habe ich für dich einfach mal nachgeholt.

EDIT und wieso hast du keine Lösung erhalten? Du hast nach einem Framework gefragt, diese wurden dir dort schon genannt.
Mit Zitat antworten
  #5 (permalink)  
Alt 04.06.2011, 12:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2011
Beiträge: 8
plums befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.06.2011, 12:17
Benutzerbild von Thielo
Web Ninja
XHTMLforum-Kenner
 
Registriert seit: 17.09.2009
Ort: Stuttgart oder so
Beiträge: 3.372
Thielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein LichtblickThielo ist ein Lichtblick
Standard

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?
Mit Zitat antworten
  #7 (permalink)  
Alt 04.06.2011, 12:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2011
Beiträge: 8
plums befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 04.06.2011, 12:43
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von plums Beitrag anzeigen
oder scriptet mir eine lösungsfunktion, die mir auf die sprünge hilft.
Du bist hier nicht bei "wünsch dir was" - wir helfen dir gerne bei konkreten Fragen, aber wir sind hier nicht unterwegs um dir was zu "skripten"
Mit Zitat antworten
  #9 (permalink)  
Alt 04.06.2011, 12:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.06.2011
Beiträge: 8
plums befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 04.06.2011, 12:52
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Mit deinem Ansatz geht das überhaupt nicht, da du die Klasse änderst. Das läßt sich nicht faden. Die Frage wäre, wie du überblenden möchtest? Sollen beide Bilder gleichzeitig zu sehen sein oder erst eins ausgeblendet und dann das nächste eingeblendet?
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
bild, classname, fade(), jquery, klasse, überblenden

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:03 Uhr.