✔ "MouseOver" selektiert abhängige Elemente

Don_Pazo

Don_Pazo

Erfahrenes Mitglied
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.

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

mein code:
HTML: 
<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">&nbsp;</SPAN></EM></A>
			<A class=r1-c2 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r1-c3 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r1-c4 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r1-c5 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r1-c6 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r1-c7 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r1-c8 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r2-c1 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r2-c2 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r2-c3 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r2-c4 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r2-c5 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r2-c6 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r2-c7 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r2-c8 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r3-c1 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r3-c2 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r3-c3 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r3-c4 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r3-c5 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r3-c6 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r3-c7 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
			<A class=r3-c8 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
		</DIV>
	</body>
</html>
 

Anhänge

  • 1.jpg
    1.jpg
    11,2 KB · Aufrufe: 33
  • 2.jpg
    2.jpg
    11,3 KB · Aufrufe: 39
Lösung (für alle die es noch wissen wollen):

HTML: 
<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>&nbsp;</SPAN></EM></A>
    <A id="r1-c2" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r1-c3" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r1-c4" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r1-c5" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r1-c6" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r1-c7" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r1-c8" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r2-c1" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r2-c2" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r2-c3" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r2-c4" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r2-c5" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r2-c6" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r2-c7" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r2-c8" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r3-c1" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r3-c2" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r3-c3" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r3-c4" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r3-c5" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r3-c6" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r3-c7" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    <A id="r3-c8" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
</DIV>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück