Link mit wechselnden Grafiken
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeigen
bild
blocken
boxen
code
datei
foto
grafik
hintergrund
http
image
maus
papier
problem
quellcode
start
teddy
text
url
wechsel
-
Hi,
So ich bin noch ziemlich neu in der ganzen hp Welt aber habe da nen kleines Problem....
Ich versuche über CSS das Image des Links zu wechseln sobald ich mit der Maus drüber fahre...
das Problem besteht jetzt aber darin das die Grafik nicht ausgetauscht wird so wie ich es möchte sondern unten in die <div> Box eingefügt wird... hier der betreffende Ausschnitt aus dem Quellcode:
#navi a:Link {background-image: url(../bilder/Start.jpg);} <---- CSS datei
#navi a:hover { background: url(../bilder/Start2.jpg);}
<div id="navi"> <!-- Navigationsleiste --> <--- Html Quellcode
<a href="index.html" target="_parent">
<img id="start" src="../bilder/start.jpg" border="0" height="50" width="200" alt="..." />
</a>
</div>
is garantiert bestimmt nur son dummer Anfänger Fehler... hoffe auf hilfe -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
So geht es richtig. Ein Hintergrund ist - wie der Name schon sagt - ganz hinten. Ist davor ein sichtbares Bild, sieht man natürlich dieses und nicht den Hintergrund.
Sagen wir, du hast ein Stück Papier (das Div) auf einer Wand (dem Dokument) kleben. Dieses Stück Papier ist so groß wie ein Foto. Im Normalzustand ist das Papier durchsichtig und du hältst das Foto davor. Fährt man nun mit dem Cursor darüber, zauberst du, und das Stück Papier ist mit einem anderen Foto bedruckt. Was hat es gebracht? Nichts. Man sieht immer noch das erste Foto. Damit man das neue Foto sieht, musst du noch mal zaubern und das Foto unsichtbar machen. -
danke hat mir sehr gut geholfen...
das Problem war einfach das "visibility: hidden;"...
Also wie gesagt danke... Weiß net ob es jetzt von Relevanz ist aber hier noch mal meine Lösung falls irgendwer das gleiche Probs hat
Html Quellqode
<div id="navi"> <!-- Navigationsleiste -->
<div id="start"><!-- Startlink -->
<a href="index.html" target="_parent">
<img class="verstecktesbild" src="../bilder/start.jpg" alt="test"/>
</a>
</div>
</div>
----------------------------------------------------------------------------------------------------------------------------
CSS Datei
.verstecktesbild {
visibility: hidden;
display: block;
}
#start {
background-image: url(../bilder/Start.jpg);
height: 50px;
width: 200px;
}
#start:hover, #start:focus, #start:active{
background-image: url(../bilder/start2.jpg);
background-repeat: no-repeat;
width: 200px;
height: 50px;
}
-
pudel999 schrieb:
Hi,
So ich bin noch ziemlich neu in der ganzen hp Welt aber habe da nen kleines Problem....
Ich versuche über CSS das Image des Links zu wechseln sobald ich mit der Maus drüber fahre...
das Problem besteht jetzt aber darin das die Grafik nicht ausgetauscht wird so wie ich es möchte sondern unten in die <div> Box eingefügt wird...
Also du willst einen sog. "hover" haben.. Die richtigen Navigationen allerdings bestehen nicht aus 2 Bildern, sondern aus einem Bild mit 2 Seiten! Etwas kompliziert ich weiß... Das Ding ist folgendes, du kannst mit einem CSS Code z.B. dein Bild nur von Pixel 1 - 45 anzeigen lassen, wenn du mit der Maus drüber fährst dann aber von 46 - 90 anzeigen lassen.. Du hast also 1 Bild, was du einfach teilst und den oberen Teil immer anzeigen lässt und den unteren Teil dann nur bei maus drüber (hover)...
Ich hab hier mal drei Beispiele für dich.. Du siehst, wie sich die Grafik verändert, wenn du drüber fährst, der css Code dazu sieht so aus:
a.home { /// Der Button background:url(../pictures/home.jpg) no-repeat 0px 0px; /// Pfad zu meinem Bild und die anzeige -> (0px 0px).. Es wird nichts weg geschnitten, das unten wird aber durch padding nicht angezeigt... display: block; /// Vergessen, was des heißt ^^ width: 100px; /// Breite height: 20px; /// Höhe padding: 15px 20px 5px 45px; /// Die Größe (es wird nur das obere angezeigt) color:#FFFFFF; //// Farbe des textes text-decoration: none; //// Text decoration > Keine } a.home:hover { /// Wenn maus drüber color:#FFFFFF; /// Textfarbe padding: 20px 90px 40px 55px; /// Größe background:url(../pictures/home.jpg) no-repeat 0px -50px; /// Das Bild und es wird oben > alles weggeschnitten (-50px), also ist nur unten sichtbar }
Ich hab auch noch mal alles Kommentiert, um es vielleicht verständlicher zu machen...
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
