Ich habe ja jetzt begonnen meine Homepage zu coden. Habe alles über Photoshop erstellt und versuche es jetzt alles einzubinden. Problem bei der Navigation, ich möchte einen Hovereffekt hervorrufen, dass wenn man auf bspw. Home geht (nicht klickt) dann hovert es (es drückt sich ein). Leider funktioniert es nicht so wie ich es mir vorstelle. Es passiert einfach garnichts. Schauen wie es im moment aussieht könnt ihr auf meiner Homepage:

trinox.cwsurf.de/

index.html
<a href="/home.html" class="home"><img src="Bilder/Trinox-Designs-HP_05.gif" width="72" height="59" alt=""></a>


style.css
home:hover {
display:block; background-image: url="Bilder/HOVER/Trinox-Designs-HP_05.gif"
}

hallo,

grundsätzlich gehört bei CSS-Klassen in die Definition ein Punkt vor die Bezeichnung. Weiterhin ist es so, dass du innerhalb des Links ein Bild anzeigst. Wenn du dann hinter dem Bild den Hintergrund änderst, wird immer noch das Bild voll zu sehen sein - unabhängig vom Hintergrund, der ja durch das Bild verdeckt wird. Du musst also statt der Grafik im Link () die Standart-Grafik auch schon als Hintergrund implementieren:

index.php: img-tag entfernen

style.css
.home {
display:block;
background-image:url(Bilder/Trinox-Designs-HP_05.gif);
width:100px;
height:30px;
}
.home:hover {
background-image:url(Bilder/HOVER/Trinox-Designs-HP_05.gif);
}

Breite und Höhe musst du dann entsprechend ncoh anpassen.

lg

Aber, wenn du den Hintergrund von einem Bild änderst, änderst du nicht das src="". Somit wird das Bild auch nicht geändert. Du musst einen div, ein span erstellen, in dem das Bild als Hintergrundbild dargestellt wird. Dann kannst du es auch ändern.

Ich habe jetzt den Code von chrwhm genommen und es eingefügt. Ich glaube ich habe einen Fehler gemacht weil das Bild nun garnichtmehr angezeigt wird

index.html
<a href="/home.html" class="home"><src="Bilder/Trinox-Designs-HP_05.g if" width="72" height="59" alt=""></a>

style.css
.home {
display:block;
background-image:url(Bilder/Trinox-Designs-HP_05.gif);
width:72px;
height:59px;
}
.home:hover {
background-image:url(Bilder/HOVER/Trinox-Designs-HP_05.gif);
}

Ansonsten gibts auch noch die Möglichkeit, das mit nem Java-Script zu lösen, so hab ich das gemacht.
Du gibst am besten in einer extra Scriptdatei

Normal1 = new Image();
Normal1.src = "PfadzuStandardbild";
Highlight1 = new Image();
Highlight1.src = "PfadzuHoverBild";

an, dabei kannst du für Normal1 und Highlight1 auch Bezeichnungen wie Startseite vergeben, das bleibt bei dir.

Zusätzlich brauchst du in der Scriptdatei diese Funktion, die nachher von deinem Menü aufgerufen wird

function SwitchMenu(Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}

Dann brauchst du so einen Menülink
<a href="~link~" onmouseover="SwitchMenu(0, Highlight1)" onmouseout="SwitchMenu(0, Normal1)"><img src="PfadzuStandardBild" alt="Startseite" border="0"></a>

wo du halt für die zustände onmousover und onmouseout die Bilder über das Script anzeigen lässt (Nachteil ist, dass die Bilder im gesamten Dokument abgezählt werden(Start bei 0), wenn du also Hoverlinks nach dynamischem Content mit Bildern anzeigen willst, wird das mit dieser Methode leider schieflaufen, weil dann die Bildnummer nicht passt. Für Headermenüs (so wie auf meiner seite) reicht dies aber aus. Nicht vergessen auch hier die Bezeichnungen zu ändern falls du sie im script geändert hast. Auf jeden Fall musst du die Standard-Linkgrafik im Link angeben, damit das Script das Bild findet und entsprechend verändert.

Ich hoff ich konnt dir helfen und es funktioniert... Nicht vergessen: scripte aktivieren^^

Ja hast du, das Bild hat nicht die Endung .g if sondern .gif! Außerdem wird das so nicht funktionieren, les dir mal bitte meinen Beitrag durch.

Jao werd aber aus deinem Beitrag nicht schlau. Und zu tva..ich möchte möglichst kein Java oder sonstiges einbauen.

Sprich, ich muss sowas noch einfügen?  Nur weiß ich nicht was ich genau machen soll :3

index.html

<code><div id="home">

	  

	</div>





style.css



#home {



}

mahlzeit,

das Problem ist, dass er die Bilder nicht findet. Setz mal vor den Ordner der Bilder noch ein "/":
background-image:url("/Bilder/Trinox-Designs-HP_05.gif");
Entsprechend auch bei dem Hover.

Das <src="Bilder/Trinox-Designs-HP_05.g if" width="72" height="59" alt=""> hat da gar nichts mehr zu suchen - alle wichtigen Informationen zur Form in zum Inhalt des Links bekommt der Browser jetzt via CSS.

lg

Also ich schreibe dir mal ein fertiges Beispiel:
<a href="/home.html"><div class="home" style="background-image: url('Bilder/Trinox-Designs-HP_05.gif'); width: 72px; height: 59px;"></div></a>



style.css

.home {

display:block;

background-image:url(Bilder/Trinox-Designs-HP_05.gif);

width:72px;

height:59px;

}

.home:hover {

background-image:url(Bilder/HOVER/Trinox-Designs-HP_05.gif);

}

So sollte es klappen (ohne es getestet zu haben!).

/Ich habe es eingefügt aber es klappt trotzdem nicht ;(

//Ich füg jetzt einfach mal meine ganze index.html und style.css hier ein. Vielleicht habe ich ja einfach irgendwo einen Fehler den ich euch nicht mitgeteilt habe.

///Alles dickgedruckte ist für den HOME Hover nehme ich an.

<html>
<head>
<title>Trinox Designs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body bgcolor="#11161a" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="center"; div id="home">
<table id="Tabelle_01" width="1201" height="1066" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="22">
            <img src="Bilder/Trinox-Designs-HP_01.gif" width="1200" height="38" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="38" alt=""></td>
    </tr>
    <tr>
        <td rowspan="11">
            <img src="Bilder/Trinox-Designs-HP_02.gif" width="117" height="1027" alt=""></td>
        <td colspan="13">
            <img src="Bilder/Trinox-Designs-HP_03.gif" width="301" height="59" alt=""></td>
        <td colspan="2">
            <img src="Bilder/Trinox-Designs-HP_04.gif" width="29" height="59" alt=""></td>
        <td>
            <a href="/home.html"><div class="home" style="background-image:url('Bilder/Trinox-Designs-HP_05.gif '); width: 72px; height: 59px;"></div></a></td>
        <td>
            <img src="Bilder/Trinox-Designs-HP_06.gif" width="92" height="59" alt=""></td>
        <td>
            <img src="Bilder/Trinox-Designs-HP_07.gif" width="117" height="59" alt=""></td>
        <td>
            <img src="Bilder/Trinox-Designs-HP_08.gif" width="124" height="59" alt=""></td>
        <td>
            <img src="Bilder/Trinox-Designs-HP_09.gif" width="217" height="59" alt=""></td>
        <td rowspan="11">
            <img src="Bilder/Trinox-Designs-HP_10.gif" width="131" height="1027" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="59" alt=""></td>
    </tr>
    <tr>
        <td colspan="13">
            <img src="Bilder/Trinox-Designs-HP_12.gif" width="301" height="192" alt=""></td>
        <td colspan="7" rowspan="7">
            <img src="Bilder/Trinox-Designs-HP_12-13.gif" width="651" height="895" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="192" alt=""></td>
    </tr>
    <tr>
        <td colspan="13">
            <img src="Bilder/Trinox-Designs-HP_13.gif" width="301" height="32" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="32" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_14.gif" width="9" height="547" alt=""></td>
        <td colspan="11">
            <img src="Bilder/Trinox-Designs-HP_15.gif" width="282" height="521" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_16.gif" width="10" height="547" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="521" alt=""></td>
    </tr>
    <tr>
        <td colspan="11">
            <img src="Bilder/Trinox-Designs-HP_17.gif" width="282" height="26" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="26" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img src="Bilder/Trinox-Designs-HP_18.gif" width="36" height="69" alt=""></td>
        <td colspan="2">
            <img src="Bilder/Trinox-Designs-HP_19.gif" width="77" height="69" alt=""></td>
        <td colspan="5">
            <img src="Bilder/Trinox-Designs-HP_20.gif" width="85" height="69" alt=""></td>
        <td colspan="2">
            <img src="Bilder/Trinox-Designs-HP_21.gif" width="63" height="69" alt=""></td>
        <td colspan="2">
            <img src="Bilder/Trinox-Designs-HP_22.gif" width="40" height="69" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="69" alt=""></td>
    </tr>
    <tr>
        <td colspan="13">
            <img src="Bilder/Trinox-Designs-HP_23.gif" width="301" height="54" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="54" alt=""></td>
    </tr>
    <tr>
        <td colspan="3" rowspan="4">
            <img src="Bilder/Trinox-Designs-HP_25.gif" width="57" height="74" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_25-26.gif" width="67" height="19" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_26.gif" width="7" height="19" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_27.gif" width="50" height="19" alt=""></td>
        <td rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_28.gif" width="7" height="19" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_29.gif" width="52" height="19" alt=""></td>
        <td colspan="3" rowspan="4">
            <img src="Bilder/Trinox-Designs-HP_30.gif" width="61" height="74" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td colspan="7" rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_31.jpg" width="651" height="72" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="18" alt=""></td>
    </tr>
    <tr>
        <td colspan="7" rowspan="2">
            <img src="Bilder/Trinox-Designs-HP_32.gif" width="183" height="55" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="54" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Trinox-Designs-HP_33.gif" width="1" height="1" alt=""></td>
        <td colspan="6">
            <img src="Bilder/Trinox-Designs-HP_34.gif" width="650" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="117" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="9" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="56" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="11" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="7" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="50" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="7" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="42" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="21" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="30" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="10" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="28" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="72" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="92" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="117" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="124" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="217" height="1" alt=""></td>
        <td>
            <img src="Bilder/Abstandhalter.gif" width="131" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
</div>
</body>
</html>







body {
text-align:center;
}
div#center {
background-color:#11161a; height:100%; width:1200px; margin: 0 auto 0 auto;
}
div#home {
display:block;
background-image:url('Bilder/Trinox-Designs-HP_05.gif');
width:72px;
height:59px;
}
.home:hover {
background-image:url('Bilder/HOVER/Trinox-Designs-HP_05.gif' ;);
}