MouseOver --> selektiert abhängige Elemente

Dieses Thema MouseOver --> selektiert abhängige Elemente im Forum "Windows XP Forum" wurde erstellt von Don_Pazo, 21. Apr. 2009.

Thema: MouseOver --> selektiert abhängige Elemente Hallo allerseits, ihr alle kennt bestimmt das Auswahlfeld Tabelle beim Microsoft Word. Bei diesem Feld ist so, dass...

  1. 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:
    [​IMG]
    [​IMG]
    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> 
    
     
Die Seite wird geladen...

MouseOver --> selektiert abhängige Elemente - Ähnliche Themen

Forum Datum
Mouseover-Fokus spinnt Windows XP Forum 11. Nov. 2011
Anzeige bei MouseOver über Bildern Web-Browser 30. Juni 2009
Bei Mouseover über Text Bild ändern Windows XP Forum 15. Apr. 2008
OnMouseOver Webentwicklung, Hosting & Programmierung 6. Apr. 2007
onMouseover anstatt settimeout Webentwicklung, Hosting & Programmierung 24. Feb. 2007