Ergebnis 1 bis 4 von 4

Thema: ImageMap und Mouseover

  1. #1

    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!

    Danke und Grüße,
    foxsoft

  2. #2
    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:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Hauptschule Mechernich</title>
    <link href="assets/main.css" rel="stylesheet" type="text/css">
    
    
    <script src="spry/SpryMenuBar.js" type="text/javascript"></script>
    <script src="spry/SpryEffects.js" type="text/javascript"></script>
    <link href="spry/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    img {border:0}
    a:link {
    	color: #000;
    }
    a:visited {
    	color: #000;
    }
    a:hover {
    	color: #000;
    }
    a:active {
    	color: #000;
    }
    #apDiv1 {
    	position:absolute;
    	left:463px;
    	top:357px;
    	width:436px;
    	height:322px;
    	z-index:1;
    	display:none;
    }
    #apDiv2 {
    	position:absolute;
    	left:476px;
    	top:360px;
    	width:470px;
    	height:321px;
    	z-index:1;
    	display:none;
    }
    #apDiv3 {
    	position:absolute;
    	left:597px;
    	top:333px;
    	width:470px;
    	height:329px;
    	z-index:1;
    	display:none;
    }
    #apDiv4 {
    	position:absolute;
    	left:75px;
    	top:296px;
    	width:319px;
    	height:218px;
    	z-index:2;
    	display:none;
    }
    </style>
    <script type="text/javascript">
    function displayIt(div,toggle) {
    	document.getElementById(div).style.display = (toggle)?'block':'none';
    }
    </script>
    </head>
    
    <body>
    <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>
    <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>
    <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>
    <div id="apDiv4" onmouseover="displayIt('apDiv4',1)" onmouseout="displayIt('apDiv4',0)"><img src="images/bus_quali.jpg" alt="Qualifikation" width="565" height="280"></div>
    <div id="container">
      <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">Startseite</a>      </li>
          <li><a href="schule.html" class="MenuBarItemSubmenu">Schule</a>
            <ul>
              <li><a href="grundsaetze.html">Grunds&auml;tze</a></li>
              <li><a href="unterrichtszeiten.html">Unterrichtszeiten</a></li>
              <li><a href="mittag.html">&Uuml;bermittagsbetreuung</a></li>
              <li><a href="abschluesse.html">Abschl&uuml;sse</a></li>
            </ul>
          </li>
          <li><a href="lage.html">Lage</a>      </li>
          <li><a href="kollegium.html" class="MenuBarItemSubmenu">Kollegium</a>
            <ul>
              <li><a href="schulleitung.html">Schulleitung</a></li>
              <li><a href="personal.html">Personal</a></li>
            </ul>
          </li>
          <li><a href="schule_erleben.html" class="MenuBarItemSubmenu">Schule erleben</a>
            <ul>
              <li><a href="offene_tuer10.html">offene T&uuml;r '10</a></li>
              <li><a href="sauberhaftes_mechernich.html">Sauberhaftes Mechernich</a></li>
              <li><a href="klassenfahrten.html">Klassenfahrten</a></li>
            </ul>
          </li>
          <li><a href="praxis.html" class="MenuBarItemSubmenu">Schule und Beruf</a>
            <ul>
              <li><a href="partnerschaften.html">Partnerschaften</a></li>
              <li><a href="bus_klasse.html">Bus-Klasse</a></li>
            </ul>
          </li>
          <li><a href="termine.html">Termine</a></li>
          <li><a href="kontakt.html">Kontakt</a></li>
        </ul>
      </div>
    <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">
      <map name="buskl">
        <area shape="rect" coords="27,110,221,162" href="#" id="ap1" onmouseover="displayIt('apDiv1',1)" onmouseout="displayIt('apDiv1',0)" alt="main">
        <area shape="rect" coords="51,252,179,303" href="#" id="ap2" onmouseover="displayIt('apDiv2',1)" onmouseout="displayIt('apDiv2',0)" alt="arbeitgeber">
        <area shape="rect" coords="170,356,364,403" href="#" id="ap3" onmouseover="displayIt('apDiv3',1)" onmouseout="displayIt('apDiv3',0)" alt="ziele">
        <area shape="rect" coords="435,325,571,380" href="#" id="ap4" onmouseover="displayIt('apDiv4',1)" onmouseout="displayIt('apDiv4',0)" alt="quali">
        <area id="ap5" shape="rect" coords="578,229,722,284" href="#" alt="">
        <area id="ap6" shape="rect" coords="592,102,740,156" href="#" alt="">
      </map>
      
       
      
    </div>
        <div id="footer">Hauptschule Mechernich, Nyonsplatz, 53894 Mechernich; <span class="fett_rechts"><a href="impressum.html">Impressum</a></span></div>
    </div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"spry/SpryMenuBarDownHover.gif", imgRight:"spry/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    btw. HTML hat Regeln, die du einhalten solltest: The W3C Markup Validation Service

    Gruß
    Broken Sword

    Wie gesagt, eher HTML => Moved
    Crypt the viking way if(version_compare(strval($user->brain),'2.0','<')) die('U r incompatible with this post!'); DotA

  3. #3
    Danke für die schnelle Antwort..

    so läufts :-)

  4. #4
    Nächstes mal Präfix umstellen => http://www.freesoft-board.to/f238/fa...lt-248151.html

    => Closed

    Gruß
    Broken Sword
    Crypt the viking way if(version_compare(strval($user->brain),'2.0','<')) die('U r incompatible with this post!'); DotA

Ähnliche Themen

  1. Tommy Zanko - Nur für Dich | 2010 | mp3tag
    Von krombacher1 im Forum Up MP3s
    Antworten: 1
    Letzter Beitrag: 14.08.2010, 07:48
  2. Welche Antivirensoftware ?
    Von Heikoo im Forum Software Talk
    Antworten: 5
    Letzter Beitrag: 26.08.2009, 10:47
  3. Zeiten.des.Aufruhrs.DVDSCR.MD.German.XviD-SKA by N0Nam€-Crew
    Von MC4Live im Forum ISOz & Copyz von Moviez
    Antworten: 31
    Letzter Beitrag: 30.03.2009, 14:53
  4. Controller am PC aufladen!?
    Von yannikst im Forum Playstation 3
    Antworten: 4
    Letzter Beitrag: 03.01.2009, 20:25
  5. Elektronik/House/Breaks Alben
    Von lovevoltage im Forum Up MP3s
    Antworten: 0
    Letzter Beitrag: 15.08.2007, 15:01

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •