HTML - /CSS-Mauszeiger auf Bild versteckt

Ich habe 2 Bilder, 1 zeigt das Wort "home" und ein weiteres zeigt "home" mit einigen Pfeilen, um es von oben.. im Grunde eine kleine Sache, zum aufpeppen meiner website im arbeiten als Teil meiner Studien.

Was wäre der einfachste Weg, um den übergang von der leere Bilder, die Pfeil' Bild?
ohne Verwendung von fancy JavaScript? ich weiß nicht, wie javascript und würde es vorziehen, es nicht zu verwenden.

Mein HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>This is my website :D</title>
</head>
<body>
    <div id="banner"><img id="logo" src="images/logo.png" />
        <div id="menucontainer">
            <div class="menulink" id="menu1"><a href="index.html"><img border="0" id="arrow1" src="images/arrow1blank.png" /><img border="0" id="arrow1popup" src="images/arrow1.png"  /></a></div>
            <div class="menulink" id="menu2"><a href="#">About Us</a></div>
            <div class="menulink" id="menu3"><a href="#">Services</a></div>
            <div class="menulink" id="menu4"><a href="#">Account</a></div>
        </div>
    </div>
</body>
</html>

und CSS:

#banner {
    background-color:#000000;
    height:100px;
    position:absolute;
    top:0;
    left:0;
    right:0;
}
#logo {
    position:absolute;
    left:350px;
}
#menucontainer {
    position:relative;
    left:750px;
    top:0px;
    right:350px;
    height:100px;
}
#menu1 {
    float:left;
    text-align:center;
    width:120px;
    height:100px;
}
#menu2 {
    float:left;
    width:120px;
    text-align:center;
    height:100px;
}
#menu3 {
    float:left;
    text-align:center;
    width:120px;
    height:100px;
}
#menu4 {
    float:left;
    width:120px;
    text-align:center;
    height:100px;
}

Vielen Dank im Voraus Jungs 🙂

InformationsquelleAutor Gobble45 | 2011-10-07

  1. 2

    Es gibt viele Möglichkeiten, dies zu tun, aber sprites + css ist das beste.
    Reduziert die Anzahl der Anforderungen, erfordert kein nachladen des Bildes auf schweben so auf langsamen verbindungen, die Sie nicht bekommen, dass 1 Sekunde schwarzer Bereich, während die roll-over-Bild geladen.

    Dies ist ein beliebtes Konzept, finden Sie viele tutorials, wie es diese eine.

    Its all about the image 🙂

    Stimmen. Sie können Ressourcen verwenden, wie etwa spritegen.website-performance.org generieren, dass die Bilder + den css-code für Sie.
    ich würde lieber nicht einen code erzeugen, denn das ist Betrug -.-
    jsfiddle.net/DCrrm/4, .. ich hoffe, dass Sie nicht zu beleidigt: ich habe 2 Generatoren für das cooltext.com für die Bilder und spritegen.website-performance.org zu erzeugen, der sprite .. das css ist allen Menschen generierte .. denke ich 🙂
    Der CSS code ist sehr einfach in der sprite-Menüs. Ein sprite-Bild hat im wesentlichen 2 oder 3 Versionen der Menüpunkt (default, hover, aktiv) und den CSS-code fügt die erforderlichen pseudo-Klassen zur Anzeige der verschiedenen Teile des Bildes.

    InformationsquelleAutor Varun Vohra

  2. 0

    Fügen Sie einfach dieses snippet funktionieren würde.

    .menulink:hover { background-img:url('images/arrow1blank.png'); }
.menulink:hover a { display:none; }
    Ich habe versucht, aber es nicht verbergen die originalen Bilder... was muss ich benutzen, um Sie zu verstecken, um mit zu beginnen? also ich habe nicht 2 Bilder nehmen Platz..
    Dann musst du display:none original-image bei hover auch

    InformationsquelleAutor InspiredJW

  3. 0

    Versuchen Sie dies:

    .menulink       img#arrow1popup { display: none;   }
.menulink:hover img#arrow1popup { display: inline; }
.menulink:hover img#arrow1      { display: none;   }
    Warten, nevermind!!! DAS FUNKTIONIERTE.. ich hatte mich geändert, die ID ist arrow1popup zu arrow1, und arrow1 zu arrow1blank

    InformationsquelleAutor Joe Sondow

Schreibe einen Kommentar