mouse over spezial frage

laco1 · 15. Januar 2009, 21:07

hallo,

ich habe gerade ein kleines problem, bei dem ich nicht so recht weiterkomme.

und zwar soll bei einem roll-over eines von drei übereinanderliegenden bildern erscheinen und dafür zwei "verschwinden".
am besten lässt sich das problem an hand von bildrn erklären (siehe anhang)

Bild "start": hier sind alle bilder noch übereinander
Bild mouse-over1: jetzt geht man mit der mouse über den ersten button - es erscheint ein pfad und zwei verschwinden
Bild mouse-over2: beim zweiten ebenso
Bild mouse-over3: und so weiter

der header und der footer sollen so stehen bleiben, später wird dort noch das logo zu sehen sein...

flash und frames wollte ich hier auf jeden fall vermeiden.
eine gif würde glaube ich hier nicht funktionieren, da ich innerhalb der datei nicht drei unterschiedliche punkte mit einem roll-over belegen kann, sondern nur das eine gif insgesamt.

könnte man sowas in css lösen? ich weiß, dass es eine funktion mit "sichtbar" und "unsichtbar" gibt. kann man diese hier anwenden und mit einem roll-over verbindenß

viele grüße
laco

Torben Brodt · 15. Januar 2009, 21:47

sowas wie rollover bietet CSS nicht. Das könntest du nur mit JavaScript nachbauen. Um die Arbeit zu erleichtern gibt es dazu spezielle Bibliotheken. Zum Beispiel JQUERY unter docs.jquery.com/UI/Effects/Slide
Einen Slide Effekt finde ich bei deinem Beispiel nicht gut.

Du speicherst einfach die 3 Einzelbilder und legst diese transparentem Hintergrund übereinander.

Quellcode

#box {
position:relativ;
width:500px;
height:500px
background-color:#000;
}
#box img {
position:absolute;
top:0px;
left:0px;
width:500px;
height:500px;
}

Alles anzeigen

Quellcode

<div id="box">
<img src="bild1.png" id="bild1" alt=""/>
<img src="bild2.png" id="bild2" alt=""/>
<img src="bild3.png" id="bild3" alt=""/>
</div>

Deine 3 Button können dem Prinzip einer Schablone folgen. Der Kreis in der Mitte ist Transparent und wird außen schwarz umrandet.
Wenn du dem Bild selbst einen Hintergrund gibst, scheint die Mitte durch.

Quellcode

<div id="buttons">
<img src="button1.png" id="button1" alt=""/>
<img src="button1.png" id="button2" alt=""/>
<img src="button1.png" id="button3" alt=""/>
</div>

Quellcode

#button img {
float:left;
width:150px;
background-color:#fff;
}
#button img:hover {
background-color:#00ff00;
}

Lemmi · 15. Januar 2009, 22:49

Um d0nut zu korrigieren: Solche Rollover wären mit CSS theoretisch möglich und auch sehr einfach umzusetzen. Nur gibt es dann nicht so sanfte Übergänge beim Erscheinen und Verschwinden. Ist dir das egal?
Andernfalls hat d0nut natürlich recht. JavaScript ist die einzige Variante, die dir da noch übrig bleibt.

laco1 · 16. Januar 2009, 09:38

hi dOnut,

der java-slide effect ist dafür wirklich nicht so gut.

mit float hatte ich bis jetzt noch nicht gearbeitet, deswegen verstehe ich noch nicht so recht, wie die einzelnen codes-schnipsel zusammen funktionieren.

ich versuche mal zu analysieren:

box - klar ist die box wo sich alles befindet
box img - ?

button img - du hast bei den buttons in html id="buttons1" angegeben, aber im css "button img" - d.h. um beides zu vebinden, muss man in css "button1 img", "button2 img" und button3 img" schreiben?
button hover - der hover effekt. d.h. die hintergrundfrabe ändert sich.

wie sieht das ganze oben im header aus? da könnte ich das zum beispiel nicht machen. auch die buttons sind ja vorher alle grau, die linien alle unterschiedlich farbig.

laco1 · 16. Januar 2009, 17:13

ich habe noch etwas gefunden, leider funktioniert das bei mir nicht:

das gefundene:
alistapart.com/d/sprites/ala-image3.html#

und
meine version davon

ich hatte auch versucht alle parameter zu ändern, nur leider kommt dadurch nur etwas zerhacktes raus.

Torben Brodt · 17. Januar 2009, 10:34

Einfach die Bilder austauschen kannst du natürlich auch. Meine Version ist besser auf Ladezeiten optimiert und flexibler zu erweitern.

Bilder austauschen kannst du ganz einfach mit CSS

Quellcode

#bild1 {
display:block;
width:500px;
height:500px;
background-image:url(bild1.jpg);
}
#bild1:hover {
background-image:url(bild1-hover.jpg);
}

Quellcode

<a id="bild1"></a>

Lies dich am besten selbst erstmal in HTML & CSS ein. Siehe Literatur Thread. Selfhtml ist deine erste Wahl. Hier fertige Lösungen hilft keinem ;)

Lemmi · 18. Januar 2009, 11:10

- und natürlich kannst du hierbei auch andere Teile deiner Seite in die Links mit einbinden, sodass sie ebenfalls verschwinden oder erscheinen.

vince · 21. Januar 2009, 12:43

Du kannst du auch mit den CSS Pseudoklassen lösen.

css4you.de/pseudoklproperty.html

Leider kennt der IE die Pseudoklassen nur bei a Elementen.
Aber dafür gibt es einen fertigen JS Hack, dass auch der IE das versteht was man will

devinrolsen.com/tutorials/css/css_hover_fix/index.php
Dort kannst du die .htc Datei downloaden und unten steht wo du diese einbindest.

Ist indirekt natürlich auch eine JS Lösung aber meiner Meinung nach die schönere. WObei sich darüber streiten lässt.

mouse over spezial frage

mouse over spezial frage

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Tags