Mouse Over + Anzeige fläche

Status
Nicht offen für weitere Antworten.
U

Unicate

Erfahrenes Mitglied
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?
 
Poste doch bitte mal den Quelltext deiner Versuche, damit wir uns ein Bild von dem Problem machen können.
 
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:
HTML: 
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;
}

HTML: 
<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...
 
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
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück