Spectare

Dieser Effekt basiert auf einer einfachen Mouseover Anweisung im Stylesheet. Um den Link genau zu platzieren ist er in eine Box gepackt. Auf der Html-Seite wird folgender Code in den Body gesetzt:

<DIV ID="box">
<A ONFOCUS="this.blur()" HREF="#">linktext <SPAN CLASS="info">Text<BR>
Textinfo1</SPAN>
<SPAN CLASS="info2">Textinfo2</SPAN></A>
</DIV>

Die folgende Style Anweisung in einer neuen
Seite notieren und als z.B.: effekt.css speichern:

#box {
position:absolute;
top:140px;
left:280px;
color:red;
background-color:transparent;
border-top:0px solid #e4d9c0;
border-right:0px solid #837c6b;
border-bottom:0px solid #837c6b;
border-left:0px solid #e4d9c0;
width:55px;}

#box a {
color:#918C85;
text-decoration:none;
background-color:transparent;
background: url('http://verzeichnis zur Grafik/perlmatt.gif')
no-repeat 3px 50%;
margin-left:2.1em;
margin-right:0.5em;
margin-top:0.5em;
margin-bottom:0.5em;
padding-left:2.3em;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
display:block;
border-top:0px solid #99917D;
border-right:0px solid #E4D9C0;
border-bottom:0px solid #E4D9C0;
border-left:0px solid #99917D;
text-align:left;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:16px;
font-family:Arial;
background-repeat:no-repeat
}

#box a:visited {
color:#B38439;
background-color:transparent;
}

#box a:hover {
color:#fff;
text-decoration:none;
background: url('http://verzeichnis zur Mouseovergrafik/perlglanz.gif');
background-position: 3px 50%;
background-repeat:no-repeat;
margin-left:2.1em; /*Abstand zur aussenbox */
margin-right:0.5em;
margin-top:0.5em;
margin-bottom:0.5em;
padding-left:2.3em; /*TextAbstand zum Bullet */
padding-right:10px;
padding-top:10px;
padding-bottom:10px;

border-top:0px solid #E4D9C0;
border-right:0px solid #99917D;
border-bottom:0px solid #99917D;
border-left:0px solid #E4D9C0;
}

#box a:active {
background-color:transparent;
}

#box a .info {
display:none;
}
#box a .info2 {
display:none;
}

#box a:hover .info {
color:black;
background:transparent;
font:18px Arial;  / *hier Schriftart und Größe angeben */
display:block;
position:absolute;
top:-80px;
left:-220px;
padding:0px;
width:400px;
text-align:left;
border-top:0px solid #837c6b;
border-right:0px solid #e4d9c0;
border-bottom:0px solid #e4d9c0;
border-left:0px solid #837c6b;
}

#box a:hover .info2 {
color:#000;
background:transparent;
font:18px Arial; / *hier Schriftart und Größe für zweite Info angeben */
display:block;
position:absolute;
top:50px;
left:-150px;
padding:5px;
width:300px;
text-align:left;
border-top:0px solid #837c6b;
border-right:0px solid #e4d9c0;
border-bottom:0px solid #e4d9c0;
border-left:0px solid #837c6b;
}

by
I.FL
http://www.iflmint.de