Kimi.
Hallöchen Leute
Ich bin auch mal wieder am Bearbeiten meiner Homepage und will nun mal bisschen was schickeres haben
Da bin ich auf diese Seite heir gestoßen:
http://www.visiblemiles.de
Ich würde mein menü auch gern in so einem Effekt haben
Weiß jemand von euch wie das zu schaffen ist
?
Golden Hope
Das sind 2 verschiedene Bilder, die sich beim berühren der maus einfach ersetzen. Dafür gibt es einen einfachen Javaskript. mal schauen ob cih den Code finde..
Kimi.
Na das ging ja fix
Super dankeschön na dann werd ich das doch gleich mal ausprobiern
Kimi.
Kann das sein das es im Internet Explorer nicht geht ? :s
Medic Droid
Bau einfach eine Grafik, die "zweigeteilt ist" und lass beim hovern die Grafik um die jeweiligen Pixel nach oben "rutschen". Funktioniert per CSS.
Oli
| Zitat: |
Original von Medic Droid
Bau einfach eine Grafik, die "zweigeteilt ist" und lass beim hovern die Grafik um die jeweiligen Pixel nach oben "rutschen". Funktioniert per CSS. |
Das ist übrigens eine der besten Lösungen, da die Hover-Grafik in diesem Fall nicht erst beim Hovern geladen wird, was zu Verzögerungen führen könnte
Es empfiehlt sich jedoch das ansprechen mit
da
im Internet Explorer 6 noch nicht funktionierte.
LG
Kimi.
Okay danke. Und wie mach ich das das ich
für EINE bestimmte Grafik mache und die nächste dann auch wieder ? :x Bin da bisls überfragt.
Oli
| Zitat: |
Original von Blondi91
Okay danke. Und wie mach ich das das ich
für EINE bestimmte Grafik mache und die nächste dann auch wieder ? :x Bin da bisls überfragt. |
Meine hellseherischen Fähigkeiten sind gerade im Urlaub... Gibts dazu nen Link oder Code?
Gerenell betrachtet spricht "a:hover img" jedes Bild innerhalb eines <a> an.
Man könnte das z.B. so lösen:
Button hat eine Höhe von 20px (kann im Code natürlich angepasst werden).
Die entsprechende Grafik dazu hat beide Buttons direkt untereinander und damit das Doppelte - 40px.
Im CSS:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
#navi {
height: 20px;
padding: 0px;
overflow: hidden;
}
#navi a img {
height: 40px;
}
#navi a:hover img {
position: relative;
bottom: 20px;
} |
|
und im HTML:
| code: |
1:
2:
3:
4:
|
<div id="navi">
<a href="linkziel.html"><img src="buttongrafik.jpg"></a>
...
</div> |
|
Bei "normaler" Darstellung sieht man nun die oberen 20px, liegt die Maus drauf (hover) die unteren 20px der Grafik. Code ungetestet, aber sollte eigentlich funktionieren.
LG
Kimi.
Okay, soweit ganz gut verstanden. Aber... wie kann er die
| code: |
1:
2:
3:
4:
5:
|
#navi a:hover img {
position: relative;
bottom: 20px;
} |
|
auslesen im Link ? :x
Oli
| Zitat: |
Original von Blondi91
Okay, soweit ganz gut verstanden. Aber... wie kann er die
| code: |
1:
2:
3:
4:
5:
|
#navi a:hover img {
position: relative;
bottom: 20px;
} |
|
auslesen im Link ? :x |
Was will man da auslesen? Ich versteh grad nicht was du meinst.
Der von dir genannte Codeschnipsel verschiebt das Bild innerhalb des Links, über dem sich die Maus befindet, um 20px nach oben.
Kimi.
Also ....
ich hab in meinem style.css dies eingegeben:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
|
#navi {
height: 20px;
padding: 0px;
overflow: hidden;
}
#navi a img {
height: 40px;
}
#navi a:hover img {
position: relative;
bottom: 20px;
}
|
|
So und in meinem menue.html dies:
| code: |
1:
2:
3:
4:
5:
|
<div id="navi">
<a href="Startseite.html" target="main"><img src="Menue/Startseite.png" border="0"></a>
</div>
|
|
Aber wenn ich es dann hochlad mir die Seite anschauen will kommt kein hovereffekt wie gewünscht sondern es bleibt einfach die normale Grafik dort.
Deswegen war meine Frage ja ob ich noch IRGENDWO die Grafik für den Hovereffekt angeben muss
hoffe du versteht mich nun
Oli
Musst du nicht, aber ich vermute da passt irgendwas anderes nicht. Poste doch bitte endlich mal entweder den ganzen Code oder (noch besser) einen Link zur Seite
.
Kimi.
PN
hoffe du kannst mir weiter helfen :s
Oli
Das Problem ist ganz einfach, dass du Frames verwendest.
Du musst das CSS natürlich im Frame der Navigation haben und nicht auf deiner Design-Seite, da CSS nicht Frameübergreifend wirkt.
Außerdem ist die Grafik nicht korrekt, du brauchst eine Grafik wie folgt:
| code: |
1:
2:
3:
4:
5:
|
,-------------------------,
| Button Normal, 20px |
`-------------------------´
| Button Hover, 20px |
`-------------------------´ |
|
Das ganze ist also
eine Grafik, die beide Buttons untereinander beinhaltet.
Kimi.
Man jetzt tut sich wenigstens schonmal was auf der Seite x'D Gott bin ich doof :'D
Okay. das hab ich also schonmal hinbekomm x'D
Aber !! der Hover Effekt ist immernoch nciht da. und die Button Normal wie Hover sind alle 90x33 px groß. Oo
Oli
| Zitat: |
Original von Blondi91
Aber !! der Hover Effekt ist immernoch nciht da. und die Button Normal wie Hover sind alle 90x33 px groß. Oo |
Nunja, dann das selbe mit 33px
.
Außerdem sehe ich, du hast den Code modifiziert - das wird so aber nicht funktionieren. Ich schreib dir mal Kommentare dazu:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
|
#navi {
height: 33px; /* Buttongröße */
padding: 0px;
overflow: hidden;
}
#navi a img {
height: 66px; /* Grafikgröße, da Grafik 2 Buttons beinhaltet, doppelte Buttongröße */
}
#navi a:hover img {
position: relative;
bottom: 33px; /* Hier Buttongröße beibehalten, das ist die Verschiebung um die Hälfte... */
} |
|
Und die Grafik, wie gesagt, nach dem Prinzip von Oben.
Normal: Die obere Hälfte wird gezeigt.
Hover: Die untere Hälfte wird gezeigt.
Kimi.
Sag doch einfach das man eine Grafik braucht in "einem" wo der hovereffekt der untere Teil der Grafik ist mensch x'D
Mal sehen ob ich das nachher hinbekomme. Dankeschön schonmal. Ansonsten melde ich mich nochmal wenn ich mal wieder net zurechtkomm ._______. typisch kimi kriegt nix allein auf die reihe xD
Oli
| Zitat: |
Original von Blondi91
Sag doch einfach das man eine Grafik braucht in "einem" wo der hovereffekt der untere Teil der Grafik ist mensch x'D |
Hatte ich......
| Zitat: |
Button hat eine Höhe von 20px (kann im Code natürlich angepasst werden).
Die entsprechende Grafik dazu hat beide Buttons direkt untereinander und damit das Doppelte - 40px. |
| Zitat: |
| Bei "normaler" Darstellung sieht man nun die oberen 20px, liegt die Maus drauf (hover) die unteren 20px der Grafik. Code ungetestet, aber sollte eigentlich funktionieren. |
| Zitat: |
| Das ganze ist also eine Grafik, die beide Buttons untereinander beinhaltet. |
Naja.. Probier mal, ansonsten frag einfach nochmal nach
kext
Hier ist eine Methode, die auch der Semantik deines Dokuments gerecht wird.
Style:
| code: |
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
|
#navi a
{
overflow: hidden;
height: 0px;
width: 90px;
padding: 33px 0 0 0;
background-position: 0px 0px;
display: block;
float: left;
}
#navi a:hover
{
background-position: -33px 0px;
} |
|
Und so bindest du dann deine Links ein:
| code: |
1:
|
<a href="#" style="background-image: url('deinbuttonbild.png');">Klick mich!</a> |
|
„Klick mich!“ ist hier im Link nicht zu sehen, aber so verrätst du auch Google und anderen Suchmaschinen (oder auch Blinden mit Screenreadern oder Braille-Zeilen) was auf dem Button steht.