✔ Probleme mit OnMouseOut / OnMouseOver beim einblenden von Texten

digiTAL · 6. Mai 2005

Hey Di Ho,

ich habe eine Ein-/Ausblend Funktion geschaffen. Wenn man auf den Link klickt, blendet sich gleich der Text untendrunter ein.
So weit so gut, dann wollte ich noch die Funktion OnMouseOut / OnMouseOver für den Hintergrundfarbe beim rüberscrollen einfügen und da fangen die Probleme schon an.

Sobald ich auf den Link drücke verschiebt sich alles und das will ich nicht, genauso wie beim geöffneten Text, dort verschiebt sich auch alles. Wie kann ich das verhindern!?

PHP:

<html><head>
<meta name="generator" content="Namo WebEditor v6.0">
<style>
body{
	margin:0px; font-family:verdana; color:#444444; font-size:12px; cursor:default}
#nav a:link {
	color:#333333; text-decoration:underline; font-size:12px}
#nav a:visited{
	color:#333333; text-decoration:underline; font-size:12px}
#nav a:active{
	color:#000000; text-decoration:none; font-size:12px}
#nav a:hover {
	color:#000000; text-decoration:none; font-size:12px}
#click a:link {
	color:#cf0202; text-decoration:underline; font-size:12px; font-weight:bold}
#click a:visited{
	color:#cf0202; text-decoration:underline; font-size:12px; font-weight:bold}
#click a:active{
	color:#CC0000; text-decoration:none; font-size:12px; font-weight:bold}
#click a:hover {
	color:#CC0000; text-decoration:none; font-size:12px; font-weight:bold}
.navi{
	font-size:12px; color:#333333; background-color:#d5d5d5; border:1px solid #c5c5c5; padding:2px; line-height:17px}
.leer{
	background-color:#e5e5e5; font-size:4px}
.trennen{
	border-right:1px solid #d5d5d5; background-color:#e5e5e5; font-size:4px}
.roll {
	background-color:#DFCFCF; border:1px solid #B39999; width:200px; height:22px}
</style>
<script language="JavaScript" type="text/javascript"> 
<!-- 
function blend(div) { 
  with(document.getElementById(div).style){ 
    if(display=="none"){ 
      display="inline"; 
    } 
    else{ 
      display="none"; 
    } 
  } 
} 

function over(cell, classname) {
  if (document.all || document.getElementById) {
    cell.classBackup = cell.className;
    cell.className   = classname;
  }
}

function out(cell)
{
  if (document.all || document.getElementById) {
    cell.className   = cell.classBackup;
  }
}
//--> 
</script> 

</head><body>

<table width="780" cellpadding="0" cellspacing="0">
	<tr>
	<td height="60" width="780">&nbsp;</td>
	</tr>
</table>
<table cellpadding="0" cellspacing="0" width="790">
    <tr>
	<td width="210">&nbsp;</td>
	<td width="5" rowspan="7" class="trennen">&nbsp;</td>
	<td width="574" valign="top" rowspan="7">&nbsp;</td>
    </tr>
	<tr>
	<td width="204" height="23" class="navi" OnMouseOut="out(this)"
	OnMouseOver="over(this, 'roll')"><span id="click"><a
		href="#" onClick="blend('a1'); return false">MenuePunkt 1</a></span><br>
		<div id="a1" style="display:none"><span id="nav">» <a
		href="#">Untermenue a</a><br>» <a
		href="#">Untermenue b</a></span></div></td>
	</tr>
	<tr>
	<td width="210" height="4" class="leer">&nbsp;</td>
	</tr>
	<tr>
	<td width="204" height="23" class="navi" OnMouseOut="out(this)"
	OnMouseOver="over(this, 'roll')"><span id="click"><a
		href="#" onClick="blend('a2'); return false">MenuePunkt 2</a></span><br>
		<div id="a2" style="display:none"><span id="nav">» <a
		href="#">Untermenue a</a><br>» <a
		href="#">Untermenue b</a></span></div></td>
	</tr>
	<tr>
	<td width="210" height="4" class="leer">&nbsp;</td>
	</tr>
	<tr>
	<td width="204" height="23" class="navi" OnMouseOut="out(this)"
	OnMouseOver="over(this, 'roll')"><span id="click"><a
		href="#" onClick="blend('a3'); return false">MenuePunkt 3</a></span><br>
		<div id="a3" style="display:none"><span id="nav">» <a
		href="#">Untermenue a</a><br>» <a
		href="#">Untermenue b</a></span></div></td>
	</tr>
	<tr>
	<td width="210" height="4" class="leer">&nbsp;</td>
	</tr>
</table>

</body></html>

Könnt ihr mir da helfen!?

Maik · 6. Mai 2005

Grundsätzlich gilt:

Eine ID (= Individualformat) darf in einem Dokument / einer Seite nur einmal vergeben werden.

Deine drei Hauptmenüpunkte und Submenüs besitzen aber jeweils die gleiche ID #click und #nav.
Lösungsvorschlag: entweder verwendest du CSS-Klassen .click und .nav, oder drei einzelne ID's, wie z.B. #click1, #click2, #click3, sowie #nav1, #nav2, #nav3

Was die Verschiebungen beim Überfahren des Menüs betrifft, so sollten die Schriftgrösse font-size: 12px, der Innenabstand padding: 2px, die Zeilenhöhe line-height: 17px und die Dimensionen (Breite/Höhe) der Tabellenzelle .navi auch für die Klasse .roll notiert werden - also:

Code:

span.click a:link {
    color:#cf0202; text-decoration:underline; font-size:12px; font-weight:bold; }
span.click a:visited{
    color:#cf0202; text-decoration:underline; font-size:12px; font-weight:bold; }
span.click a:hover {
    color:#CC0000; text-decoration:none; font-size:12px; font-weight:bold; }
span.click a:active{
    color:#CC0000; text-decoration:none; font-size:12px; font-weight:bold; }

span.nav a:link {
    color:#333333; text-decoration:underline; font-size:12px; }
span.nav a:visited{
    color:#333333; text-decoration:underline; font-size:12px; }
span.nav a:hover {
    color:#000000; text-decoration:none; font-size:12px; }
span.nav a:active{
    color:#000000; text-decoration:none; font-size:12px; }

td.navi {
    font-size:12px; color:#333333; background-color:#d5d5d5; border:1px solid #c5c5c5; padding:2px; line-height:17px; }
td.roll {
    font-size:12px; width:204px; height:23px; padding:2px; background-color:#DFCFCF; border:1px solid #B39999; }

HTML:

<span class="click"><a
        href="#" onClick="blend('a1'); return false">MenuePunkt 1</a></span><br>
        <div id="a1" style="display:none"><span class="nav">» <a
        href="#">Untermenue a</a><br>» <a
        href="#">Untermenue b</a></span></div>

<span class="click"><a
        href="#" onClick="blend('a2'); return false">MenuePunkt 2</a></span><br>
        <div id="a2" style="display:none"><span class="nav">» <a
        href="#">Untermenue a</a><br>» <a
        href="#">Untermenue b</a></span></div>

<span class="click"><a
        href="#" onClick="blend('a3'); return false">MenuePunkt 3</a></span><br>
        <div id="a3" style="display:none"><span class="nav">» <a
        href="#">Untermenue a</a><br>» <a
        href="#">Untermenue b</a></span></div>

[ Browsercheck: FF 1.0.2, IE 6.0, MOZ 1.6, NN 7.0, OP 7.23 ]

digiTAL · 6. Mai 2005

Hey,

danke für die Antwort. Aber das Problem besteht immer noch mit dem verkleinern des Feldes.
Also wenn man auf den Link klickt verkleinert sich ds Feld, wenn man mit der Maus weg geht vergrößert sich das Feld wieder einwenig.

Wie kann ich das hinbekommen das sich das Format oder Feld nicht mehr verschiebt / verkleinert oder vergrößert

digiTALE

Maik · 6. Mai 2005

digiTAL hat gesagt.:
Aber das Problem besteht immer noch mit dem verkleinern des Feldes.
Also wenn man auf den Link klickt verkleinert sich ds Feld, wenn man mit der Maus weg geht vergrößert sich das Feld wieder einwenig.

Wie kann ich das hinbekommen das sich das Format oder Feld nicht mehr verschiebt / verkleinert oder vergrößert

Das ist aber seltsam, denn meine Test-Seite funktioniert einwandfrei (siehe Browsercheck).

Hier der modifizierte Source-Code, basierend auf deinem Source-Posting:

HTML:

<html>
<head>
<meta name="generator" content="Namo WebEditor v6.0">
<title></title>
<style>
<!--
body{
    margin:0px; font-family:verdana; color:#444444; font-size:12px; cursor:default;}

span.click a:link {
    color:#cf0202; text-decoration:underline; font-size:12px; font-weight:bold;}
span.click a:visited{
    color:#cf0202; text-decoration:underline; font-size:12px; font-weight:bold;}
span.click a:hover {
    color:#CC0000; text-decoration:none; font-size:12px; font-weight:bold;}
span.click a:active{
    color:#CC0000; text-decoration:none; font-size:12px; font-weight:bold;}

span.nav a:link {
    color:#333333; text-decoration:underline; font-size:12px;}
span.nav a:visited{
    color:#333333; text-decoration:underline; font-size:12px;}
span.nav a:hover {
    color:#000000; text-decoration:none; font-size:12px;}
span.nav a:active{
    color:#000000; text-decoration:none; font-size:12px;}

td.navi {
    font-size:12px; color:#333333; background-color:#d5d5d5; border:1px solid #c5c5c5; padding:2px; line-height:17px; }
td.leer{
    background-color:#e5e5e5; font-size:4px;}
td.trennen{
    border-right:1px solid #d5d5d5; background-color:#e5e5e5; font-size:4px;}
td.roll {
    font-size:12px; background-color:#DFCFCF; border:1px solid #B39999; width:204px; height:23px; padding:2px; line-height: 17px;}
-->
</style>
<script language="JavaScript" type="text/javascript">
<!--
function blend(div) {
  with(document.getElementById(div).style){
    if(display=="none"){
      display="inline";
    }
    else{
      display="none";
    }
  }
}

function over(cell, classname) {
  if (document.all || document.getElementById) {
    cell.classBackup = cell.className;
    cell.className   = classname;
  }
}

function out(cell)
{
  if (document.all || document.getElementById) {
    cell.className   = cell.classBackup;
  }
}
//-->
</script>

</head><body>

<table width="780" cellpadding="0" cellspacing="0">
    <tr>
    <td height="60" width="780">&nbsp;</td>
    </tr>
</table>

<table cellpadding="0" cellspacing="0" width="790">
<tr>
    <td width="210">&nbsp;</td>
    <td width="5" rowspan="7" class="trennen">&nbsp;</td>
    <td width="574" valign="top" rowspan="7">&nbsp;</td>
    </tr>
    <tr>
    <td width="204" height="23" class="navi" OnMouseOut="out(this)"
    OnMouseOver="over(this, 'roll')"><span class="click"><a
        href="#" onClick="blend('a1'); return false">MenuePunkt 1</a></span><br>
        <div id="a1" style="display:none"><span class="nav">» <a
        href="#">Untermenue a</a><br>» <a
        href="#">Untermenue b</a></span></div></td>
    </tr>
    <tr>
    <td width="210" height="4" class="leer">&nbsp;</td>
    </tr>
    <tr>
    <td width="204" height="23" class="navi" OnMouseOut="out(this)"
    OnMouseOver="over(this, 'roll')"><span class="click"><a
        href="#" onClick="blend('a2'); return false">MenuePunkt 2</a></span><br>
        <div id="a2" style="display:none"><span class="nav">» <a
        href="#">Untermenue a</a><br>» <a
        href="#">Untermenue b</a></span></div></td>
    </tr>
    <tr>
    <td width="210" height="4" class="leer">&nbsp;</td>
    </tr>
    <tr>
    <td width="204" height="23" class="navi" OnMouseOut="out(this)"
    OnMouseOver="over(this, 'roll')"><span class="click"><a
        href="#" onClick="blend('a3'); return false">MenuePunkt 3</a></span><br>
        <div id="a3" style="display:none"><span class="nav">» <a
        href="#">Untermenue a</a><br>» <a
        href="#">Untermenue b</a></span></div></td>
    </tr>
    <tr>
    <td width="210" height="4" class="leer">&nbsp;</td>
    </tr>
</table>

</body></html>

[ editpost ]

Okay... habe den Übertragungs-Fehler gefunden: in meinem CSS-Code-Posting von heute morgen fehlt in der CSS-Klasse .roll die Zeilenhöhe line-height: 17px, sorry.

digiTAL · 6. Mai 2005

Ich danke dir

Hätte ja selber mal darauf kommen können wegen dem fehlenden "line-height" *dumm war*. Aber jetzt Funktioniert es einwandfrei.

THX

MFG digiTALE

✔ Probleme mit OnMouseOut / OnMouseOver beim einblenden von Texten

digiTAL

Erfahrenes Mitglied

Maik

digiTAL

Erfahrenes Mitglied

Maik

digiTAL

Erfahrenes Mitglied

Neue Beiträge