html-Navigation mit auftauchendem Bild

archaja

Hallo!

Ich möchte eine Navigation machen mit normalen HTML-Textlinks. Aber als Besonderheit hätte ich gerne bei Mouseover ein kleines Bild, das UNTER dem Textlink erscheint (so wie man mit HTML die Farbe des Textlinks bei Mousover verändern kann). Wie realisiere ich so etwas? Oder weiß jemand schon eine fertige Navigation, die diese Idee realisiert?.

Danke!

archaja

DarkSyranus

Das geht mit css.

HTML

<html>
<head>
<style type="text/css">
.hoverlink:hover {
background-image:url('url_des_hoverbildes');
}
</style>
</head>
<body>
...
[url='#']???[/url]
...
</body>

Alles anzeigen

Müsste so gehen, wenn ich mich nicht vertippt habe.

archaja

Hallo!
Bin noch nicht wirlich weiter. Was verstehst Du unter "url_des_hoverbildes"? Ich habe den Bildnamen eingegeben und es auch mit einem Grafiklink versucht. Tat beides nicht.
Es ergibt sich auch die Frage, wo sich das Bild positioniert (es sind ja keine "Ortsangaben" vorhanden.
Danke. P.S. Habe Deine Seite besucht, sieht schick aus. Aber Du bist Deiner Zeit ganz schön voraus, wenn Du Dich seit dem 24.12.2006 mit Webdesign beschäftigst!archaja,

K.C.

Hi

Du hast geschrieben, du willst das Bild UNTER dem Text haben,

UNTEN im Sinn von: vorne -- hinten
oder
UNTEN im Sinn von: oben -- unten

??

hier ist ein Link im Sinne von oben -- unten:

http://www.css4you.de/trickkiste/tr00022.html

und hier ein Link im Sinne von vorne -- hinten:

http://www.css4you.de/trickkiste/tr00023.html
(anstatt der Hintergrundfarbe nimmst du einfach dein HintergrundBILD!)

Ich hoffe, ich konnte dir helfen!!

archaja

Hallo!

oben-unten. Das möchte ich gerne. Von dem her ist der erste Link genau richtig. Aber es funzt nicht. Ich habe mir das jetzt in Opera und in Firefox angeschaut, aber der Text: "Hier steht mehr zu den Hyperlinks" ist immer sichtbar. Ich habe dann mal meinen Link rein und das Bild das ich möchte:

<title>Links mit zusätzlichen Informationen</title>
<style type="text/css">
p,div .info{
<html><head>
<title>Links mit zusätzlichen Informationen</title>
<style type="text/css">
p,div .info{
font-family:Verdana;
font-size:12px;
color:#000000;
font-weight:normal;
}
div a {
display:block;
float:left;
margin-right:15px;
width:100px;
text-align:center;
}

a .info{visibility:hidden;}

a:hover .info{visibility:visible;}
</style>

</head><body>

<div>
<a href="start.html">Hyperlink 1
<span class="info">

</span></a>

<a href="#">Hyperlink 2
<span class="info">

Hier steht mehr zu Hyperlink 2</span></a></p>
<a href="#">Hyperlink 3
<span class="info">

Hier steht mehr zu Hyperlink 3</span></a>
<a href="#">Hyperlink 4
<span class="info">

Hier steht mehr zu Hyperlink 4</span></a>
</div>

</body>
</html>

Aber es geht nicht. Dabei ist es genau das, was ich will.

Gruss Archaja

archaja

Hallo!

Nehme alles zurück. Habe einen Kopierfehler gemacht, wie man oben sehen kann. Blöde Hektik!
Es funktioniert! Vielen Dank, war genau das, was ich wollte.

archaja

Tags