Hyperlink Onmouseover Zellenfarbe ändern und bei Klick halten...

C

cgubi

Grünschnabel
Hallo Javascript Experten,

Ich finde zu folgender Aufgabe trotz diverser Versuche keine 100% funktionierende
Lösung, vielleicht kann mir hier jemand helfen:


Aufgabe:

Ich habe ein Navigationsmenü wobei jeder Navigationspunkt (Link) in einer
einzelnen Tabellenzelle innerhalb einer Tabelle steht (HTML).


1. Ich möchte erreichen, dass sich die Hintergrundfarbe der Zelle ändert, sobald
die Maus über den LINK fährt (Mouseover) - aber wie gesagt - über den Link und nicht über die Zelle selbst.

2. Weiterhin soll die Zelle in dieser Farbe bleiben, sobald der Link angeklickt wurde (damit man immer weiß, in welchem Menüpunkt man sich befindet).
Erst wenn ein anderer Link im Menüpunkt ANGEKLICKT wird, soll die zuvor farbig markierte Zelle wieder die Ursprungsfarbe annehmen (Und dann soll sich natürlich die Farbe der Zelle mit dem neuen angeklickten Link ändern). Usw.

Ich hoffe, ich habe mich einigermaßen verständlich ausdrücken können ;-)

Bitte helft mir bei diesem Problem, da ich kurz vor dem Verzweifeln bin....

Vielen Dank im Voraus!
 
Hi!

Probiere das doch mal aus:
PHP: 
<script type="text/javascript">
<!--
var menuAngeklickt = false;
function menuOver(mpId) {
  if (mpId != menuAngeklickt)
  document.getElementById(mpId).style.backgroundColor='#FF0000';
  }
function menuOut(mpId) {
  if (mpId != menuAngeklickt)
    document.getElementById(mpId).style.backgroundColor='#FFFFFF';
  }
function menuClick (mpId) {
  if (menuAngeklickt)
    document.getElementById(menuAngeklickt).style.backgroundColor='#FFFFFF';
  menuAngeklickt = mpId;
  document.getElementById(mpId).style.backgroundColor='#00FFFF';
  }
//-->
</script>
<table width="250" border=1>
<tr>
 <td id="mp1"><a href="javascript:void(1)" onClick="menuClick('mp1')" onMouseOver="menuOver('mp1')" onMouseOut="menuOut('mp1')">Men&uuml;punkt 1</a></td>
</tr>
<tr>
 <td id="mp2"><a href="javascript:void(1)" onClick="menuClick('mp2')" onMouseOver="menuOver('mp2')" onMouseOut="menuOut('mp2')">Men&uuml;punkt 2</a></td>
</tr>
<tr>
 <td id="mp3"><a href="javascript:void(1)" onClick="menuClick('mp3')" onMouseOver="menuOver('mp3')" onMouseOut="menuOut('mp3')">Men&uuml;punkt 3</a></td>
</tr>
<tr>
 <td id="mp4"><a href="javascript:void(1)" onClick="menuClick('mp4')" onMouseOver="menuOver('mp4')" onMouseOut="menuOut('mp4')">Men&uuml;punkt 4</a></td>
</tr>
</table>

Wenn du's verwendest, würde ich mich über eine PM und / oder über einen Link zu meiner Homepage sehr freuen!

Mamphil
 
Zuletzt bearbeitet:
oder man könnte dies auch so machen, ist zwar kein javascrpt aber denoch gut:

PHP: 
<html><head>
<style>
body{
	FONT-SIZE:12px; FONT-FAMILY:Verdana; COLOR:black; MARGIN:10px;}
#linknav a{
	BACKGROUND:#F5F5F5; CURSOR: hand; MARGIN:0px; WIDTH:140px; HEIGHT:18px; FONT-SIZE:10px;
	COLOR:#000000; PADDING-LEFT:8px; PADDING-BOTTOM:2px; PADDING-TOP:3px; }
#linknav a:visited{
	BACKGROUND:#F5F5F5; CURSOR: hand; MARGIN:0px; WIDTH:140px; HEIGHT:18px; FONT-SIZE:10px;
	COLOR:#00000; PADDING-LEFT:8px; PADDING-BOTTOM:2px; PADDING-TOP:3px;}
#linknav a:hover{
	BACKGROUND:#CCCCCC; CURSOR: hand; MARGIN:0px; WIDTH:140px; HEIGHT:18px;
	BORDER-RIGHT:#999999 1px solid; PADDING-RIGHT:1px;
	BORDER-LEFT:#999999 1px solid; PADDING-LEFT:7px;
	BORDER-TOP:#999999 1px solid; PADDING-TOP:2px;
	BORDER-BOTTOM:#999999 1px solid; PADDING-BOTTOM:2px;}
</style>
<script language=JavaScript>
<!--
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("if(this.blur)this.blur()");}}
onload=BlurLinks;
-->
</script>
<meta name="generator" content="Namo WebEditor v6.0">
</head><body>
<table border="0" cellpadding="0" cellspacing="0" width="140" id="linknav">
<tr>
<td><a href="#">Test 1</a></td>
</tr>
<tr>
<td><a href="#">Test 2</a></td>
</tr>
<tr>
<td><a href="#">Test 3</a></td>
</tr>
</table>
</body></html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück