Mouseover Effekt mit drei verschiedenen Informationen (Text und Bild):
Die Anweisungen liegen in einem externen Stylesheet dafür wird zwischen die Headtags der Aufruf für die "effekt.css" notiert:
Beispeil:
<HEAD>
<TITLE>Mouseover</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="http://www.effekt.css">
</HEAD>
Der Code für die Htmlseite wäre folgender, und wird zwischen den Bodytags notiert
Beispiel:
<DIV ID="box">
<A ONFOCUS="this.blur()" HREF="http://www.iflmint.de"><SPAN CLASS="info">bei folgendem..
</SPAN>
<SPAN CLASS="info2"> was du gern lesen möchtest. </SPAN><SPAN CLASS="info3">du kannst dir aussuchen </SPAN></A>
</DIV>
die dazu gehörige "Css Anweisung" sähe so aus und steht in einer externen Datei
hier: effekt.css
/*Die zuerst angezeigte Box mit dem Startbild*/
#box {
position:absolute;
top:250px;
left:350px;
color:#000;
background:transparent url('none');
border-top:0px solid #000;
border-right:0px solid #000;
border-bottom:0px solid #000;
border-left:0px solid #000;
width:226px;
height:73px
}
#box a {
color:#000;
margin:0px 0; color:#000;
text-decoration:none;
background: url('http://irgendeinbild.gif') no-repeat 0px 50% ;
/*TextAbstand zum Hintergrundbild */
padding-left:10px;
padding-right:5px;
padding-top:100px;
padding-bottom:15px;
display:block;
border-top:0px ;
border-right:0px ;
border-bottom:0px ;
border-left:0px ;
text-align:left;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-size:10px;
font-family:Arial;
background-repeat:no-repeat
}
#box a:visited {
color:#333;
background-color:transparent;
}
#box a:hover {
margin:0px 0; color:#000;
text-decoration:none;
background: url('http://irgendeinanderesbild.gif') no-repeat 0px 50%;
padding-left:10px;
padding-right:5px;
padding-top:100px;
padding-bottom:15px;
border-top:0px ;
border-right:0px ;
border-bottom:0px ;
border-left:0px ;
}
#box a:active {
background-color:transparent;
}
/*die drei folgenden Werte verhindern die Anzeige*/
#box a .info {
display:none;
}
#box a .info2 {
display:none;
}
#box a .info3 {
display:none;
}
/*bestimmt den ersten Mouseover Effekt*/
#box a:hover .info {
color:#333;
background: url('willk.gif') no-repeat;
display:block;
position:absolute;
top:-240px; /*legt die Position des Effektes auf der Seite fest*/
left:-150px;
padding-left:135px; /*bestimmt die Abstände vom Text zum Bild*/
padding-right:0px;
padding-top:100px;
padding-bottom:0px;
width:356px; /*legt die Größe des HintergrundBildes fest*/
height:77px;
border-top:0px ;
border-right:0px ;
border-bottom:0px ;
border-left:0px ;
font-style:normal; font-variant:normal;
font-weight:normal; font-size:18px;
font-family:Arial;
background-repeat:no-repeat
}
/*bestimmt den zweiten Mouseover Effekt*/
#box a:hover .info2 {
color:#333;
background:url('http://xxx.gif') no-repeat ;
display:block;
position:absolute;
top:245px;
left:175px;
padding-left:60px;
padding-right:0px;
padding-top:15px;
padding-bottom:0px;
width:356px;
height:53px;
border-top:0px ;
border-right:0px ;
border-bottom:0px ;
border-left:0px ;
font-style:normal; font-variant:normal;
font-weight:normal; font-size:16px;
font-family:Arial;
background-repeat:no-repeat
}
/*bestimmt den dritten Mouseover Effekt*/
#box a:hover .info3 {
color:#000;
background: url('http://y.gif') no-repeat ;
display:block;
z-index:5;
position:absolute;
top:50px;
left:200px;
padding-left:5px;
padding-right:0px;
padding-top:50px;
padding-bottom:0px;
width:340px;
height:44px;
border-top:0px ;
border-right:0px ;
border-bottom:0px ;
border-left:0px ;
font-style:normal; font-variant:normal;
font-weight:normal; font-size:12px;
font-family:Arial;
background-repeat:no-repeat
}