[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:
(1781 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: 9471

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

Online
Dienstag, 30. Juli 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 16.07.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 30.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen Anlage von Beschnittzugaben Automatische Erzeugung der Schnittkontur Erstellung von Strichcodes, Textmarkierungen und Registrierungen ... IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix2Switch ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow