• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Versuche hover effekt an einem bild?

M

MeineKekse

Neues Mitglied
Hi ich verusche einem button einen hover effekt zuzufügen.

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
 
</head>
<link href="design.css" type="text/css" rel="stylesheet" />
<body>
 
 
           <div id="startseite">
                <img src="PNG Bilder/startseitebutton.png"  width="120" height="100"/>
           </div>
 
 
</body>
</html>

und folgendes ist meine css datein, das problem ist, dass mein bild immer komplett angezeigt wird nie nur die obere hälfte, die ich ja erstmal haben möchte.

Code: 
#startseite {
height: 50 px;
}
 
Und wo hast Du den hover angegeben?

Wenn Du erst nur einen Teil des Bilds anzeigen willst, wäre overflow für dich interessant.

CSS:
Code: 
#startseite {
 height: 50px;
 overflow: hidden;
}
#startseite:hover { height: auto; }

PS: ich hab dein Topic mal zu CSS verschoben, da es eindeutig nichts mit HTML zu tun hat.
 
Ich dachte Du willst mit einem Bild arbeiten? Dann hast Du deine Frage bisher nicht genau genug gestellt. Bei 2 Bildern funktioniert das nicht mehr was Du hier versuchst. Da müsstest Du ohne img-Tag arbeiten und die Bilder als Hintergrundbilder des Elements festlegen.

Code: 
#startseite {
 background-image: url(bild1.png);
 height: 50px;
 overflow: hidden;
}
#startseite:hover {
 background-image: url(bild2.png);
 height: auto;
}

Beachte, dass Du dann auch ggfs. die genauen Maße für die Box angeben musst.

Zudem wird diese Variante nur in modernen Browsern funktionieren. Der IE6 und älter (wird eh kaum noch genutzt) kennt keine :hover-Pseudoklasse bei div's und würde hier keinen hover-Effekt anzeigen. Wenn Du so alte Browser auch berücksichtigen willst, verwende JavaScript oder benutz statt einem <div> einen <a>-Link.
 
ich habe es damit versucht und es klappt nicht

Code: 
#startseite {
 height: 50px;
 overflow: hidden;
}
#startseite:hover { height:background-image:url(PNG Bilder/startseitebutton.png: -50px); }
 
ich arbeite mit einem bild wenn ich allerding den code von dir eingebe, dann ist die untere hälfte des bildes ausgeblendet das klappt.wenn ich aber mit der maus darüber fahre, dann erscheint das ausgebländete bild einfach wieder. ich würde das aber gerne so machen dass wenn ich mit der maus darüber fahre sich das bild verschiebt, sodass man dann die untere hälfte sieht aber nicht mehr die obere

Als Beispiel die buttons auf dieser seite. Wenn du über den wiki buttons fährst ändert sich dieser zu grau- weiß, der grau weiße button erscheint nicht einfach unter dem anderen.
 
MeineKekse schrieb:
Code: 
#startseite {
 height: 50px;
 overflow: hidden;
}
#startseite:hover { height:background-image:url(PNG Bilder/startseitebutton.png: -50px); }
Zum Vergrößern anklicken....

Damit kann das auch gar nicht funktionieren.


Der Code muss CSS-Valide sein, und das ist dein Code nicht.

Code: 
#startseite {
 height: 50px;
 overflow: hidden;
}
#startseite:hover { 
 height: -50px;
 background-image:url(Bilder/startseitebutton.png); }
Wenn, dann müsste es so sein.
 
Hallo.

Bei deinem Beispiel mit dem Wiki Button wird nicht mit Bildern gearbeitet.
Es wird einfach die Hintergrund und Schriftfarbe geändert.

Gruss
Elroy
 
hi danke benutze jetzt folgenden code

Code: 
#startseite {
 height: 50px;
 overflow: hidden;
}
#startseite:hover {
 height: -50px;
 background-image:url(PNG Bilder/startseitebutton.png); }

wenn ich jetzt über das bild fahre wird es nach rechts unendlich oft wiederholt ...warum ???
 
Hintergrundbilder wiederholen sich so oft sie können, wenn Du das nicht unterdrückst. Ergänze noch "background-repeat: no-repeat;" bei "#startseite:hover".
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben