Infobox Problem!

N

nexdh

Mitglied
Hallo,
also ich hab schon überall rum gesucht, leider nichts passendes gefunden, da ich auch leider nicht so der javascript Experte bin, hab ich keine Idee wie ich das lösen soll.

Hier der code erstmal:
Code: 
<table>
    <tr>
        <td><a href="#">Link1</a></td>
        <td><a href="#">Link2</a></td>
        <td><a href="#">Link3</a></td>
    </tr>

<div id="link1">
     <tr>
        <td>link1 - 1</td>
     </tr>
     <tr>
         <td>link1 - 2</td>    
     </tr>
</div>

<div id="link2">
     <tr>
        <td>link2 - 1</td>
     </tr>
     <tr>
         <td>link2 - 2</td>
     </tr>
</div>

<div id="link3">
     <tr>
        <td>link3 - 1</td>
     </tr>
     <tr>
         <td>link3 - 2</td>
     </tr>
</div>
</table>

Wenn ich auf einen der Link's mit onmouseover geh, soll der jeweilige <div> Block angezeigt werden. Sonst soll er ausgeblendet und nur aktiviert werden wenn man mit der Maus darüber geht, also wenn ich mit der Maus auf Link1 bin soll dieser angezeigt werden und die anderen beiden nicht!
Ich hab leider nicht das passende im Internet gefunden zu meinem Problem.

Ich hoff ihr versteht was ich meine und bedanke mich schon einmal für die Tipps!

Danke und freundliche Grüße
nex
 
Leider immer noch nicht die Lösung meines Problems :-(
Gibts denn nichts das sich meinem Beispiel anpasst !?

Auf http://www.utopianer.de/ links oben unter "Utopianer Informationsbar" gibt es genauso etwas wie ich es mir vorstelle.
 
Zuletzt bearbeitet:
Eine 1:1-Lösung, die also auf deinen Codeschnippsel angepasst und gebrauchsfertig ist, wird es wohl nicht geben.

Hierzu wirst du meine beiden genannten Beispiele auf deine Vorstellungen anpassen müssen, oder du suchst hier im Forum nach weiteren Alternativen für ein Dropdown-Menü.
 
Hier mal ein Lösungsvorschlag, den ich auf deine Vorgaben angepasst habe:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>infoBox</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!--
function ShowHide(id) {
    obj = document.getElementsByTagName("div");
    if (obj[id].style.display == 'block'){
    obj[id].style.display = 'none';
    }
    else {
    obj[id].style.display = 'block';
    }
}
//-->
</script>

<style type="text/css">
<!--
.infoBox {
display: none;
height: 100px;
background: #f3f3f3;
}
-->
</style>

</head>
<body>

<table>
    <tr>
        <td><a href="#" onmouseover="ShowHide('link1')" onmouseout="ShowHide('link1')">Link1</a></td>
        <td><a href="#" onmouseover="ShowHide('link2')" onmouseout="ShowHide('link2')">Link2</a></td>
        <td><a href="#" onmouseover="ShowHide('link3')" onmouseout="ShowHide('link3')">Link3</a></td>
    </tr>
    <tr>
        <td colspan="3" height="100">
            <div class="infoBox" id="link1">
                    link1 - 1<br>
                    link1 - 2<br>
            </div>
            <div class="infoBox" id="link2">
                    link2 - 1<br>
                    link2 - 2<br>
            </div>
            <div class="infoBox" id="link3">
                    link3 - 1<br>
                    link3 - 2<br>
            </div>
        </td>
    </tr>
</table>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück