Problem mit mouseover

M

MM12345

Hallo,

ich habe eine zweispaltige Tabelle, bei der jeweils ein MouseOverEvent geworfen werden soll, sobald die Maus sich in einer Zeile befindet. Dadurch soll ein Text angezeigt werden soll.

Mein HTML Code it so:

Code: 
<tr onmouseover="displayMouseOver();" onmouseout="doSomething();">
  <td>Zeile 1 - Spalte 1</td>
  <td>  
       <input type="text" id="xyz" name="abc">
       <span id="multiText" style="display:none;position:absolute;width:200px;background: #ffffaa;">
           <p>Das ist der MouseOverText!</p>
       </span>
  </td>																
</tr>
	
<tr onmouseover="displayMouseOver();" onmouseout="doSomething();">
  <td>Zeile 2 - Spalte 1</td>
  <td>  
       <input type="text" id="ccc" name="ddd">
       <span id="multiText" style="display:none;position:absolute;width:200px;background: #ffffaa;">
           <p>Das ist der 2 te MouseOverText!</p>
       </span>
  </td>																
</tr>

Nun verwende ich folgenden JavaScriptCode:

Code: 
function doSomething(){			
  document.getElementById('multiText').style.display = 'none';
}
		
function displayMouseOver() {			
  document.getElementById('multiText').style.display = 'block';
}

soweit sogut,

mein Problem ist nun das nur immer der erste MouseOverText angezeigt wird (da gleiche ID).
Ich will den einzelnen MouseOver Texten keine festen ID's geben.

Meine Idee war nun im MouseOver Event zu schauen auf welchem Element ich bin und dann einfach den nächsten span tag (Mouseover Text zu aktivieren)

hab mir da was in der Richtung gedacht:

Code: 
function displayMouseOver() {			
  this.childNotes[1].childNotes[1].style.display = 'block';
}

Leider geht das nicht.

Jemand ne Idee?

Vielen Dank
 
Code: 
function displayMouseOver() {           
  this.childNodes[1].childNodes[1].style.display = 'block';
}
function displayMouseOver() {           
  this.getelementById('multiText').style.display = 'block';
}

beides versucht geht leider nicht :(
denk eher das Problem liegt an dem this, dass er nicht weiß wo er sich im Moment befindet, kann das sein ?
Wäre wirklich ärgerlich wenn ich das mit festen IDs lösen müsste
 
Ändere mal folgende Zeile
HTML: 
<tr onmouseover="displayMouseOver();" onmouseout="doSomething();">
in folgende
HTML: 
<tr onmouseover="displayMouseOver.call(this);" onmouseout="doSomething();">

Jetzt sollte innerhalb der Funktion "displayMouseOver" this den richtigen Wert haben.

Davon mal abgesehen ist es nicht erlaubt mehreren Elementen die gleiche ID zu geben.

Hier nochmal als funktionierendes Beispiel
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="html" xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<title>Page title</title>
	
	<script type="text/javascript">
	/* <![CDATA[ */
		function doSomething(){
			this.getElementsByTagName('span')[0].style.display = 'none';
		}
		
		function displayMouseOver() {
			this.getElementsByTagName('span')[0].style.display = 'block';
		}
	/* ]]> */
	</script>
</head>

<body>
	<table>
		<tr onmouseover="displayMouseOver.call(this);" onmouseout="doSomething.call(this);">
			<td>Zeile 1 - Spalte 1</td>
			<td>  
				<input type="text" id="xyz" name="abc" />
				<span style="display:none;position:absolute;width:200px;background: #ffffaa;">
					<p>Das ist der MouseOverText!</p>
				</span>
			</td>
		</tr>

		<tr onmouseover="displayMouseOver.call(this);" onmouseout="doSomething.call(this);">
			<td>Zeile 2 - Spalte 1</td>
			<td>  
				<input type="text" id="ccc" name="ddd" />
				<span style="display:none;position:absolute;width:200px;background: #ffffaa;">
					<p>Das ist der 2 te MouseOverText!</p>
				</span>
			</td>
		</tr>
	</table>
</body>

</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück