MouseOver --> selektiert abhängige Elemente

  • #1
D

Don_Pazo

Bekanntes Mitglied
Themenersteller
Dabei seit
16.09.2005
Beiträge
112
Reaktionspunkte
0
Hallo allerseits,

ihr alle kennt bestimmt das Auswahlfeld Tabelle beim Microsoft Word. Bei diesem Feld ist so, dass wenn man den Mauszeiger bewegt, werden Kästchen selektiert.
Genauer gesagt, es werden abhängig von dem Position der Mauszeiger die darin enthaltene Kästchen auch mit selektiert.

Beispiel:
bild_anzeigen.php

bild_anzeigen.php

http://www1.minpic.de/bild_anzeigen.php?id=68397&key=46889575&ende
http://www1.minpic.de/bild_anzeigen.php?id=68398&key=62846280&ende

Genau dieses Effekt will ich auch erreichen.
Kann mir bitte einer bei der Lösung dieses Problem helfen?

mein code:
Code: 
<html>
	<head>
		<title>NiN</title>
		<style type=text/css>
			.x-palette {
				width: 150px;
				height: 92px;
				cursor: pointer;
			}
			.x-palette a {
				border: 1px solid;
				float: left;
				padding: 2px;
				text-decoration: none;
				-moz-outline: 0 none;
				outline: 0 none;
				cursor: pointer;
			}
			.x-palette a:hover, .x-palette a.x-color-sel {
				border: 1px solid;
			}
			.x-palette em {
				display: block;
				border: 1px solid;
			}
			.x-palette em span {
				cursor: pointer;
				display: block;
				height: 10px;
				line-height: 10px;
				width: 10px;
			}
		</style>
	</head>
	<body>
		<DIV class= x-palette>
			<A class=r1-c1 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r1-c2 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r1-c3 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r1-c4 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r1-c5 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r1-c6 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r1-c7 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r1-c8 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r2-c1 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r2-c2 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r2-c3 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r2-c4 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r2-c5 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r2-c6 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r2-c7 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r2-c8 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r3-c1 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r3-c2 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r3-c3 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r3-c4 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r3-c5 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r3-c6 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r3-c7 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
			<A class=r3-c8 href=#><EM><SPAN style=BACKGROUND: #FFFFFF unselectable=on> </SPAN></EM></A>
		</DIV>
	</body>
</html>
 
  • #2
die Lösung (für alle die es auch wissen wollen):

Code: 
<html>
<head>
<script language=JavaScript>
function mark(obj) {
  var current = obj.id.split(-);
  var row = current[0].replace(r,);
  var col = current[1].replace(c,);
  var as = obj.parentNode.getElementsByTagName(A);
  for (i = 0;i < as.length;i++) {
    c = as[i].id.split(-);
    cr = c[0].replace(r,);
    cc = c[1].replace(c,);
    if (cr <= row && cc <= col) {
      as[i].className = marked;
    } else {
      as[i].className = notmarked;
    }
  }
}
function unMarkAll() {
  var as = document.getElementById(container).getElementsByTagName(A);
  for (i = 0;i < as.length;i++) {
    as[i].className=notmarked;
  }
}

</script> 
		<style type=text/css>
			.x-palette {
				width: 150px;
				height: 92px;
				cursor: pointer;
			}
			.x-palette a {
				border: 1px solid;
				float: left;
				padding: 2px;
				text-decoration: none;
				-moz-outline: 0 none;
				outline: 0 none;
				cursor: pointer;
			}
			.x-palette a:hover, .x-palette a.x-color-sel {
				border: 1px solid;
			}
			.x-palette em {
				display: block;
				border: 1px solid;
			}
			.x-palette em span {
				cursor: pointer;
				display: block;
				height: 10px;
				line-height: 10px;
				width: 10px;
			}
			
			.marked{
				background: #FFAA11;
			}
		</style>
</head>
<body>
<DIV class=x-palette id=container>
  <A id=r1-c1 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r1-c2 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r1-c3 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r1-c4 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r1-c5 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r1-c6 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r1-c7 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r1-c8 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r2-c1 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r2-c2 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r2-c3 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r2-c4 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r2-c5 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r2-c6 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r2-c7 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r2-c8 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r3-c1 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r3-c2 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r3-c3 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r3-c4 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r3-c5 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r3-c6 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r3-c7 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
  <A id=r3-c8 href=# onMouseOver=mark(this) onMouseOut=unMarkAll()><EM><SPAN> </SPAN></EM></A>
</DIV>
</body>
</html>
 
Thema:

MouseOver --> selektiert abhängige Elemente

ANGEBOTE & SPONSOREN

Neueste Themen

Statistik des Forums

Themen
113.838
Beiträge
707.961
Mitglieder
51.491
Neuestes Mitglied
haraldmuc
Oben