[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:
(1745 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: 9441

23. Jan 2012, 12:03
Beitrag # 2 von 3
Beitrag ID: #488355
Bewertung:
(1731 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:
(1727 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
09.05.2023

Digicomp (Bern, Basel, Zürich)
Dienstag, 09. Mai 2023, 08.30 - 17.00 Uhr

Kurs

Sie verfügen über ein Abonnement der Creative Cloud, welches Adobe Acrobat DC Pro beinhaltet. Sind Sie unsicher, ob Ihre PDF Dateien für die jeweilige Druckausgabe geeignet sind? Lernen Sie in diesem Kurs das notwendige Rüstzeug für den sicheren Datenaustausch mit Druckdienstleistern. Erstellen Sie druckfähige PDF/X und prüfen Sie Ihre PDFs vor einer Weitergabe mit Acrobat DC Pro.

Dauer: 1 Tag
Preis: CHF 700.–, exkl. MWST

Ja

Organisator: Digicomp Academy AG

https://digicomp.ch/weiterbildung-media-communication/adobe/kurs-pruefen-von-druck-pdf-in-acrobat-dc-pro--basic

Prüfen von Druck-PDF in Acrobat DC Pro