Suche im Forum:
Suchen


Autor Nachricht
Beitrag28.05.2010 um 15:11 (UTC)    
Titel: Bilder ändern, wenn mit Maus darüber gefahren wird

Hallo,

wie kann ich ein Bild verändern, wenn der Besucher meiner Homepage mit seiner Maus darüber fährt?
Beitrag28.05.2010 um 15:43 (UTC)    
Titel:

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. Wink
______________



Zuletzt bearbeitet von the-fun-factory am 28.05.2010, 16:44, insgesamt einmal bearbeitet
Beitrag30.05.2010 um 19:05 (UTC)    
Titel:

Vielen Dank für die Antwort! Werde es die Tage mal ausprobieren.
Beitrag30.05.2010 um 19:35 (UTC)    
Titel:

Es gibt auch noch die Möglichkeit das ganze über "li" zu definieren, also
mit einem CSS Code und li-Links. Im CSS Code wäre dann folgendes
einzufügen:

Zitat:
li.bild1 a
{
background-image: url(Normalbild);
}
li.bild1 a:hover
{
background-image: url(Hoverbild);
}


Um es einzubinden musst du einfach den Code unten in eine div-Box
setzen. Ich habe das mal angedeutet und einen Code gemacht,
damit sollte es gehen:

Zitat:
<li class="bild1"><a href="Ziellink"></a></li>

______________


Zuletzt bearbeitet von sturli am 30.05.2010, 20:35, insgesamt einmal bearbeitet
Beitrag08.06.2010 um 16:33 (UTC)    
Titel:

Hallo,

ich wollte das Bilderwechseln für meine Hauptnavigation- also für keine Textseite- haben. geht das auch?
Beitrag09.06.2010 um 14:48 (UTC)    
Titel:

Natürlich, dan befeht :hover kannst du auf alle möglichen Objekte anwenden.
Zitat:

klassenname {
/*anweisungen normalzustand*/
}

klassenname:hover {
/*anweisungen für hover*/
}


klassenname musst du dann einfach dürch die klasse der navigations-links ersetzen und style-anweisungen festlegen.
______________

Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de