Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

MouseOver :: selektiert abhängige Elemente

Gast Don_Pazo
Gast Don_Pazo
in Skript- und Webserverprogrammierung

Empfohlene Antworten

Veröffentlicht

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>

	<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>

post-28157-14430448306696_thumb.jpg

post-28157-14430448306817_thumb.jpg

Hey,

hast du schon einen Lösungsansatz?

Oder soll dir alles vorgekaut werden?

Und ich kenne das Auswahlfeld Tabelle nicht.

Nähere Beschreibung?

... Edit:

Ich habe kein Office 2007!

Aber wenn ichs nun recht sehe, willst du eine Tabelle, welche alle vorherigen Kästchen bis zum aktuellen Element (über welchem sich die Maus befindet) selektiert?

Hey,

hast du schon einen Lösungsansatz?

Oder soll dir alles vorgekaut werden?

Ich habe keinen Lösungsansatz, sonst hätte ich hier nicht gepostet.

Aber wenn ichs nun recht sehe, willst du eine Tabelle, welche alle vorherigen Kästchen bis zum aktuellen Element (über welchem sich die Maus befindet) selektiert?

Ja Dominik, genau das will ich. Selektieren ober auch natürlich unSelektieren wenn man den Mauszeiger auf einem anderen Feld bewegt.

Grüße

Nagut, ein Ansatz wäre zumindest evtl. schonmal eine vorgehensweise, wie du es machen würdest...

Da ja auch ein bisschen lern-funktion hierbei sein soll würde ich dich doch bitten, dir einfach mal was zu überlegen und hier zu schreiben.

Vom 'HTML-Code' her ist das schonmal ok und kann so zur Verwendung genutzt werden.

Kannst du denn Javascript?

ja, javascript kenne ich.

  1. Ich muss beim "onMouseOver" der Tag-class um eine zusätzliche css-classe erweitern (von mir aus "selected-item") bei der ich die Kästchen ("border") ändere.
  2. Beim "onMouseOut" sollte ich aber die css-classe ("selected-item") bei alle selektierten Kästchen löschen.
  3. die ID sollte ich aber besser wählen, weil ich mir r1-c2 keine Schleifen bauen kann?

1. Klingt gut

2. dito

3. Du kannst eine schleife durch alle elemente eines eltern elements bauen. Also schon ok so.

Ich würd den Feldern <a> ne Id geben x_y (1_1, 1_2, 2_1 ... )

und dann könnte das in etwa so aussehen.


function onmouseoverFunktion(id) {

  id = id.split("_");

  for(var i = 0; i < id[0]; i++) {

    for(var j = 0; j < id[1]; j++) {

      document.getElementById(i + '-' + j).class = 'markedClass';

    } 

  }

}

Ted

...

Dann halt kein lernen xD

Hallo T3D,

danke für den Codesnipsel.

und danke an DominikJ, habe trotzdem was gelernt.

Grüße

Joa,

kein Problem trotzdessen geht es hier ja nicht darum sachen für andere zu Programmieren sondern ihnen dabei zu helfen.

<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">

	/* weggelassen */

</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>[/PHP]

das else kannste dir natürlich aufgrund unmarkall sparen.

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.