✔ Dynamische Navigation?

G

greYphil

Grünschnabel
Moin beisammen. Gleich zu beginn, ich hab alles abgesucht und nichts gefunden, was passt.

Zum Problem:

Ich habe eine Zeile aus Bildern, die die einzelnen Nav buttons sind. Darunter ist eine Zelle wo ich bei mouseover einen Text erscheinen lassen will, bei mouseout eben wieder weg. Dass es bei einem Button klappt, hab ich geschafft:

JS
Code: 
 function change(text) {
document.getElementById('Id1').innerHTML=""+ text +""; 
}

Button:
Code: 
img onmouseover="change();document.getElementById('Id1').innerHTML = 'Home'" onmouseout="change();document.getElementById('Id1').innerHTML = ''" src=....

Zelle:
Code: 
<td id="Id1" >bla</td>

Aber wie kann ich das bei z.B: 8 verschiedenen Buttons machen? Geht das, wenn man draufklickt und der Content per include() geladen wird, dass der Text stehen bleibt? Oder geht das nur bei Frames.

Vielen Dank schonmal im Vorraus
 
Meinst du so in der Art:
HTML: 
<script type="text/javascript"><!--
function change() {
    var arg = change.arguments;
    if( obj = document.getElementById(arg[1]) )
        obj.innerHTML= arg[0] ? arg[0] : ''; 
}
//-->
</script>

<img onmouseover="change('Text von Button1','Id1')" onmouseout="change()" src=.... />
<img onmouseover="change('Text von Button2','Id2')" onmouseout="change()" src=.... />
... usw. ...
<img onmouseover="change('Text von Button8','Id8')" onmouseout="change()" src=.... />

<div id="Id1"></div>
<div id="Id2"></div>
... usw. ...
<div id="Id8"></div>
 
include() ist eine php Funktion, da php eine serverseitige Sprache ist und somit auf dem Server ablaufen muss, kannst du sie nicht von JS aus aufrufen, weil alles an php schon lange auf dem Server abgearbeitet ist, wenn JS beim Client zum Zug kommt.
 
Bis auf die Tatsache, dass ich den Text einer Zelle (also <td>) und immer dieselbe ändern wollte, hat alles gepasst. Hab einfach jedem Button dieselbe Id gegeben.
Das mit PHP dachte ich mir bereits.
Vielen vielen Dank.

Und wie kann ich jetzt den Textstyle ändern? Weil Standart ist Times und das sieht kacke aus. Welche css Befehl ist das?
 
Zuletzt bearbeitet:
Ach wirklich?...

Nur wenn ich jetzt in der css

Code: 
#Id1			{ font-family: Verdana; font-size: 9pt }

eingebe, ändert das gar nix.
 
Versuche einfach mal probeweise den CSS "Inline" zu implentieren. Evtl. hängt es mit einem anderem Problem zusammen.

Oder noch besser poste doch mal deinen gesamten Code. Vielleicht hat sich wo ein Fehler eingeschlichen?!
 
Page (include verlinkung fehlt noch & css wird überarbeitet):

Code: 
<html>
<head>
<title>Index</title>

<script type="text/javascript"><!--
function change() {
    var arg = change.arguments;
    if( obj = document.getElementById(arg[1]) )
        obj.innerHTML= arg[0] ? arg[0] : ''; 
}
//-->
</script>

<link rel="stylesheet" type="text/css" href="wik.css">
</head>

<body topmargin="0" leftmargin="0">

<table border="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="1165" id="AutoNumber1" height="195" cellpadding="0">
  <tr>
    <td width="799" height="46" colspan="2" background="Bilder/bg.gif">
			<img src="Bilder/wirtschaftsschule_01.gif" alt="" width="112" height="59"><img src="Bilder/wirtschaftsschule_02.gif" alt="" width="79" height="59"><img src="Bilder/wirtschaftsschule_03.gif" alt="" width="56" height="59"><img border="0" src="Bilder/wirtschaftsschule_04.gif" width="206" height="59"><img src="Bilder/wirtschaftsschule_05.gif" alt="" width="135" height="59"></td>
    <td width="182" height="46" background="Bilder/bg.gif">&nbsp;</td>
  </tr>
  <tr>
    <td width="799" height="1" valign="top" colspan="2" bgcolor="#8C9393">
			<img src="Bilder/wirtschaftsschule_07.gif" alt="" width="112" height="27"><img onmouseover="change('Die Startseite','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/wirtschaftsschule_08.gif" alt="" width="79" height="27"><img onmouseover="change('Das Direktorat','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/wirtschaftsschule_10.gif" alt="" width="75" height="27"><img onmouseover="change('Informationen rund um die Wirtschaftsschule in Bayern','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/wirtschaftsschule_11.gif" alt="" width="76" height="27"><img onmouseover="change('Die wichtigsten Termine für das Schulhalbjahr','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/wirtschaftsschule_12.gif" alt="" width="74" height="27"><img onmouseover="change('Das Kollegium','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/wirtschaftsschule_13.gif" alt="" width="75" height="27"><img onmouseover="change('Fotos von unseren Schulaktivitäten und Festen','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/wirtschaftsschule_14.gif" alt="" width="75" height="27"><img onmouseover="change('Berichte über/von unserer Schule','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/wirtschaftsschule_15.gif" alt="" width="72" height="27"><img onmouseover="change('Kontaktadressen','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/wirtschaftsschule_16.gif" alt="" width="75" height="27"><img onmouseover="change('Impressum','Id1')" onmouseout="change('&nbsp;','Id1')" src="Bilder/impressum_09.gif" alt="" width="74" height="27"></td>
    <td width="365" height="4" valign="top" rowspan="2" bgcolor="#8C9393">&nbsp;</td>
    <td width="1" height="1" valign="top"></td>
  </tr>
  <tr  class="Id1" >
    <td class="Id1" width="189" height="3" bgcolor="#D3DCDC">
    <p style="margin-top: 0; margin-bottom: 0">
			<img src="Bilder/wirtschaftsschule_18.gif" alt="" width="112" height="25"><img border="0" src="Bilder/q.gif" width="73" height="25"></td>
    <td class="Id1" id="Id1" width="610" height="3" valign="middle" bgcolor="#D3DCDC">
    <font face="Verdana" size="2">Herzlich Willkommen!</font></td>
    <td width="1" height="3" valign="top"></td>
  </tr>
  <tr>
    <td width="189" height="38" valign="top" background="Bilder/links_bg.gif">
			<img src="Bilder/wirtschaftsschule_21.gif" alt="" width="162" height="68"><img src="Bilder/wirtschaftsschule_25.gif" alt="" width="162" height="9"><br>
&nbsp;&nbsp;&nbsp; &gt;Beispiele<br>
&nbsp;&nbsp; <br>
			<img src="Bilder/wirtschaftsschule_27.gif" alt="" width="162" height="19"><br>
			<img src="Bilder/wirtschaftsschule_25.gif" alt="" width="162" height="9"><br>
</td>
    <td width="610" height="57" rowspan="2">
			<img src="Bilder/wirtschaftsschule_23.gif" alt="" width="610" height="731"></td>
    <td width="182" height="57" rowspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="189" height="19" valign="top">
			<img src="Bilder/wirtschaftsschule_27.gif" alt="" width="162" height="19"></td>
  </tr>
  <tr>
    <td width="981" height="19" colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td width="981" height="19" colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td width="981" height="19" colspan="3">&nbsp;</td>
  </tr>
  <tr>
    <td width="981" height="19" colspan="3">&nbsp;</td>
  </tr>
</table>

</body>

</html>

CSS:

Code: 
p            { font-family: Verdana; font-size: 10pt }
body         { font-family: Verdana; font-size: 10pt }
a            { font-family: Verdana; font-size: 10pt; font-weight: bold }
a:visited    { font-family: Verdana; font-size: 10pt; font-weight: bold } }
a:link       { font-family: Verdana; font-size: 10pt; font-weight: bold } }
a:active     { font-family: Verdana; font-size: 10pt; font-weight: bold } }
#Id1			{ font-family: Verdana; font-size: 9pt }
 
Wenn du einer <td> die Klasse "Id1" gibst muss dass in CSS mit ".Id1" und nicht mit "#Id1" deklariert werden. Ganz davon abgesehen, dass Tabellen bei JS und CSS fast immer rumzicken (zumindest im IE). Tabellen sind kein Raster für Seitenlayout.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück