So, jetzt habe ich eine fertige Version, so wie ich es mir vorstelle, wie es laufen könnte bzw. aussehen sollte. Wenn ich Deinen Geschmack nicht ganz getroffen haben sollte, dann hast Du damit wenigstens eine Vorstellung, wie der Code aussehen soll - so schwierig ist es eh nicht, zu verstehen:
Zitat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;
width:400px;}
#box a span {display:none;}
#box a:hover span {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}
-->
</style>
<script type="text/javascript">
<!--
function info(p1,p2)
{document.getElementById(p1).style.visibility=p2;}
//-->
</script>
</head>
<body>
<div style="position:absolute;left:200px;top:100px;widt h:100;height:100px">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="100" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben1</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td height="50" onMouseover="javascript:info('box1','visible')" onMouseout="javascript:info('box1','hidden')">text 1</td>
</tr>
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">unten1</div>
</td>
</tr>
</table>
</div>
<div style="position:absolute;left:200px;top:200px;widt h:100;height:100px">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="100" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben2</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td height="50" onMouseover="javascript:info('box2','visible')" onMouseout="javascript:info('box2','hidden')">text 2</td>
</tr>
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">unten2</div>
</td>
</tr>
</table>
</div>
<div style="position:absolute;left:400px;top:150px;widt h:100;height:100px">
<table width="100" border="1" cellspacing="0" cellpadding="0" height="100" bordercolor="#003366">
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">oben3</div>
</td>
</tr>
<tr bgcolor="#008B97">
<td height="50" onMouseover="javascript:info('box3','visible')" onMouseout="javascript:info('box3','hidden')">text 3</td>
</tr>
<tr bgcolor="#E7EDF8">
<td height="10">
<div style="text-align:center">unten3</div>
</td>
</tr>
</table>
</div>
<div id="box1" style="visibility:hidden;position:absolute;left:20 0px;top:200px">
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000ff">
<tr bgcolor="#ffff00"><td>hier kommt dann etwas mehr text1 hin</td></tr></table></div>
<div id="box2" style="visibility:hidden;position:absolute;left:20 0px;top:300px">
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000ff">
<tr bgcolor="#ffff00"><td>hier kommt dann etwas mehr text2 hin</td></tr></table></div>
<div id="box3" style="visibility:hidden;position:absolute;left:40 0px;top:250px">
<table width="200" border="1" cellspacing="0" cellpadding="0" bordercolor="#0000ff">
<tr bgcolor="#ffff00"><td>hier kommt dann etwas mehr text3 hin</td></tr></table></div>
</body>
</html>
|
Der Einfachheit halber habe ich hinter den Texten eine Nummerierung angefügt, damit man sieht, welche Texte tatsächlich so stehen.
Zur Erklärung: im Header habe ich die javascript-Funktion definiert, die Du einfach von <script ...> bis </script> in Dein HTML-Dokument übernimmst.
Die einzelnen kleinen Tabellen sind so reduziert, dass nur diejenigen Elemente drin sind, die ohne Aktionen des Users zu sehen sein sollen. Die beiden Anweisungen onMouseover und onMouseout steuern jetzt die Info-Boxen, indem die oben definierte javascript-Funkton "info" mit den Parametern [id der Infobox] und visible (für sichtbar) bzw hidden (für unsichtbar) aufgerufen wird. Fährt man also mit der Mouse über die mittlere Zeile der Tabelle, erscheint die zugehörige Infobox, verlässt man sie wieder, verschwindet auch die Infobox.
Ganz zum Schluss werden dann die div's für die Infoboxen definiert. Zum Schluss deshalb, damit sie an oberster Stelle stehen. Die Infoboxen kannst Du positionieren, wo du willst.
Passt das so?
02.02.2006, 09:43
Hybrid-Darstellung
