✔ Javascript CSS klasse ändern

S

socke999

Erfahrenes Mitglied
Javascript CSS klasse ändern - Firefox problem

ÄNDERUNG: Die Problemstellung hat sich geändert deshalb, siehe post weiter unten: http://www.tutorials.de/forum/javascript-ajax/281281-javascript-css-klasse-aendern.html#post1454320


---------------------------------------------------------------------------------------------------------------------------------

Hi, ich habe ein problem und komm da einfach nicht mehr weiter:

Also, ich habe ein Menü, eine Tabelle, fährt man mit der Maus über eine Zeile, so ändert sich der Hintergrund der Tabelle. Dies habe ich mit Javascript und CSS gelößt. So weit so gut.
Nun möcht ich nur noch die Schrift, die in dieser Tabellenzelle ist (in einer Div-Box) verschieben (also auf margin-left:11px; margin-top:8px;) und daran scheitere ich zurzeit.

Im klartext, ich weiß nicht wie ich mit JavaScript auf das div Object zugrefen kann:
http://www.creaplan.com/test ist mein beispiel.

HTML: 
<td class="menunormal" onmouseover="navin(this)" onmouseout="navout(this)" height="46">
<table width="281" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="32" height="10"></td>
            <td width="249" height="10"></td>
          </tr>
          <tr>
            <td height="26"></td>
            <td height="26"><div id="m1" align="left" class="menuschrift"><strong>&Uuml;BER UNS </strong></div></td>
          </tr>
          <tr>
            <td height="10"></td>
            <td height="10"></td>
          </tr>
        </table>
		</td>


meine Javascript funktion sieht so aus:
Code: 
function navin(object)
{
	object.className="menuhover";
	// hier möcht ich nun irgendwie auf die Div klasse zugreifen
               // um dort die marrgin Einstellungen zu setzen, nur wie?

}

function navout(object)
{
	object.className="menunormal";
               // Margin einstellungen auf none setzen, nur wie?

}

Ich weiß schon, das man mit document.getelementbyid() das Element aufrufen kann, nur weis ich nicht, wenn die Javascript funktion aufgerufen wird, bzw. auf welcher Tabellenzeile, also Menüitem ich gerade bin.

Kann mir da jemand weiter helfen?

Wenn ich das so mache:
HTML: 
<td class="menunormal" onmouseover="navin(this)" onmouseout="navout(this)" height="46">
<table width="281" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="32" height="10"></td>
            <td width="249" height="10"></td>
          </tr>
          <tr>
            <td height="26"></td>
            <td height="26"><div id="m1" onmouseover="this.className='menuschrifthover'" 
			onmouseout="this.className='menuschrift'" align="left" class="menuschrift"><strong>&Uuml;BER UNS </strong>
			</div></td>
          </tr>
          <tr>
            <td height="10"></td>
            <td height="10"></td>
          </tr>
        </table>
		</td>
also, mit <div onmouseover und onmouseout> die CSS Klasse ändere dann hab ich das Problem, das die schrift erst verschoben wird mit marrgin, wenn ich auch auf der schrift mit der maus bin. Da aber die Tabellenzelle größer ist, als die div box, passiert das eben, dass der Tabellenhintergrund und die Divbox, nicht zugleich angepasst werden, was es ja aber tun sollte
 
Zuletzt bearbeitet:
Hi,

wieso verwendest du nicht einfach ein Listenelement zur Auszeichnung des Menüs und nimmst den Grafiktausch, sowie das "Verschieben" des Linktextes ausschliesslich mit CSS vor?

Denn wenn im User-Agent Javascript deaktiviert ist, funktioniert an dem Menü überhaupt nichts mehr. Zudem sind Tabellen semantisch für das, was du da vorhast überhaupt nicht vorgesehen.

In meinem CSS-Tutorial CSS-Rollover kannst du nachlesen, wie sich ein Grafiktausch mit CSS umsetzen lässt.

Achja, in einer CSS-Datei wird das <style>-Tag nicht angegeben.
 
Ansonsten hab ich dir mal ne kleine Funktion zum Durchsuchen des TD-Objekts nach DIV-Bereichen geschrieben. Das sieht dann folgendermaßen aus:

Javascript: 
function navin(object)
{
	var obj_div = parse_children(object);
	if(obj_div)
	{
		obj_div.style.marginLeft = "11px";
		obj_div.style.marginTop = "8px";
	}
}

function parse_children(obj)
{
	var children = obj.childNodes;
	for(var i=0; i<children.length; i++)
	{
		if(children[i].nodeName == "DIV" && children[i].className == "menuschrift")
			return children[i];
		if(children[i].childNodes.length > 0)
		{
			var ret_val = parse_children(children[i]);
			if(ret_val)
				return ret_val;
		}
	}
}

function navout(object)
{
	var obj_div = parse_children(object);
	if(obj_div)
	{
		obj_div.style.marginLeft = "";
		obj_div.style.marginTop = "";
	}
}

So müsste es funktionieren (bei mir klappt's).

Hoffe, ich konnte dir helfen
Master of Chess
 
Zuletzt bearbeitet von einem Moderator:
Danke für die Hilfe,
kenn mich mit listenelemente nicht so ganz aus, werd mich da versuchen einzulesen,

falls nicht werd ich, wenn ich darf, dein Javascript benutzen, Master of Chess...


Jedenfalls vielen Dank für die Hilfe!
 
Also, nun hab ich es ohne JavaScript fast gelöst. Also das Menü von http://www.creaplan.com/test/ funktioniert nun nur mit CSS und HTML.
Ich habe jetzt nur noch ein kleines darstellungsproblem im Firefox und Netscape.
Im Internet Explorer, Opera und Safari funktioniert alles wie es soll.

Also, es funktioniert im Firefox nur nicht, dass die Div Box mit dem Text wenn man mit der Maus drüber fährt um das padding eingestellten wert verschoben wird, aber wie schon gesagt mit einigen anderen Browsern funktioniert.

Mein Quelltext sieht so aus:
HTML: 
<style type="text/css">

ul#menu
{
margin:0px;
padding:0px;
}


#menu li
{

margin:0px;
padding:0px;
width:281px;
height:46px;
list-style:none;
}

#menu li a
{
background-image:url(images/menugrau.jpg);
text-decoration:none;
display:block;
width:281px;
height:46px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FFFFFF;
}

#menu li a:hover
{
background-image:url(images/menuknick.jpg);
text-decoration:none;
display:block;
width:281px;
height:46px;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#FF0000;
}

.divmenu
{
	border:none;
	padding-left:20px;
	padding-top:15px;
	
}

.divmenuhover
{
	border:none;
	padding-left:31px;
	padding-top:18px;
	
}


</style>
<table width="750" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="281" valign="top">
	<ul id="menu">
	<li>
	  <div align="left"><a href="index.php" onmouseover="m1.className='divmenuhover'" 
	  onmouseout="m1.className='divmenu'"><div id="m1" class="divmenu">Menü1</div></a>
	    
	      </div>
	</li>
	<ul id="menu">
	<li>
	  <div align="left"><a href="index.php" onmouseover="m2.className='divmenuhover'" 
	  onmouseout="m2.className='divmenu'"><div id="m2" class="divmenu">Menü2</div></a>
	    
	      </div>
	</li>
	<ul id="menu">
	<li>
	  <div align="left"><a href="index.php" onmouseover="m3.className='divmenuhover'" 
	  onmouseout="m3.className='divmenu'"><div id="m3" class="divmenu">Menü3</div></a>
	    
	      </div>
	</li>
	
	<ul id="menu">
	<li>
	  <div align="left"><a href="index.php" onmouseover="m4.className='divmenuhover'" 
	  onmouseout="m4.className='divmenu'"><div id="m4" class="divmenu">Menü4</div></a>
	    
	      </div>
	</li>
	
	<ul id="menu">
	<li>
	  <div align="left"><a href="index.php" onmouseover="m5.className='divmenuhover'" 
	  onmouseout="m5.className='divmenu'"><div id="m5" class="divmenu">Menü5</div></a>
	    
	      </div>
	</li>
	
	</ul>
	</td>
    <td width="469"><table width="469" border="0" cellpadding="0" cellspacing="0" bgcolor="#212524">
      <tr>
        <td width="3" height="10"></td>
        <td width="456" height="10" background="images/menurahmen.jpg"></td>
        <td width="10" height="10" bgcolor="#687272"></td>
      </tr>
      <tr>
        <td width="3"></td>
        <td width="456" height="210"><img src="bilder/beispiel1.jpg" width="456" height="210" /></td>
        <td width="10" bgcolor="#687272"></td>
      </tr>
      <tr>
        <td width="3" height="10"></td>
        <td height="10" background="images/menurahmen.jpg"></td>
        <td width="10" height="10" bgcolor="#687272"></td>
      </tr>
    </table></td>
  </tr>
</table>

Nun ist die Frage, wo ist das nicht so ganz w3c, sprich Firefox Kompatibel? Ich weiß ist schwer zu sagen, aber Fragen kann man ja mal :-)
 
Bei mir schmeisst der FF ein JS-Fehler nach dem Anderen aus.

Ändere mal folgendes ab:

m1.className = 'divmenuhover';

document.getElementsById('m1').className = 'divmenuhover';

Damit geht es.
 
Hi!
socke999 hat gesagt.:
Nun ist die Frage, wo ist das nicht so ganz w3c, sprich Firefox Kompatibel? Ich weiß ist schwer zu sagen, aber Fragen kann man ja mal :-)
Zum Vergrößern anklicken....
Hast du schon mal den Quellcode durch den w3c-Validator gejagt?

Guckst du hier: http://validator.w3.org/check?uri=http://www.creaplan.com/test/

  1. Eine ID muss im Dokument eindeutig sein.
  2. Inline-Elemente dürfen keine Block-Elemente enthalten.
Und wozu überhaupt die ganzen DIVs?

Code: 
<ul id="menu">
    <li><a href="#">Menü 1</a></li>
    <li><a href="#">Menü 2</a></li>
    <li><a href="#">Menü 3</a></li>
    <li><a href="#">Menü 4</a></li>
    <li><a href="#">Menü 5</a></li>
</ul>
Die padding-Eigenschaften zum "Verschieben" des Textes lassen sich doch auch direkt auf das a-Element anwenden:

Code: 
#menu li a {
display:block;
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}

#menu li a:link, #menu li a:visited
{
background-image:url(images/menugrau.jpg);
width:261px;
height:31px;
padding-left:20px;
padding-top:15px;
color:#FFFFFF;
}

#menu li a:hover
{
background-image:url(images/menuknick.jpg);
width:250px;
height:28px;
padding-left:31px;
padding-top:18px;
color:#FF0000;
}

ssurfer hat gesagt.:
Bei mir schmeisst der FF ein JS-Fehler nach dem Anderen aus.

Ändere mal folgendes ab:

m1.className = 'divmenuhover';

document.getElementsById('m1').className = 'divmenuhover';

Damit geht es.
Zum Vergrößern anklicken....
Tatsächlich? Die Methode heißt aber getElementById(), und "getElementsById()" dürfte somit ebenfalls einen JS-Fehler nach dem anderen erzeugen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück