Onmouseover mit Active Zustand

MikeDe

MikeDe

Mitglied
Hallo,

ich hab auf eine Tabellenzeile (tr) ein onmouseover und -out womit ich den Background der Zeile ändere, nun wird beim klicken der Tabellenzeile (passiert über onklick) ein Box (über id) eingeblendet und der Hintergrund der Tabellenzeile (vorher onmouseover Färbung) bekommt eine andere Farbe (i.style.background = "#000". sobald ich das Ganze rückgängig mache bleibe ich mit meinem js latein auf der strecke.

Kann man das i.style.background = "#000"; wieder löschen oder so? ich möchte nach dem Ausblenden wieder zum onmouseover/out zurückkehren!

JS:
Code: 
 function show(id) {
 var d=document.getElementById("event"+id);
 var i=document.getElementById("e"+id);
 
  if (d.style.display == "") {
  d.style.display = "none";
  i.style.background = "none";
  } else { 
  d.style.display = "";
  i.style.background = "#000";
  }
}

HTML AUSSCHNITT DER TABELLENZEILE
Code: 
<tr class="trnormal" id="eid"" onclick="show(id)" 
 onmouseover="this.className='trhover'" 
 onmouseout="this.className='trnormal'">
 
link

ich hab es mal in einen externe datei gesteckt, es soll der onmouseover zustand beim show zustand erhalten bleibe, also schwarz bleiben und beim wieder ausblenden zum mouseover zurückkehren!
 
Hi,

ohne genau nachgesehen zu haben: meinst Du vielleicht so etwas?
HTML: 
<script language="JavaScript" type="text/javascript">
var isactive = false;

function switchCell(obj, c1, c2) {
    if (isactive == false) {
	    obj.style.backgroundColor = c1;
	} else {
	    obj.style.backgroundColor = c2;
	}
	isactive = !isactive;
}

function changeColor(obj, color) {
    if (isactive == false) obj.style.backgroundColor = color;
}
</script>
<body>
<table width="50%" border="1">
  <tr>
    <td id ="mycell" style="background-Color: #FF0000" onMouseOver="changeColor(this, '#FFFF00')" onMouseOut="changeColor(this, '#FF0000')" onClick="switchCell(this, '#FF00FF', '#FFFF00')">&nbsp;</td>
  </tr>

</table>
</body>
(habe ich hier schon einmal gepostet, finde aber den Link nicht mehr)

Du müsstest Deine Funktion show() lediglich in die Funktion switchCell() integrieren.

Gruß
.
 
Es ist im grunde das was ich brauche, nur das ich es halt auf mehrere Tabellenzeilen anwenden muss. Ich bastle einwenig, vielleicht komme ich zum Ziel, es ist aber erstmal ein Schritt weiter!
 
ich bekomme es nicht hin. :(

bitte oben mal meinen beispiel link klicken!

ich habe mehrere tabellenzeilen unabhänig voneinander und immer wenn eine box eingeblendet wird soll die farbe der tabellenzeile sich ändern und so lange sichtbar sein bis man die box wieder ausblendet.
 
Hi,
HTML: 
<script type="text/javascript">
function showEvent(id) {
	var d=document.getElementById("event"+id);
	var i=document.getElementById("e"+id);

	if (d.style.display == "") {
		d.style.display = "none";
	} else { 
		d.style.display = "";
	}

	if (i.isactive == false || i.isactive == undefined) {
		i.style.backgroundColor = "#000";
		i.isactive = true;
	} else {
		i.style.backgroundColor = "#ffffff";
		i.isactive = false;
	}
}

function highlight(obj) {
	if (obj.isactive != true) {
		obj.style.backgroundColor = "#000";
	}
}

function delight(obj) {
	if (obj.isactive != true) {
		obj.style.backgroundColor = "#ffffff";
	}
}
</script>
<body>
<table cellpadding="0" cellspacing="0" border="1" width="400">
<tr id="e20" onclick="showEvent('20')" onmouseover="highlight(this)" onmouseout="delight(this)">
<td>click</td>
</tr>
<tr>
<td><div id="event20" class="tr" style="display: none;">&nbsp;</div></td>
</tr>
<tr class="trnormal" id="e21" onclick="showEvent('21')" onmouseover="highlight(this)" onmouseout="delight(this)">
<td>click</td>
</tr>

<tr>
<td><div id="event21" class="tr" style="display: none;">&nbsp;</div></td>
</tr>
</table>
</body>

Gruß
.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück