ImageMap und Mouseover

  • geschlossen
  • JavaScript

  • foxsoft
  • 1901 Aufrufe 3 Antworten

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

  • ImageMap und Mouseover

    Hallo,

    als relativer Neuling in der Webgestaltung habe ich versucht per Mouseover bei mehreren Imagemaps auf einem Bild weitere Info-AP-Divs zu rufen!

    Anzuschauen unter: Hauptschule Mechernich

    Wenn man mehrfach über die ImageMaps geht treten nun Fehler auf. Die Divs werden nicht mehr ausgeblendet, oder kommen nicht mehr...

    Woran liegt das? Und wie kann ich das ändern?
    Kann man vielleicht nur eine bestimmte Anzahl von ImageMaps pro Bild nutzen?

    EDIT: Scheinbar macht der 4. Punkt (Qualifikation/Abschluss) Probleme. Wenn man über diesen nicht geht, sondern mehrfach über die anderen drei (links) dann läufts. Nur wenn man über diesen als ersten geht, dann gibts Probleme!


    Bitte keine Tipps für javascript... denn da verstehe ich (noch) nix... bin froh, dass ich gerade anfangen css zu raffen! :D

    Danke und Grüße,
    foxsoft

  • Hi,
    das kommt daher, dass dein JS mit visibillity arbeitet. Diese Option lässt das Element nur "unsichtbar" werden, aber es ist immer noch präsent. Sprich, die Bilder überdecken die area-Tags. Die Maus kommt nicht über sie und dem zu Folge kann auch kein JS ausgeführt werden.
    Wenn du einfach nur ein- und ausblenden haben willst, würde ich das folgender Maßen machen:

    Quellcode

    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2. "http://www.w3.org/TR/html4/strict.dtd">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    5. <title>Hauptschule Mechernich</title>
    6. <link href="assets/main.css" rel="stylesheet" type="text/css">
    9. <script src="spry/SpryMenuBar.js" type="text/javascript"></script>
    10. <script src="spry/SpryEffects.js" type="text/javascript"></script>
    11. <link href="spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    12. <style type="text/css">
    13. img {border:0}
    14. a:link {
    15. color: #000;
    16. }
    17. a:visited {
    18. color: #000;
    19. }
    20. a:hover {
    21. color: #000;
    22. }
    23. a:active {
    24. color: #000;
    25. }
    26. #apDiv1 {
    27. position:absolute;
    28. left:463px;
    29. top:357px;
    30. width:436px;
    31. height:322px;
    32. z-index:1;
    33. display:none;
    34. }
    35. #apDiv2 {
    36. position:absolute;
    37. left:476px;
    38. top:360px;
    39. width:470px;
    40. height:321px;
    41. z-index:1;
    42. display:none;
    43. }
    44. #apDiv3 {
    45. position:absolute;
    46. left:597px;
    47. top:333px;
    48. width:470px;
    49. height:329px;
    50. z-index:1;
    51. display:none;
    52. }
    53. #apDiv4 {
    54. position:absolute;
    55. left:75px;
    56. top:296px;
    57. width:319px;
    58. height:218px;
    59. z-index:2;
    60. display:none;
    61. }
    62. </style>
    63. <script type="text/javascript">
    64. function displayIt(div,toggle) {
    65. document.getElementById(div).style.display = (toggle)?'block':'none';
    66. }
    67. </script>
    68. </head>
    70. <body>
    71. <div id="apDiv1" onmouseover="displayIt('apDiv1',1)" onmouseout="displayIt('apDiv1',0)"><img src="images/bus_main_info_over.jpg" alt="BuS-Klasse" width="518" height="364"></div>
    72. <div id="apDiv2" onmouseover="displayIt('apDiv2',1)" onmouseout="displayIt('apDiv2',0)"><img src="images/bus_arbeitgeber_over.jpg" alt="Arbeitgeber" width="487" height="345"></div>
    73. <div id="apDiv3" onmouseover="displayIt('apDiv3',1)" onmouseout="displayIt('apDiv3',0)"><img src="images/bus_ziele.jpg" alt="Ziele und Ergebnisse" width="508" height="341"></div>
    74. <div id="apDiv4" onmouseover="displayIt('apDiv4',1)" onmouseout="displayIt('apDiv4',0)"><img src="images/bus_quali.jpg" alt="Qualifikation" width="565" height="280"></div>
    75. <div id="container">
    76. <div id="header"></div>
    77. <div id="navigation">
    78. <ul id="MenuBar1" class="MenuBarHorizontal">
    79. <li><a href="index.html">Startseite</a> </li>
    80. <li><a href="schule.html" class="MenuBarItemSubmenu">Schule</a>
    81. <ul>
    82. <li><a href="grundsaetze.html">Grunds&auml;tze</a></li>
    83. <li><a href="unterrichtszeiten.html">Unterrichtszeiten</a></li>
    84. <li><a href="mittag.html">&Uuml;bermittagsbetreuung</a></li>
    85. <li><a href="abschluesse.html">Abschl&uuml;sse</a></li>
    86. </ul>
    87. </li>
    88. <li><a href="lage.html">Lage</a> </li>
    89. <li><a href="kollegium.html" class="MenuBarItemSubmenu">Kollegium</a>
    90. <ul>
    91. <li><a href="schulleitung.html">Schulleitung</a></li>
    92. <li><a href="personal.html">Personal</a></li>
    93. </ul>
    94. </li>
    95. <li><a href="schule_erleben.html" class="MenuBarItemSubmenu">Schule erleben</a>
    96. <ul>
    97. <li><a href="offene_tuer10.html">offene T&uuml;r '10</a></li>
    98. <li><a href="sauberhaftes_mechernich.html">Sauberhaftes Mechernich</a></li>
    99. <li><a href="klassenfahrten.html">Klassenfahrten</a></li>
    100. </ul>
    101. </li>
    102. <li><a href="praxis.html" class="MenuBarItemSubmenu">Schule und Beruf</a>
    103. <ul>
    104. <li><a href="partnerschaften.html">Partnerschaften</a></li>
    105. <li><a href="bus_klasse.html">Bus-Klasse</a></li>
    106. </ul>
    107. </li>
    108. <li><a href="termine.html">Termine</a></li>
    109. <li><a href="kontakt.html">Kontakt</a></li>
    110. </ul>
    111. </div>
    112. <div id="main_content"><img src="images/bus_title.jpg" alt="BuS-Klasse" name="busheader" width="747" height="78" id="busheader"><img src="images/bus_info.jpg" alt="Informationen über die BuS-Klasse" name="businfo" width="762" height="486" usemap="#buskl" id="businfo">
    113. <map name="buskl">
    114. <area shape="rect" coords="27,110,221,162" href="#" id="ap1" onmouseover="displayIt('apDiv1',1)" onmouseout="displayIt('apDiv1',0)" alt="main">
    115. <area shape="rect" coords="51,252,179,303" href="#" id="ap2" onmouseover="displayIt('apDiv2',1)" onmouseout="displayIt('apDiv2',0)" alt="arbeitgeber">
    116. <area shape="rect" coords="170,356,364,403" href="#" id="ap3" onmouseover="displayIt('apDiv3',1)" onmouseout="displayIt('apDiv3',0)" alt="ziele">
    117. <area shape="rect" coords="435,325,571,380" href="#" id="ap4" onmouseover="displayIt('apDiv4',1)" onmouseout="displayIt('apDiv4',0)" alt="quali">
    118. <area id="ap5" shape="rect" coords="578,229,722,284" href="#" alt="">
    119. <area id="ap6" shape="rect" coords="592,102,740,156" href="#" alt="">
    120. </map>
    124. </div>
    125. <div id="footer">Hauptschule Mechernich, Nyonsplatz, 53894 Mechernich; <span class="fett_rechts"><a href="impressum.html">Impressum</a></span></div>
    126. </div>
    127. <script type="text/javascript">
    128. var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"spry/SpryMenuBarDownHover.gif", imgRight:"spry/SpryMenuBarRightHover.gif"});
    129. </script>
    130. </body>
    131. </html>
    Alles anzeigen


    btw. HTML hat Regeln, die du einhalten solltest: The W3C Markup Validation Service

    Gruß
    Broken Sword

    Wie gesagt, eher HTML => Moved
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.