nicht angemeldet
css menü - bei hover grafik einblenden
Hallo,
wie kann ich ein css menü erstellen, welches bei onmouseover über einen link, links neben dem Text eine Grafik eingeblendet wird. Wenn ich den Link verlasse, soll die Grafik wieder ausgeblendet werden.
Gruss und Danke
Günter
-
Hej,
wie kann ich ein css menü erstellen, welches bei onmouseover über einen link, links neben dem Text eine Grafik eingeblendet wird.
Indem du den Feature Artikel zur Infobox liest und dessen Inhalt auf deine Bedürfnisse anpasst.
Beste Grüße
Biesterfeld--
"Nein! ... Nein, schneller, leichter, verführerischer die dunkle Seite ist."-
Hallo,
sorry, ich blick da überhaupt nicht durch.
Kann mir nicht mal jemand einen kurzen Code posten, damit ich halbwegs Bescheid weiss.Gruss
Günter
-
-
Hi!
wie kann ich ein css menü erstellen, welches bei onmouseover über einen link, links neben dem Text eine Grafik eingeblendet wird. Wenn ich den Link verlasse, soll die Grafik wieder ausgeblendet werden.
Binde bei :hover einfach ein Hintergrundbild [1] ein. Als Tutorial sei dir darüber hinaus Listamatic empfohlen.
Grüße,
Fabian St.[1]
background-image:url(bullet.gif)siehe auch http://de.selfhtml.org/css/eigenschaften/hintergrund.htm#background_image -
Hallo!
Dafür gibt es in CSS das Pseudoelement :before.
Wenn du das auf a:hover anwendest kannst du mit
content: url("...")
die Grafik beim hovern vor dem Link anzeigen lassen.Siehe hier: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after
Michael
-
Hi!
Dafür gibt es in CSS das Pseudoelement :before.
Wenn du das auf a:hover anwendest kannst du mit
content: url("...")
die Grafik beim hovern vor dem Link anzeigen lassen.Siehe hier: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after
Das wäre natürlich die beste Lösung, jedoch sollte auch nochmal betont werden, dass der IE diese Pseudoklasse nicht interpretiert, d.h. bei vielen Nutzern wird (leider) nichts zu bemerken sein.
Grüße,
Fabian St.
-
-
Hallo,
wie kann ich ein css menü erstellen, welches bei onmouseover über einen link, links neben dem Text eine Grafik eingeblendet wird. Wenn ich den Link verlasse, soll die Grafik wieder ausgeblendet werden.Gruss und Danke
GünterIch bin mir nicht sicher, aber vielleicht findest du hier
http://www.connexin.de
was du suchst. Dort wird mit CSS eine Graphik eingeblendet.
-
Hallo,
Ich bin mir nicht sicher, aber vielleicht findest du hierhttp://www.connexin.de
was du suchst. Dort wird mit CSS eine Graphik eingeblendet.
Hallo,
ja genau, so was suche ich! Leider komme ich aber nicht an den Code für CSS ran.Gruss
Günter-
Hi!
Hallo,
ja genau, so was suche ich! Leider komme ich aber nicht an den Code für CSS ran.Warum denn bitte nicht? Einfach der href-Angabe des <link>-Tags folgen bzw. die Webdevelopper-Toolbar des Firefox verwenden: http://www.connexin.de/styles/formats.css
Dich drüfte dabei vor allem diese Zeile interessieren:
nav1 a:hover {background-image:url(pfeil.jpg); background-position: center left; text-decoration:none; color:#CC3333; background-repeat:no-repeat;}Siehe auch mein erster Post: https://forum.selfhtml.org/?t=109957&m=688324
Grüße,
Fabian St.-
Hallo,
das klappt nicht, so wie ich mir das zusammen gebastelt habe.Meine Grafik neben dem Link ist leider direkt schon sichtbar, ohne das ich mit der Maus über den Link komme.
Kannst Du mal bitte kurz den Code prüfen.
Danke und Gruss
Günter<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>...</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* { margin:0; padding:0; }
body { font-family: Verdana; color: #333333; font-size: 1em; }
#navi { width:170px; height:414px; background:url(navi_background_pic.gif) no-repeat; float: left; }
#nav1 a:hover {background-image:url(navi_arrow_pic.jpg); background-position: center left; text-decoration:none; background-repeat:no-repeat;}
</style>
</head>
<body>
<div id="navi">
<ul class="nav1">
<li><a href="#"> <img src="navi_arrow_pic.gif" alt="Home" />Home</a></li>
<li><a href="#"> <img src="navi_arrow_pic.gif" alt="Mikroskopie" />Test1</a></li>
<li><a href="#"> <img src="navi_arrow_pic.gif" alt="Kultur" />Test2</a></li>
<li><a href="#"> <img src="navi_arrow_pic.gif" alt="Medizin" />Test3</a></li>
<li><a href="#"> <img src="navi_arrow_pic.gif" alt="Wortspiele" />Test4</a></li>
<li><a href="#"> <img src="navi_arrow_pic.gif" alt="Links" />Test5</a></li>
<li><a href="#"> <img src="navi_arrow_pic.gif" alt="Impressum" />Kontakt</a></li>
</ul>
</div>
</body>
</html>-
Hi!
Kannst Du mal bitte kurz den Code prüfen.
#nav1 a:hover {background-image:url(navi_arrow_pic.jpg); background-position: center left; text-decoration:none; background-repeat:no-repeat;}Die ID nav1 (#nav1) gibt es nicht in deinem XHTML-Teil, daher kommt diese Eigenschaft auch nicht zum Zuge. Anstatt hier mit Klassen/IDs zu arbeiten empfehle ich, hier den Descendant Selector zu verwenden, also so:
#navi ul li a:hover { /* dein Code */ }Außerdem sollte wohl dieses
<img src="navi_arrow_pic.gif" alt="Home" />weg, sofern damit nicht der Pfeil gemeint ist, der erscheinen soll, wenn man mit der Maus über den entsprechenden Link fährt.Grüße,
Fabian St.
-
-
-
-