[JAVA SCRIPT] Navigation

DarealZnarkde · 06. März 2003

Hey, ich habe ein nettes Navigations-Script geschrieben. Das einzigste Problem ist, das es flackert sobald man es aufruft und es sich teilweise nicht mehr richtig schließt.. Hier ein direkter Link und hier das Script:

Code:

<html>

<head>
<title>Beyond the System</title>
<base target="Content">
<link rel="stylesheet" type="text/css" href="css/navigation_01.css">
<link rel="stylesheet" type="text/css" href="css/text_nav.css">

<script>
function menue(layer)  {
if (layer.style.visibility=="visible") {
layer.style.visibility="hidden";
}else{
layer.style.visibility="visible";
}
}
</script>


</head>

<body>

<center>

<table border="0" cellspacing="30" cellpadding="0">

  <tr>
    <td background="img/music_nav.gif" onmouseover="this.background='img/music_nav_2.gif';" onmouseout="this.background='img/music_nav.gif';" >
    <div id="pointer" onMouseOver="menue(music);" onMouseOut="menue(music);">Music</div>
      <div id="music" onMouseOut="menue(music);">
      <table border="0" cellspacing="0" cellpadding="0" background="img/music_nav.gif">
        <tr>
          <td onmouseover="this.background='img/music_nav_2.gif';" onmouseout="this.background='img/music_nav.gif';" >
          CDs
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/music_nav_2.gif';" onmouseout="this.background='img/music_nav.gif';" >
          Lyrics
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/music_nav_2.gif';" onmouseout="this.background='img/music_nav.gif';" >
          Translation
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/music_nav_2.gif';" onmouseout="this.background='img/music_nav.gif';" >
          Interpretation
          </td>
        </tr>
      </table>
      </div>
    </td>
    <td background="img/artists_nav.gif" onmouseover="this.background='img/artists_nav_2.gif';" onmouseout="this.background='img/artists_nav.gif';" >
    <div id="pointer"  onMouseOver="menue(artists);" onMouseOut="menue(artists);">Artists</div>
      <div id="artists" onMouseOut="menue(artists);">
      <table border="0" cellspacing="0" cellpadding="0" background="img/artists_nav.gif">
        <tr>
          <td onmouseover="this.background='img/artists_nav_2.gif';" onmouseout="this.background='img/artists_nav.gif';">
          Serj
          </td>
         </tr>
        <tr>
          <td onmouseover="this.background='img/artists_nav_2.gif';" onmouseout="this.background='img/artists_nav.gif';" >
          Daron
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/artists_nav_2.gif';" onmouseout="this.background='img/artists_nav.gif';">
          Shavo
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/artists_nav_2.gif';" onmouseout="this.background='img/artists_nav.gif';">
          John
          </td>
        </tr>
      </table>
      </div>
    </td>
    <td background="img/poetry_nav.gif" onmouseover="this.background='img/poetry_nav_2.gif';" onmouseout="this.background='img/poetry_nav.gif';">
    <div id="pointer"  onMouseOver="menue(poetry);" onMouseOut="menue(poetry);">Poetry</div>
      <div id="poetry" onMouseOut="menue(poetry);">
      <table border="0" cellspacing="0" cellpadding="0" background="img/poetry_nav.gif" onmouseover="this.background='img/poetry_nav_2.gif';" onmouseout="this.background='img/poetry_nav.gif';">
        <tr>
          <td onmouseover="this.background='img/poetry_nav_2.gif';" onmouseout="this.background='img/poetry_nav.gif';">
          Poetry
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/poetry_nav_2.gif';" onmouseout="this.background='img/poetry_nav.gif';">
          Translation
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/poetry_nav_2.gif';" onmouseout="this.background='img/poetry_nav.gif';">
          Interpretation
          </td>
        </tr>
      </table>
      </div>
    </td>
    <td background="img/topics_nav.gif" onmouseover="this.background='img/topics_nav_2.gif';" onmouseout="this.background='img/topics_nav.gif';">
    <div id="pointer"  onMouseOver="menue(topics);" onMouseOut="menue(topics);">Hot Topics</div>
      <div id="topics" onMouseOut="menue(topics);">
      <table border="0" cellspacing="0" cellpadding="0" background="img/topics_nav.gif">
        <tr>
          <td onmouseover="this.background='img/topics_nav_2.gif';" onmouseout="this.background='img/topics_nav.gif';">
          Religion
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/topics_nav_2.gif';" onmouseout="this.background='img/topics_nav.gif';">
          War
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/topics_nav_2.gif';" onmouseout="this.background='img/topics_nav.gif';">
          America
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='img/topics_nav_2.gif';" onmouseout="this.background='img/topics_nav.gif';">
          Marijuana
          </td>
        </tr>
      </table>
      </div>
    </td>
  </tr>

</table>

</center>

</body>

</html>

Hoffe, ihr könnt mir helfen!

sanchez · 06. März 2003

haste mal probiert das mit hex-farebn zu machen, statt mit grafiken?

DarealZnarkde · 06. März 2003

Nein, aber wenn ich zum Beispiel den Punkt "Music" so mache, funzt es net:

Code:

    <td background="#FFFFFF" onmouseover="this.background='#000000';" onmouseout="this.background='#FFFFFF';" >
    <div id="pointer" onMouseOver="menue(music);" onMouseOut="menue(music);">Music</div>
      <div id="music" onMouseOut="menue(music);">
      <table border="0" cellspacing="0" cellpadding="0" background="#FFFFFF">
        <tr>
          <td onmouseover="this.background='#000000';" onmouseout="this.background='#FFFFFF';" >
          CDs
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='#000000';" onmouseout="this.background='#FFFFFF';" >
          Lyrics
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='#000000';" onmouseout="this.background='#FFFFFF';" >
          Translation
          </td>
        </tr>
        <tr>
          <td onmouseover="this.background='#000000';" onmouseout="this.background='#FFFFFF';" >
          Interpretation
          </td>
        </tr>
      </table>
      </div>
    </td>

.marc · 06. März 2003

am einfachsten ist es wenn du zwei css classen definierst und dann mit

Code:

onMouseover="this.className='over';" onMouseout="this.className='out';"

hinund her wechselst

DarealZnarkde · 10. März 2003

Hmm... das ganze funzt aber auch net: HTML

<td onmouseout="this.className='out_y';" onmouseover="this.className='in_y';" >

CSS

#in_y {
bgColor:#FF00FF;
}

#out_y {
bgColor:#000000;
}

Da ändert sich die Hintergrundfarbe aber nicht!

kasimir83 · 10. März 2003

Es müsste glaube ich auch backgroundColor heißen.

Trinity21 · 10. März 2003

versuchs mal so,

background-color: #000000

kasimir83 · 10. März 2003

Das kommt davon wenn man js und css verwechselt...
Trinity hat Recht.

rasputin · 11. März 2003

lol
kein wunder geht das nicht. denn

Code:

#in_y { 
bgColor:#FF00FF; 
} 

#out_y { 
bgColor:#000000; 
}

ist auch keine klasse, sondern ein individualformat!
es müsste so heissen, un es sollte funktionieren:

Code:

.in_y { 
background-color:#FF00FF; 
} 

.out_y { 
background-color:#000000; 
}

womstar · 11. März 2003

Originally posted by rasputin

......es müsste so heissen, und es sollte funktionieren:

bin etwas dumm, kannst du mal in der css referenz nach bgColor suchen ich find das einfach nicht

aber das mit punkt und raute ist richtig

rasputin · 11. März 2003

hehe
so jetzt stimmts

DarealZnarkde · 11. März 2003

Hey vielen Dank, so funktionierts... aber den Unterschied zwischen # und . habe ich noch nicht begriffen...

womstar · 11. März 2003

http://selfhtml.teamone.de/css/formate/zentrale.htm#div_span

http://selfhtml.teamone.de/css/formate/zentrale.htm#individualformate

DarealZnarkde · 11. März 2003

Danke, aber auch wenn ich Farben anstatt Bilder verwende, flacket es... daran kann's also nicht liegen...

womstar · 11. März 2003

ach, mist ich hab mir erst jetzt die seite angesehn, weil der link so versteckt war.

das liegt daran das zwischen den einzelnen buttons nen zwischenraum ist der das mouseout ereignis auslöst, denk ich mir.

was ist denn wenn du den mouseout wech läst?

<div id="pointer" onMouseOver="menue(music);" onMouseOut="menue(music);">Music</div>
<div id="music" onMouseOut="menue(music);">

DarealZnarkde · 12. März 2003

habe selber noch was rumgebastelt und eine gute Lösung gefunden:

Code:

<html>

<head>
<title>Beyond the System</title>
<base target="Content">
<link rel="stylesheet" type="text/css" href="css/navigation_01.css">
<link rel="stylesheet" type="text/css" href="css/text_nav.css">
<link rel="stylesheet" type="text/css" href="css/table_nav.css">

<script>
function menue(layer,direction)  {
if (direction=="out") {
layer.style.visibility="hidden";
}
if (direction=="over") {
layer.style.visibility="visible";
}
}
</script>


</head>

<body>

<center>

<table border="0" cellspacing="30" cellpadding="0">

  <tr>
    <td  onmouseover="this.className='in_y';menue(music,'over');" onmouseout="this.className='out_y';menue(music,'out');" bgcolor="#fffda5" >

Music
      <div id="music" onMouseOver="menue(music,'over');" onMouseOut="menue(music,'out');">
      <table border="0" cellspacing="0" cellpadding="0" >
        <tr>
          <td onmouseover="this.className='in_y';" onmouseout="this.className='out_y';" bgcolor="#fffda5" >
          CDs
          </td>
        </tr>
        <tr>
          <td onmouseover="this.className='in_y';" onmouseout="this.className='out_y';" bgcolor="#fffda5" >
          Lyrics
          </td>
        </tr>
        <tr>
          <td onmouseover="this.className='in_y';" onmouseout="this.className='out_y';" bgcolor="#fffda5" >
          Translation
          </td>
        </tr>
        <tr>
          <td onmouseover="this.className='in_y';" onmouseout="this.className='out_y';" bgcolor="#fffda5" >
          Interpretation
          </td>
        </tr>
      </table>
      </div>
    </td>
 <td  onmouseover="this.className='in_b';menue(artists,'over');" onmouseout="this.className='out_b';menue(artists,'out');" bgcolor="#a5a5ff" >
 Artists
 <div id="artists" onMouseOver="menue(artists,'over');" onMouseOut="menue(artists,'out');">
      <table border="0" cellspacing="0" cellpadding="0" >
        <tr>
          <td bgcolor="#a5a5ff" onmouseover="this.className='in_b';" onmouseout="this.className='out_b';">
          Serj
          </td>
         </tr>
        <tr>
          <td bgcolor="#a5a5ff"  onmouseover="this.className='in_b';" onmouseout="this.className='out_b';">
          Daron
          </td>
        </tr>
        <tr>
          <td bgcolor="#a5a5ff" onmouseover="this.className='in_b';" onmouseout="this.className='out_b';">
          Shavo
          </td>
        </tr>
        <tr>
          <td bgcolor="#a5a5ff" onmouseover="this.className='in_b';" onmouseout="this.className='out_b';">
          John
          </td>
        </tr>
      </table>
      </div>
    </td>
    <td onmouseover="this.className='in_g';menue(poetry,'over');" onmouseout="this.className='out_g';menue(poetry,'out');" bgcolor="#a5ffa5" >
    Poetry
      <div id="poetry" onMouseOver="menue(poetry,'over');" onMouseOut="menue(poetry,'out');">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#a5ffa5" onmouseover="this.className='in_g';" onmouseout="this.className='out_g';">
          Poetry
          </td>
        </tr>
        <tr>
          <td bgcolor="#a5ffa5" onmouseover="this.className='in_g';" onmouseout="this.className='out_g';">
          Translation
          </td>
        </tr>
        <tr>
          <td bgcolor="#a5ffa5" onmouseover="this.className='in_g';" onmouseout="this.className='out_g';">
          Interpretation
          </td>
        </tr>
      </table>
      </div>
    </td>
    <td onmouseover="this.className='in_r';menue(topics,'over');" onmouseout="this.className='out_r';menue(topics,'out');" bgcolor="#ffa5a5">
Hot Topics
      <div id="topics" onMouseOver="menue(topics,'over');" onMouseOut="menue(topics,'out');">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td bgcolor="#ffa5a5" onmouseover="this.className='in_r';" onmouseout="this.className='out_r';">
          Religion
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffa5a5" onmouseover="this.className='in_r';" onmouseout="this.className='out_r';">
          War
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffa5a5" onmouseover="this.className='in_r';" onmouseout="this.className='out_r';">
          America
          </td>
        </tr>
        <tr>
          <td bgcolor="#ffa5a5" onmouseover="this.className='in_r';" onmouseout="this.className='out_r';">
          <a href="topics_marijuana.html" target="content">Marijuana</a>
          </td>
        </tr>
      </table>
      </div>
    </td>
  </tr>

</table>
<br><br><br>
</center>

</body>

</html>

...allerdings erscheinen die Menüpunkte nun nicht unter der Überschrift, sondern daneben... warum?

womstar · 12. März 2003

post doch bitte nicht immer den ganzen code, okay?!

eine TXT-DATEI erfüllt den selben zweck!

trotzalledem seh ich nicht das was du beschreibst, bei mir ist alles schick untereinander, außer das beim laden die menupunkte visible und nicht hidden sind.

DarealZnarkde · 17. März 2003

Hmm... bei mir erscheinen die daneben... hier mal ein Link http://www.znark.de/soad/navigation.html

.marc · 17. März 2003

also bei mir momentan auf einem MAC mit IE 5.0 stehen sie ebenfalls rechts daneben.

womstar · 17. März 2003

ach, ich hat mir nur den code gesichert und nicht die css dateinen...

und....

wie wäre es mit nem <br> nach den überschrifen der menus??

Code:

........
<TD onmouseover="this.className='in_b';menue(artists,'over');" onmouseout="this.className='out_b';menue(artists,'out');" bgColor=#a5a5ff>
Artists[COLOR=red]<br>[/COLOR]<DIV id=artists onmouseover="menue(art
...........

[JAVA SCRIPT] Navigation

New member

Lounge-Member

New member

New member

New member

Lounge-Member

New member

Lounge-Member

Lounge-Member

Lounge-Member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

Lounge-Member

New member

New member

Lounge-Member