Hi,
das kann man ganz einfach per Javascript oder per CSS lösen. Ich will dir nur die CSS variante zeigen - die ist zwar nicht kan so professionell, in meinen augen aber viel einfacher nachzuvollziehen.
Zuerst erstellen wir einen leeren Container; das Bild wird später als Hintergrund gesetzt. Eionen Comntainer in HTMl erstellt man über den div tag. Zitat: <div id="bildbox1"></div> Wie du siehst habe ich dem Container eine Id gegeben. Mit Hilfe dieser Id legen wir nun den Hintergrund fest: Zitat: <style type="text/css">
<!--
#bildbox1 {
background-image: url(http://bildurl.de);
}
-->
</style> Die Eigenschaft background-image legt das Hintergrundbild fest (lass dich bitte nicht verwirren, man wird später nicht sehen, dass es nur ein hintergrund ist). In den Klammern musst du die Url des Bildes eingeben, dass zu sehen sein soll, wenn die maus nicht auf dem Bild ist.
So, jezt kümmern wir uns um den hover effekt. Auch der lässt sich über die Id genau definieren: Zitat: <style type="text/css">
<!--
#bildbox1 {
background-image: url(http://bildurl.de); /*Ausgangsbild*/
}
#bildbox1:hover {
background-image:url(http://hoverbild.de); /*Bild für den hover effekt*/
}
-->
</style> Wie du siehst habe ich den vorherigen code einfach nur ergänzt. Auch hier musst du die Bildurl für das Bild angaben, dass beim hover erscheinen soll.
Was wir bisher vergessen haben ist die angabe der Maße. Der Container bekommt dieselben maße, wie die beiden bilder (das beide Bilder gleichgroß sein sollten ist ja wohl klar). So sieht man später nicht, dass die Bilder als hintergrund gesetzt sind. Also: Zitat: <style type="text/css">
<!--
#bildbox1 {
background-image: url(http://bildurl.de); /*Ausgangsbild*/
width:300px; /*Maßangaben. Gleich den Hintergrundbildern*/
height:300px;
}
#bildbox1:hover {
background-image:url(http://hoverbild.de); /*Bild für den hover effekt*/
}
-->
</style> jezt müssen nurnoch die maße angepasst werden. Die Maße, die für #bildbox1 angegeben werden müssen, sind dieselben, die die Bilder haben.
und fertig! Komplett sieht das ganze dann so aus:
dieser code (angabe für hintergründe, maßangaben) kann in "Text über dem design" stehen (es würde auch funktionieren, wenn man den code in den seiteneditor einfügt. Wenn du beide Copdes zusammen stehen haben möchtest, kannst du das auch tun): Zitat: <style type="text/css">
<!--
#bildbox1 {
background-image: url(http://bildurl.de); /*Ausgangsbild*/
width:300px; /*Maßangaben. Gleich den Hintergrundbildern*/
height:]300px;
}
#bildbox1:hover {
background-image:url(http://hoverbild.de); /*Bild für den hover effekt*/
}
-->
</style> Und dieser code muss anstelle ders img tags (welcher sonst zur einbilndung von Bilder verwendet wird) in die Seite eingefügt werden. Auf Quelltext klicken und den code an einer passenden stelle einfügen - da wo das bild erscheinen soll. Der code: Zitat: <div id="bildbox1"></div>
und das was dann auch schon. ______________
Zuletzt bearbeitet von the-fun-factory am 28.05.2010, 16:44, insgesamt einmal bearbeitet
|