✔ Hover via CSS

[Genesyst]

Hallo,

ich denke mal das Thema gab es schon öfter, allerdings ist mir kein anderer Titel eingefallen um das Ganze ein wenig zu differenzieren.

Im Grunde geht es um folgendes:

Ich habe über dieses - Script -, bzw diesen Code hier ein DropDown Menu auf unserer HP implementiert. Soweit so gut, es funktioniert alles. Das Problem ist:

Ich habe statt der Textlinks Images (PNGs) genutzt. Nun würde ich gerne jedem Image ein eigenes Hoverbild geben, das bei Mouseover erscheint. Allerdings bin ich ein wenig dabei überfordert das richtig zuzuweisen. Kann ich es über CSS machen, oder vllt direkt "im" Link selber, und wenn ja wie?

Hat hier vllt jemand eine Idee wie ich das vllt lösen könnte?

Die Homepage findet sich hier: - Link -

Das Menu erscheint wenn man im oberen Teil über die Bilder geht (Vangaurd, Warhammer). Den Code kann man auch über den Quelltext einsehen, da ich das Ganze noch nicht via css-Datei, bzw JS-Datei eingebunden habe.

Ich wäre für jedwede Hilfe sehr dankbar, und bedanke mich somit auch schon einmal im Voraus!

Beste Grüße vom,

Genesyst

 

[Maik]

Hi,

da der "Linktext" in den Grafiken enthalten ist, also für jeden Link ein individuelles Grafikset vorhanden ist, müsstest du für jeden Link einen ID-Selektor anlegen und ihm über die Pseuodoklassen :link,:visited,:hover das entsprechende Hintergrundbild zuordnen.

Vereinfacht sähe das dann so aus:

/* Button 1 */

a#button1:link, a#button1:visited {
display: block;
width: 100px; /* entspricht Grafikbreite */
height: 20px; /* entspricht Grafikhöhe */
background: url(pfad/zur/grafik1_normal.png);
}
a#button1:hover {
background: url(pfad/zur/grafik1_hover.png);
}


/* Button 2 */

a#button2:link, a#button2:visited {
display: block;
width: 100px; /* entspricht Grafikbreite */
height: 20px; /* entspricht Grafikhöhe */
background: url(pfad/zur/grafik2_normal.png);
}
a#button2:hover {
background: url(pfad/zur/grafik2_hover.png);
}

/* usw. */

Eine andere Möglichkeit bestünde darin, die beiden "Zustände" (normal & hover) in einer Grafik zu vereinen, sie also nach rechts oder unten zu "verdoppeln", und sie mittels der background-position-Eigenschaft dementsprechend zu positionieren.

 

[Genesyst]

Guten Morgen,

erstmal vielen Dank für die mehr als rasche Hilfe.

Leider habe ich auf Grund meiner Unkenntnis noch ein Probleme mit der richtigen "formatierung".

Den CSS-Part habe ich mittlerweile eingefügt. Allerdings weiss ich nicht so recht wie ich den Link richtig anpasse.

Ehemals sah das Ganze so aus:

<li><a href="http://www.sternengarde.de/cms/index.php?option=com_content&task=view&id=16&Itemid=95" target="_self"><img src="templates/sternengarde/images/vg2.png" border="0"></a></li>

Wenn ich das Ganze dann allerdings so formatiere:

<li><a id="button2" href="http://www.sternengarde.de/cms/index.php?option=com_content&task=view&id=16&Itemid=95" target="_self"><img src="templates/sternengarde/images/vg2.png" border="0"></a></li>

dann funktioniert der Hover zwar anscheinend, aber das Bild legt sich hinter das was als "Link" definiert wurde, da es ja als BG deklariert wurde.

Irgendwo habe ich hier einen Denkfehler, komme aber nicht dahinter.

Vielen Dank für etwaige Hilfe im Voraus!

Grüße vom,

Genesyst

 

[Maik]

Hi,

so wie ich das überblicke, musst du die Grafik "vg2.png" als Hintergrundbild für die ID #button2 definieren, sodass das Grafikelement im Link entfällt.

<li><a id="button2" href="http://www.sternengarde.de/cms/index.php?option=com_content&task=view&id=16&Itemid=95" target="_self"></a></li>

 

[Genesyst]

Also weiss Gott warum, denn ich bin der Meinung ich hätte es schon vorher so gemacht, aber nun funktioniert es.

Ich möchte mich vielmals bei dir bedanken!! Vielen Dank!

Grüße vom,

Genesyst