Zum Inhalt springen

MouseOver :: selektiert abhängige Elemente

Don_Pazo
 Teilen

Empfohlene Beiträge

Don_Pazo

Don_Pazo

Geschrieben
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
DominikJ

DominikJ

Geschrieben
Geschrieben

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?

Link zu diesem Kommentar
Auf anderen Seiten teilen
Don_Pazo

Don_Pazo

Geschrieben
  • Autor
Geschrieben
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

Link zu diesem Kommentar
Auf anderen Seiten teilen
DominikJ

DominikJ

Geschrieben
Geschrieben

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?

Link zu diesem Kommentar
Auf anderen Seiten teilen
Don_Pazo

Don_Pazo

Geschrieben
  • Autor
Geschrieben

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?

Link zu diesem Kommentar
Auf anderen Seiten teilen
T3D

T3D

Geschrieben
Geschrieben

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

Link zu diesem Kommentar
Auf anderen Seiten teilen
DominikJ

DominikJ

Geschrieben
Geschrieben

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...