DD: CSS in Javascript

SELF-Forum

CSS in Javascript

DD
– Informationen zu den Bewertungsregeln

Hallo Forum,

ich habe wenig Ahnung, weshalb sich mir eine vielleicht einfach zu beantwortende Frage stellt.

In dem nachstehenden Quelltext geht es um ein Menu. Bei Mouseover erscheint eine zweite Reihe unter dem Hauptmenü. Ich würde jetzt gerne der ersten und der zweiten Reihe ein je verschiedenes CSS- Format zuweisen, aber so, wie es im normalen html funktioniert (Bsp.: class="xxx"), geht es hier nicht. Ansonsten ist der Quelltext eigentlich einfach.

Hat jemand eine Idee/ Tipp?

Vielen Dank & Gruß!
DD

Hier der Quelltext:

<head>
<style>
<!--
<!-- Format für obere Zeile "Test 01" //-->
a.meno:link {color : #000000; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a.meno:visited {color : #000000; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a.meno:active {color : #000000; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a.meno:hover {color: #000000; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }

<!-- Format für untere Zeile "Test A"//-->
a.menu:link {color : #9F989F; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a.menu:visited {color : #9F989F; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a.menu:active {color : #9F989F; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a.menu:hover {color: #EFEFEF; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }

a:link {color : #9F989F; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a:visited {color : #9F989F; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a:active {color : #9F989F; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
a:hover {color: #EFEFEF; text-decoration: none; font-family:"Arial"; font-size:10pt; font-weight:bold }
-->
</style>

</head>

<body bgcolor="#6F7080">
<table border="0" width="790">
  <tr>
    <td width="100%" align="center"><script language="JavaScript">
var link_array = new Array();
link_array = [
["Start","http://www.java24.net","_blank",],
["Test 01","http://www.java24.net","_blank",[["Test A","http://www.java24.net","_blank"],["Test B","http://www.java24.net","blank"]]]
];

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1;
var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1;
var ns4=document.layers;

function changes(id)
{
  var txt ="<center>";
  id = id-1
  for(i=0;i<link_array[id][3].length;i++)
  {
    txt += "<a href='"+link_array[id][3][i][1]+"' target='"+link_array[id][3][i][2]+"'>"
    txt += link_array[id][3][i][0];
    txt += "</a>    "
  }
  txt += "</center>"

if(ie4||ns6)
  {
   dsub_obj.innerHTML = txt;
  }
  if(ns4)
  {
   dsub_obj=document.dsub;
   dsub_obj.document.write(txt);
   dsub_obj.document.close();
 }
}

if(ns4) document.write("<layer><center>")
else document.write("<div class=header>")
for(i=0;i<link_array.length;i++)
{
 document.write("<img src='men01.gif'>  ")
 document.write("<a href='"+link_array[i][1]+"' target='"+link_array[i][2]+"' onmouseover=changes("+(i+1)+")>")
 document.write(link_array[i][0]);
 document.write("</a>     ")
}
if(ns4) document.write("</center></layer><br><layer id=dsub name=dsub class=subheader></layer>")
else document.write("</div><div id=dsub name=dsub class=subheader></div>")
var dsub_obj
 if(ns4)
 {
  dsub_obj=document.dsub;
 }
  if(ie4)
 {

dsub_obj=document.all.dsub;
 }
 if(ns6)
 {
  dsub_obj=document.getElementById("dsub");
 }
changes(1);
</script>
    </td>
  </tr>
</table>
</body>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS in Javascript

    Thomas Luethi Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo "DD",

    Ich habe keine Lust, mich durch Deine Quellcode-Wueste zu arbeiten.
    Was mir auf den ersten Blick auffaellt, ist die "falsch" Reihenfolge
    der Pseudoklassen.
    Die "richtige" Reihenfolge der Link-Pseudoklassen ist:
    :link, :visited, :hover, :active.
    :focus wuerde ich vor :hover angeben: :link, :visited, :focus, :hover, :active
    http://www.netandmore.de/faq/fom-serve/cache/1237.html und
    http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

    Zudem hast Du einen boesen HTML-Fehler:
    Du verschachtelst im STYLE-Bereich HTML-Kommentare.
    Validiere Dein HTML und CSS:
    http://validator.w3.org/
    http://jigsaw.w3.org/css-validator/

    Ansonsten: Mit JavaScript kann man die Klasse eines Elements nachtraeglich aendern.
    this.className='neueklasse'
    oder so...
    http://selfhtml.teamone.de/javascript/objekte/all.htm#class_name

    Vielleicht hilft Dir auch das hier weiter:
    http://www.netandmore.de/faq/fom-serve/cache/1271.html

    Gruesse,

    Thomas

    --
    Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
    Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
    Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln