✔ Horizontale Navigation mit Rollover-Bildern

[diggity]

Hallo Leute,

Ich brauche eure Hilfe bei einer Navigation. Mein Ziel ist es, bei einer horizontalen Navigation bei jedem Punkt ein Hintergrundbild zu definieren, und wenn man mit der Maus drüber fährt soll ein anderes Hintergrundbild kommen. Es ist ähnlich wie hier: http://css.maxdesign.com.au/listamatic/horizontal29.htm
Mit dem unterschied, dass ich bei jedem meiner Navigationspunkte ein anderes Hintergrund- und Hoverbild haben will. Hab jetzt schon 3 Stunden herumprobiert, aber ich hab nichts zustande gebracht :/
Dachte hier weiß sicher wer bescheid wie sowas funktioniert.

€dit: Sowas in der Art solls werden, nur halt horizontal und mit CSS: http://www.skm.at/sectionen.htm

Danke

 

[Jan-Frederik Stieler]

Du must doch eigentlich nur die URL´s austauschen die die Bilder definieren. Also für jeden Link dann einen anderen Hover definieren. Um die Schreibarbeit wirste wohl nicht rumkommen .

Gruß

 

[diggity]

Hab mir jetzt mal was überlegt, ist aber noch nicht getestet, mach ich dann gleich:

<div id='blind'>
                      <img src='asdf/ping_a_link.jpeg' alt='preload' />
                      <img src='asdf/ping_a_hover.jpeg' alt='preload' />
                      <img src='asdf/ping_b_link.jpeg' alt='preload' />
                      <img src='asdf/ping_b_hover.jpeg' alt='preload' />
</div>
<a href='link.php' class='link_a'>erster Link</a>
<a href='link.php' class='link_b'>zweiter Link</a>

css:

a.link_a:link {
                      background-image: url('asdf/ping_a_link.jpeg');
                      background-repeat: no-repeat;
                      background-position: center center;
                      float: right;
                      height: 10px;
                      width: 120px;
                      margin-left: 10px;
                      margin-right: 10px;
                      display: block;
}

a.link_a:hover {
                      background-image: url('asdf/ping_a_hover.jpeg');
                      background-repeat: no-repeat;
                      background-position: center center;
                      float: right;
                      height: 10px;
                      width: 120px;
                      margin-left: 10px;
                      margin-right: 10px;
                      display: block;
}

a.link_b:link {
                      background-image: url('asdf/ping_b_link.jpeg');
                      background-repeat: no-repeat;
                      background-position: center center;
                      float: right;
                      height: 10px;
                      width: 120px;
                      margin-left: 10px;
                      margin-right: 10px;
                      display: block;
}

a.link_b:hover {
                      background-image: url('asdf/ping_b_hover.jpeg');
                      background-repeat: no-repeat;
                      background-position: center center;
                      float: right;
                      height: 10px;
                      width: 120px;
                      margin-left: 10px;
                      margin-right: 10px;
                      display: block;
}

div#blind      {
                      visibility: none;
                      width: 0px;
                      height: 0px;
                      left: 0px;
                      top:0px;
}

€dit: ...Ok, das gewünschte Ergebnis erziele ich mit diesem Code bei weitem nicht: http://diggity.de/tmp/skm/test/
+gg+
Kann man das nicht mit einer Liste lösen, so wie hier ?
So hätt ichs auch schon selbst probiert, aber no way ;>

 

[Jan-Frederik Stieler]

Also ich habe jetzt grad nicht die Zeit mich mit deinem CSS zu beschäftigen aber es gibt natürlich auch noch die Javascript Variante. So z.B.:

<a onmousedown="window.open('test.html')" href="test.html" onfocus="this.blur()" target="_self">
<img onmouseover="this.src='mouseover/mouseover.gif';" onmouseout="this.src='mouseover/mouseout.gif';" src="mouseover/mouseover.gif" alt="Karokachel" height="19" width="100" border="0">

Gruß

 

[diggity]

Danke, das funktioniert zwar, aber ich will weitgehenst auf JS verzichten.

Habs jetzt mal so probiert: http://www.stunicholls.myby.co.uk/menus/flickerfree_mk3.html
Das ist eigentlich genau das was ich brauche, aber ich bekomms einfach net hin ....
http://www.diggity.de/tmp/skm/test2
Die Bilder werden nicht angezeigt ... wah ich liebe es wenn etwas gleich auf Anhieb funktioniert ...
€: Müssen die Bilder denn genau so gross sein wie's in der CSS steht, dass es überhaupt funktioniert?

 

[Maik]

Die Grafiken sind in der externen CSS-Datei style.css unvollständig referenziert - der URL berücksichtigt nicht das Unterverzeichnis (inc), in dem die CSS-Datei liegt.

#menu li.list1 {background:transparent url(../img/03.jpg);}
#menu li.list2 {background:transparent url(../img/04.jpg);}
#menu li.list3 {background:transparent url(../img/05.jpg);}
#menu li.list4 {background:transparent url(../img/06.jpg);}

#menu a#item1 {background:transparent url(../img/03_2.jpg) -115px -70px no-repeat;}
#menu a#item2 {background:transparent url(../img/04_2.jpg) -115px -70px no-repeat;}
#menu a#item3 {background:transparent url(../img/05_2.jpg) -115px -70px no-repeat;}
#menu a#item4 {background:transparent url(../img/06_2.jpg) -115px -70px no-repeat;}

 

[diggity]

Jap, thx, habs jetzt berichtigt, echt ein dummer fehler.

Problem ist nur noch, dass die Bilder nicht alle gleich sind. Jetzt werd ich die noch alle gleich breit machen, dann gibts da auch keine Probs mehr!


PS: Was kann man denn gegen diese fiesen Whitespaces machen? Hab manchmal zwischen den Grafiken nen 1px breiten Spalt ... das nervt tierisch.

 

[Jan-Frederik Stieler]

Ich denke das müßte dein Problem eigentlich beheben (Befehl Margin):
http://www.mediaevent.de/css/margin.html

 

[diggity]

Hmm, an den Margins dürfte es nicht liegen.

Jetz hab ich da im Head nen hässlichen Whitespace und bekomm ihn net weg. Site: http://www.diggity.de/tmp/skm/test5/

Vorher hats komischerweise im IE optimal gepasst, also ohne Whitespace, doch jetzt hab ich sogar im IE einen Whitespace ;>

Aja, fast hätt ichs vergessen: Wieso ist links bei der Liste die Schrift nicht genau neben dem list-style-image, sondern etwas nach unten versetzt?

€dith: <img src="bildname.jpg" align=absMiddle> löste mein Problem