divs und javascript

X

xThorx

Mitglied
Hallo zusammen,

ich habe mir da jetzt was zusammengebastelt was ich alles hier mal im forum gefunden habe. In diesem Code werden jetzt divs mithilfe von java ein bzw ausgeblendet (oder auch aktiviert) :)

Jetzt habe ich links meine Menüleiste, die in tabellenform OHNE LINKS erzeugt wird und dann mithilfe eines onclick ereignisses das javascript auslöst (divs aktualisierung)

Wie kann ich nun dem menüpunkten beibringen, dass sie sich wie ein link verhalten sollen, sprich dass sich diese auch so darstellen lassen dass wenn ich z.B mit der Maus rüber fahre die schriftfarbe sich ändert und grösser wird etc...

Ich poste am besten mal den ganzen code, habe zur zeit noch alles zusammen in einer datei (css, javascript, und html) wird aber wenn dieses problem erledigt ist in 3 dateien aufgeteilt.

Vielen Dank für Eure Hilfe und noch einen schönen Tag!

Code: 
<html>
<head>
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
<!--
body
{
padding: 0px;
margin: 0px;
background: #ffffff;
color: #001122;
font-family: verdana, sans-serif;
font-size: 11px;
}
#headDiv
{
height: 50px;
margin: 10px;
padding: 0px;
border: 1px solid #506b84;
background-color: #ffffff;
}

#contentDiv
{
position: absolute;
width: auto;
padding: 0px;
margin: 0px 150px;
top: 100px;
left: 30px;
border: 1px solid #506b84;
background-color: #ffffff;
}

#leftmenuDiv
{
position: absolute;
top: 70px;
left: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid #506b84;
background-color: #ffffff;
}

#rightmenuDiv
{
position: absolute;
top: 70px;
right: 10px;
width: 130px;
height: 300px;
margin: 0px;
padding: 0px;
border: 1px solid #506b84;
background-color: #ffffff;
}

#header
{
display:block; 
width:163px; 
height:37px;
background-image:url(stockedphotostop.gif);              
background-repeat:no-repeat;
}

#middle
{
display:block;
width:163px;
margin-right:-10px;
background-image:url(bg9.gif);
}

#content
{
padding-left:5px; 
padding-right:3px;
}

#footer
{
display:block; 
width:163px;
background-image:url(fut1.gif);
background-repeat:no-repeat;
}
-->
</style>

  <script type="text/javascript">
  
  var subs=new Array('sub1','sub2');
    
  function hideall(){
    for(x=0; x<subs.length;x++){
      document.getElementById(subs[x]).style.visibility='hidden';
    }
  }
    
  function display(mode,ele){
    if(mode=='s'){
      hideall();
      document.getElementById(ele).style.visibility='visible';
      
    }else{
      document.getElementById(ele).style.visibility='hidden';
    }
  }
  </script>


<body>
<div id="headDiv">
<p>headDiv</p>
</div>

<div id="leftmenuDiv">
<p>leftmenuDiv</p>
</div>

<div id="rightmenuDiv">
<p>rightmenuDiv</p>
</div>


<!-- Hier wird jetzt die Navigation erzeugt -->


<div id="leftmenuDiv">
  <table border="0" cellspacing="0"cellpadding="0">
    <tr>
      <td width="150" height="20" onClick="display('s','sub1')">Test</td></tr><tr>
      <td width="150" height="20" onClick="display('s','sub2')">Test</td></tr><tr>
      <td width="150" height="20" onClick="display('s','sub3')">Test</td></tr><tr>
      <td width="150" height="20" onClick="display('s','sub4')">Test</td></tr><tr>
      <td width="150" height="20" onClick="display('s','sub5')">Test</td></tr><tr>
      <td width="150" height="20" onClick="display('s','sub6')">Test</td></tr><tr>
      <td width="150" height="20" onClick="display('s','sub7')">Test</td>
    </tr>
  </table>
</div>


<!-- Erstellung der Divs (zunächst unsichtbar ) -->

<div id="contentDiv">

<div style="visibility:hidden; margin-left:250px; position:absolute; top:50px;" id="sub1" onClick="display('h','sub1')">
<div id="header"></div>
<div id="middle">
<div id="content">
Inhalt 1<br>		
</div>
</div>
<div id="footer"></div>
</div>

<div style="visibility:hidden; margin-left:250px; position:absolute; top:50px;" id="sub2" onClick="display('h','sub2')">
<div id="header"></div>
<div id="middle">
<div id="content">
Inhalt 2<br>		
</div>
</div>
<div id="footer"></div>
</div>

</div>

</body>
</html>
 
Das Einfachste:
erstelle 2 CSS-Klassen mit den dazugehörigen Formaten... eine für eine normale Zelle, und eine für eine Zelle beim Hovern.
Der Klasse für "normale" Zellen weist du alle <td> standardmässig zu.
Jetzt brauchst du in den Zellen nur bei den Events onmouseover/onmouseout den Klassennamen ändern... das wäre es schon:
Code: 
<td class="nameDerNormalKlasse"onmouseover="this.className='nameDerHoverKlasse';" onmouseout="this.className='nameDerNormalKlasse';">Test</td>
 
okay funktioniert doch anstelle von class hab ich id eingesetzt und noch den effekt cursor:hand; eingefügt und siehe da es schaut aus wie ein normaler link! Vielen Dank!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück