# Mouse Over + Anzeige fläche



## Unicate (14. November 2005)

Hallo

Ich habe mir MouseOverbuttons (nat. in CSS) erstellt.
Wenn ich nun mit der Maus darüber fahre, soll in einem Vorgegebenen Feld ein Text angezeigt werden.
Ich möchte aber nicht erst auf den Button klicken, das er mir den Text anzeigt.

Wie?


----------



## Maik (14. November 2005)

Vielleicht hilft dir CSS tests | Popups weiter?


----------



## Unicate (14. November 2005)

Ach man ... 
Ich bekomm das nicht hin.
Es geht nur entweder "Mouseover" oder dieses "Text anzeigen"


----------



## Maik (14. November 2005)

Poste doch bitte mal den Quelltext deiner Versuche, damit wir uns ein Bild von dem Problem machen können.


----------



## Unicate (14. November 2005)

Das ist aber ziemlich umständlich, da es eine menge Bilder sind, die ich mitschicken müsste.
Aber gut ich versuchs:

zu erst die CSS-Datei:

```
a.MouseOver {
	color:#000000;
	font-size:14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display:block;
	padding-left: 25px;
	text-decoration: none;
	width: 166px;
	line-height: 36px;
	background-image:url("../pics/button.jpg");
	background-repeat: no-repeat;

}
a.MouseOver:hover {
	color:#000000;
	font-size:14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display:block;
	padding-left: 25px;
	text-decoration: none;
	width: 166px;
	line-height: 36px;
	background-image:url("../pics/button_o.jpg");
	background-repeat: no-repeat;
}
a.MouseOverDB {
	color:#000000;
	font-size:14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display: block;
	padding-left: 0px;
	width: 166px;
	line-height: 37px;
	background-image:url("../pics/header_punktdatenbanken.jpg");
	background-repeat: no-repeat;
	text-decoration: none;
}

a.MouseOverDB:hover {
	color:#000000;
	font-size:14px;
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-left: 0px;
	width: 166px;
	text-decoration: none;
	color:#002A69;
	background-image:url("../pics/header_punktdatenbanken_o.jpg");
	background-repeat: no-repeat;
}
a.MouseOverNW {
	color:#000000;
	font-size:14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display:block;
	padding-left: 0px;
	width: 166px;
	line-height: 33px;
	background-image:url("../pics/header_punktnetzwerke.jpg");
	background-repeat: no-repeat;
	text-decoration: none;
}

a.MouseOverNW:hover {
	color:#000000;
	font-size:14px;
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-left: 0px;
	text-decoration: none;
	width: 166px;
	color:#002A69;
	background-image:url("../pics/header_punktnetzwerke_o.jpg");
	background-repeat: no-repeat;
}
a.MouseOverHP {
	color:#000000;
	font-size:14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display:block;
	padding-left: 0px;
	width: 166px;
	line-height: 31px;
	background-image:url("../pics/header_punkthomepage.jpg");
	background-repeat: no-repeat;
	text-decoration: none;
}

a.MouseOverHP:hover {
	color:#000000;
	font-size:14px;
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	padding-left: 0px;
	width: 166px;
	text-decoration: none;
	color:#002A69;
	background-image:url("../pics/header_punkthomepage_o.jpg");
	background-repeat: no-repeat;
}
a.MouseOverTree {
	color:#000000;
	font-size:14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display:block;
	width: 29px;
	line-height: 17px;
	background-image:url("../pics/header_sitemap.jpg");
	background-repeat: no-repeat;
	text-decoration: none;
}

a.MouseOverTree:hover {
	color:#000000;
	font-size:14px;
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	width: 29px;
	line-height: 17px;
	background-image:url("../pics/header_sitemap_o.jpg");
	background-repeat: no-repeat;
}
a.MouseOverSuche {
	color:#000000;
	font-size:14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display:block;
	width: 23px;
	line-height: 17px;
	background-image:url("../pics/header_suchen.jpg");
	background-repeat: no-repeat;
	text-decoration: none;
}

a.MouseOverSuche:hover {
	color:#000000;
	font-size:14px;
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	width: 23px;
	line-height: 17px;
	background-image:url("../pics/header_suchen_o.jpg");
	background-repeat: no-repeat;
}
a.MouseOverKontakt {
	color:#000000;
	font-size:14px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display:block;
	width: 21px;
	line-height: 17px;
	background-image:url("../pics/header_kontakt.jpg");
	background-repeat: no-repeat;
	text-decoration: none;
}

a.MouseOverKontakt:hover {
	color:#000000;
	font-size:14px;
	display:block;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-decoration: none;
	width: 21px;
	line-height: 17px;
	background-image:url("../pics/header_kontakt_o.jpg");
	background-repeat: no-repeat;
}

table.MAINTABLE {
align: center;
}

.Datenbanken a {
	display: block;
	position: relative;
	text-decoration: none;
	line-height: 37px;
}
* html .Datenbanken a {
	height/**/: 37px;
}
.Datenbanken a:hover {
	border-width: 0; /* IE */
	line-height: 37px;
}
.Netzwerke a {
	display: block;
	position: relative;
	text-decoration: none;
	line-height: 33px;
}
* html .Netzwerke a {
	height/**/: 33px;
}
.Netzwerke a:hover {
	border-width: 0; /* IE */
	line-height: 33px;
}
.Homepages a {
	display: block;
	position: relative;
	text-decoration: none;
	line-height: 31px;
}
* html .Homepages a {
	height/**/: 31px;
}
.Homepages a:hover {
	border-width: 0; /* IE */
	line-height: 31px;
}




#special_links a .pop {
   display: none;
   line-height: 37px;
   width:166;
}
#special_links a:hover .pop {
   display: block;
   position: absolute;
   top: 0; 
   left: 13.2em;
   line-height: 37px;
}
```


```
<div id="special_links">
<table class="MAINTABLE" width="672" height="146" border="0" cellpadding="0" cellspacing="0" align="center">
  <tr>
    <td colspan="9"><img src="pics/header_oben.gif" width="672" height="10" alt="" /></td>
  </tr>
  <tr>
    <td rowspan="6"><img src="pics/header_links.gif" width="12" height="136" alt="" /></td>
    <td rowspan="5"><img src="pics/header_logo.jpg" width="121" height="128" alt="" /></td>
    <td rowspan="5"><img src="pics/header_zwischenraumlinks.jpg" width="30" height="128" alt="" /></td>
    <!-- DATENBANKEN-button Normal='name' Over='name'_o -->
    <td height="37" rowspan="2"><div class="Datenbanken" ><a href="" class="MouseOverDB">		
		<span class="pop">
		beschreibung von datenbanken</span></a></div></td>
    <td rowspan="5" background="pics/header_punktefenster.jpg" width="259" height="128"><img src="pics/header_punktefenster.jpg" alt="" width="259" height="128" /></td>
    <td><a href="" class="MouseOverTree"></a></td>
    <td><a href="" class="MouseOverSuche"></a></td>
    <td><a href="mailto:info@byte-attack.de" class="MouseOverKontakt">&nbsp;</a></td>
    <!-- ------------------------------------------ -->
    <td rowspan="6"><img src="pics/header_rechts.gif" width="11" height="136" alt="" /></td>
  </tr>
  <tr>
    <td colspan="3" rowspan="4"><img src="pics/header_inhaltrechts.jpg" width="73" height="111" alt="" /></td>
    <td><img src="pics/Abstandhalter.gif" width="1" height="20" alt="" /></td>
  </tr>
  <tr>
    <td height="33"><div class="Netzwerke" ><a href="" class="MouseOverNW">		
		<span class="pop">
		beschreibung von Netzwerken </span></a></div> </td>
  </tr>
  <tr>
    <td height="31" valign="top"><div class="Homepages" ><a href="" class="MouseOverHP">		
		<span class="pop">
		beschreibung von Homepages </span></a></div></td>
  </tr>
  <tr>
    <td valign="bottom" height="27"><img src="pics/header_punktleer.jpg" width="166" height="27" alt="" /></td>
  </tr>
  <tr>
    <td colspan="7"><img src="pics/header_unten.gif" width="649" height="8" alt="" /></td>
  </tr>
</table>
</div>
```

Also ich finde ja, das man das nicht so machen kann...


----------



## Unicate (14. November 2005)

Ok, damit ihr euxh das besser vorstellen könnt, hab ich mal eine rar datei
gepackt, wo alle wichtigen sachen drin sind, die dazu gehören.

Das problem hat sich nun eingeschränkt:
der IE zeigt das ganz korrekt an, aber Opera z.B. zeigt gar nix an.

Wär gan Super von euch, wenn ihr mir ein paar Ratschläge deswegen geben könntet

Die Datei

Welche Befehle werden eigentlich von Opera unterstützt und welche nicht


----------

