[GastForen Web allgemein HTML und CSS / Stylesheets CSS-Menü - Pro Menüpunt ein Bild bzw. 2 Bilder (normal / aktiv) - Brauche Hilfe / Rat :)

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

CSS-Menü - Pro Menüpunt ein Bild bzw. 2 Bilder (normal / aktiv) - Brauche Hilfe / Rat :)

homeedition
Beiträge gesamt: 198

23. Jan 2012, 11:44
Beitrag # 1 von 3
Bewertung:
(1742 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Hallo,

ich baue gerade ein Popupmenu wo ich, pro Menüpunk, jeweils ein Bild geladen habe.

Mein Problem:
Ich möchte gerne beim Rüberfahren über einen Menüpunt das sich das jeweilige Bild individuell austauscht also sich der optische Zustand des Menüpunktes ändert.

Wenn man das ganze über Systemschriften löst kann man in der CSS sagen das die Schrift beim Rüberfahren z.B. bold wird. Wie kann man aber in meinem Fall sagen das sich jeweils individuell das Menübild austauschen soll?

Hier mal meine CSS:
Code
/*Menu*/ 

ul {
list-style:none;
height:100%;
}
ul li {
width: 122px;
overflow:hidden;
height: 18px;
background: #ccc;
border-top: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-left: 1px solid #ddd;
border-right: 1px solid #aaa;
}
ul li:hover {
overflow: visible;
background: #999;
}

ul ul {
margin: 0px 0 0 125px;
width: 122px;
}
ul ul li {
height: 18px;
float: right;
width: 122px;
}
ul li a {
}
a {
text-decoration:none;
color: #444;
display:block;
padding: 0px;
height: 0px;
}
a:hover {
color: #ccc;
}


und hier wie ich das Menü in html angelegt habe:
Code
<li><a href="#"><img src="images/produkte.png" border="0"></a> 
<ul>
<li><a href="#"><img src="images/spezialitaeten.png" border="0"></a></li>
<li><a href="#"><img src="images/feinkost.png" border="0"></a></li>
<li><a href="#"><img src="images/marinaden.png" border="0"></a></li>
<li><a href="#"><img src="images/rezepte.png" border="0"></a></li>
</ul>
</li>


Ich möchte gerne das sich beim Rüberfahren das Bild "spezialitaeten.png" in "spezialitaeten_b.png", das Bild "marinaden.png" in "marinaden_b.png" austauscht usw.

Ist das irgendwie möglich?

Vielen Dank :)
X

CSS-Menü - Pro Menüpunt ein Bild bzw. 2 Bilder (normal / aktiv) - Brauche Hilfe / Rat :)

Dirk Levy
  
Beiträge gesamt: 9437

23. Jan 2012, 12:03
Beitrag # 2 von 3
Beitrag ID: #488355
Bewertung:
(1728 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Wäre es eine Lösung wenn Du dabei
mit einem Hintergrundbild arbeitest
und das bei den Linkzuweisungen
austauschst, also a:active und a:


als Antwort auf: [#488350]

CSS-Menü - Pro Menüpunt ein Bild bzw. 2 Bilder (normal / aktiv) - Brauche Hilfe / Rat :)

homeedition
Beiträge gesamt: 198

23. Jan 2012, 12:09
Beitrag # 3 von 3
Beitrag ID: #488357
Bewertung:
(1724 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Leider wäre es nicht so eine optimale Lösung, da sich der komplette Button austauschen sollte da sich die Grafik in dem Button ändert und nicht nur die Hintergundfarbe :(


als Antwort auf: [#488355]

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
01.03.2023 - 09.03.2023

Online
Mittwoch, 01. März 2023, 00.00 Uhr - Donnerstag, 09. März 2023, 00.00 Uhr

Online Webinar

Wie gehen wir mit diesen Veränderungen um? Was ist notwendig, damit wir die Digitalisierung im Unternehmen klappt? Veränderungsprozesse verstehen und entsprechend handeln Mitarbeiter als Botschafter Webseite mit WordPress erstellen SEA /SEO (Ads aufschalten)

Ja

Organisator: B. Isik - SNF Academy

Kontaktinformation: B. Isik, E-Mailinfo AT snfa DOT ch

https://www.fernstudiumfitness.ch/digitalisierung-schweiz/