MouseOver :: selektiert abhängige Elemente

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • MouseOver :: selektiert abhängige Elemente

    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:

    Quellcode

    1. <html>
    2. <head>
    3. <title>NiN</title>
    4. <style type="text/css">
    5. .x-palette {
    6. width: 150px;
    7. height: 92px;
    8. cursor: pointer;
    9. }
    10. .x-palette a {
    11. border: 1px solid;
    12. float: left;
    13. padding: 2px;
    14. text-decoration: none;
    15. -moz-outline: 0 none;
    16. outline: 0 none;
    17. cursor: pointer;
    18. }
    19. .x-palette a:hover, .x-palette a.x-color-sel {
    20. border: 1px solid;
    21. }
    22. .x-palette em {
    23. display: block;
    24. border: 1px solid;
    25. }
    26. .x-palette em span {
    27. cursor: pointer;
    28. display: block;
    29. height: 10px;
    30. line-height: 10px;
    31. width: 10px;
    32. }
    33. </style>
    34. </head>
    35. <body>
    36. <DIV class=" x-palette">
    37. <A class=r1-c1 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    38. <A class=r1-c2 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    39. <A class=r1-c3 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    40. <A class=r1-c4 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    41. <A class=r1-c5 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    42. <A class=r1-c6 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    43. <A class=r1-c7 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    44. <A class=r1-c8 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    45. <A class=r2-c1 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    46. <A class=r2-c2 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    47. <A class=r2-c3 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    48. <A class=r2-c4 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    49. <A class=r2-c5 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    50. <A class=r2-c6 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    51. <A class=r2-c7 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    52. <A class=r2-c8 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    53. <A class=r3-c1 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    54. <A class=r3-c2 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    55. <A class=r3-c3 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    56. <A class=r3-c4 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    57. <A class=r3-c5 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    58. <A class=r3-c6 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    59. <A class=r3-c7 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    60. <A class=r3-c8 href="#"><EM><SPAN style="BACKGROUND: #FFFFFF" unselectable="on">&nbsp;</SPAN></EM></A>
    61. </DIV>
    62. </body>
    63. </html>
    Alles anzeigen
    Bilder

    • 1.jpg

      11,51 kB, 203×175, 77 mal angesehen

    • 2.jpg

      11,6 kB, 206×179, 57 mal angesehen

  • Lösung:

    Quellcode

    1. <html>
    2. <head>
    3. <script language="JavaScript">
    4. function mark(obj) {
    5. var current = obj.id.split("-");
    6. var row = current[0].replace("r","");
    7. var col = current[1].replace("c","");
    8. var as = obj.parentNode.getElementsByTagName("A");
    9. for (i = 0;i < as.length;i++) {
    10. c = as[i].id.split("-");
    11. cr = c[0].replace("r","");
    12. cc = c[1].replace("c","");
    13. if (cr <= row && cc <= col) {
    14. as[i].className = "marked";
    15. } else {
    16. as[i].className = "notmarked";
    17. }
    18. }
    19. }
    20. function unMarkAll() {
    21. var as = document.getElementById("container").getElementsByTagName("A");
    22. for (i = 0;i < as.length;i++) {
    23. as[i].className="notmarked";
    24. }
    25. }
    27. </script>
    28. <style type="text/css">
    29. .x-palette {
    30. width: 150px;
    31. height: 92px;
    32. cursor: pointer;
    33. }
    34. .x-palette a {
    35. border: 1px solid;
    36. float: left;
    37. padding: 2px;
    38. text-decoration: none;
    39. -moz-outline: 0 none;
    40. outline: 0 none;
    41. cursor: pointer;
    42. }
    43. .x-palette a:hover, .x-palette a.x-color-sel {
    44. border: 1px solid;
    45. }
    46. .x-palette em {
    47. display: block;
    48. border: 1px solid;
    49. }
    50. .x-palette em span {
    51. cursor: pointer;
    52. display: block;
    53. height: 10px;
    54. line-height: 10px;
    55. width: 10px;
    56. }
    58. .marked{
    59. background: #FFAA11;
    60. }
    61. </style>
    62. </head>
    63. <body>
    64. <DIV class="x-palette" id="container">
    65. <A id="r1-c1" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    66. <A id="r1-c2" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    67. <A id="r1-c3" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    68. <A id="r1-c4" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    69. <A id="r1-c5" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    70. <A id="r1-c6" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    71. <A id="r1-c7" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    72. <A id="r1-c8" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    73. <A id="r2-c1" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    74. <A id="r2-c2" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    75. <A id="r2-c3" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    76. <A id="r2-c4" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    77. <A id="r2-c5" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    78. <A id="r2-c6" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    79. <A id="r2-c7" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    80. <A id="r2-c8" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    81. <A id="r3-c1" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    82. <A id="r3-c2" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    83. <A id="r3-c3" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    84. <A id="r3-c4" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    85. <A id="r3-c5" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    86. <A id="r3-c6" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    87. <A id="r3-c7" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    88. <A id="r3-c8" href="#" onMouseOver="mark(this)" onMouseOut="unMarkAll()"><EM><SPAN>&nbsp;</SPAN></EM></A>
    89. </DIV>
    90. </body>
    91. </html>
    Alles anzeigen