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

Mousover, bloß Text anstatt eines Bildes???

Status
Für weitere Antworten geschlossen.
M

Mark914

Neues Mitglied
Ich habe wiedermal eine Anfänger frage, bin mir nicht mal sicher, ob es ein html oder JavaScript Befehl ist.

Also ich möchte gerne mit einem Mouse-over Effekt erreichen dass ein bestimmter Text an einer anderen Stelle erscheint.

Es soll ein Lebenslauf werden:

Also Mouse-Over Bild (Person) --> (Text) Stationen im Leben der Person.

Der Text soll an einer bestimmten Stelle erscheinen. Und dort bleiben.

Gibt es so einen Befehl?

Grüße,

Mark
 
kein js sondern html und css.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>blabla</title>
  <link rel="stylesheet" href="menue.css" type="text/css">
</head>
<body>
<div class="box1">
    <div id="menu">

    <a href="#">link1<span class="info"><span class="space"></span>link text 1</span></a>
    <a href="#">link2<span class="info"><span class="space"></span>link text 2</span></a>
    <a href="#">link3<span class="info"><span class="space"></span>link text 3</span></a>

    <a href="#">link4<span class="info"><span class="space"></span>link text 4</span></a>
    <a href="#">link5<span class="info"><span class="space"></span>link text 5</span></a>
    <a href="#">link6<span class="info"><span class="space"></span>link text 6</span></a>
    <a href="#">link7<span class="info"><span class="space"></span>link text 7</span></a>
    <a href="#">link8<span class="info"><span class="space"></span>link text 8</span></a>

    <a href="#">link9<span class="info"><span class="space"></span>link text 9 mit umbruch<br><br>neue zeile</span></a>
    <a href="#">link10<span class="info"><span class="space"></span>link text 10</span></a>
    <a href="#">link11<span class="info"><span class="space"></span>link text 11</span></a>
    </div>
</div>
</body>
</html
css dazu


Code: 
BODY
{
    FONT-SIZE: 10pt;
    BACKGROUND-IMAGE: url(bg.jpg);
    COLOR: black; SCROLLBAR-ARROW-COLOR: #ffffbb;
    FONT-FAMILY: verdana; SCROLLBAR-BASE-COLOR: #a6b1ba;
    BACKGROUND-COLOR: #6c7d8c
}

.box1
{
    BORDER-RIGHT: black 1px solid;
    BORDER-TOP: black 1px solid;
    BACKGROUND: gainsboro;
    LEFT: 40px;
    BORDER-LEFT: black 1px solid;
    WIDTH: 11em;
    BORDER-BOTTOM: black 1px solid;
    POSITION: absolute;
    TOP: 70px
}

#menu
{
    BORDER-RIGHT: #e4d9c0 0px solid;
    PADDING-RIGHT: 10px;
    BORDER-TOP: #837c6b 0px solid;
    PADDING-LEFT: 10px;
    BACKGROUND: none transparent scroll repeat 0% 0%;
    PADDING-BOTTOM: 10px;
    BORDER-LEFT: #837c6b 0px solid;
    WIDTH: 210px; COLOR: black;
    PADDING-TOP: 10px;
    BORDER-BOTTOM: #e4d9c0 0px solid
}

#menu A
{
    BORDER-RIGHT: #837c6b 1px solid;
    PADDING-RIGHT: 3px;
    BORDER-TOP: #e4d9c0 1px solid;
    DISPLAY: block;
    PADDING-LEFT: 4px;
    BACKGROUND: none transparent scroll repeat 0% 0%;
    PADDING-BOTTOM: 5px;
    MARGIN: 3px 0px;
    FONT: bold 9px verdana, sans-serif;
    BORDER-LEFT: #e4d9c0 1px solid;
    WIDTH: 150px;
    PADDING-TOP: 3px;
    BORDER-BOTTOM: #837c6b 1px solid;
    TEXT-DECORATION: none
}

#menu A:hover
{
    BORDER-RIGHT: #e4d9c0 1px solid;
    BORDER-TOP: #99917d 1px solid;
    BACKGROUND: none transparent scroll repeat 0% 0%;
    BORDER-LEFT: #99917d 1px solid;
    COLOR: blue;
    BORDER-BOTTOM: #e4d9c0 1px solid;
    TEXT-DECORATION: none
}

.info
{
    DISPLAY: none
}

.space
{
    DISPLAY: none
}

#menu A:hover .info
{
    PADDING-RIGHT: 10px;
    DISPLAY:block ;
    PADDING-LEFT: 1px;
    BACKGROUND: none transparent scroll repeat 0% 0%;
    LEFT: 250px;
    PADDING-BOTTOM: 0px;
    FONT-FAMILY: Verdana, Arial;
    FONT-WEIGHT: normal;
    FONT-SIZE: 9pt;
    WIDTH: 450px;
    COLOR: black;
    PADDING-TOP: 420px;
    POSITION: absolute;
    TOP: 0px;
    HEIGHT: 50px
}
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben