Nico Langen: Linkseiten Sprungmenü

hallo,

kann mir jemand helfen?
die Bilder zu den Links sollen beim mouseover überfahren des sprungmenü angezeigt werden. Das klappt auch im firefox, aber im ie und opera nicht(netscape hab ich noch garnicht vesucht). bei den reinen Links (ganz unten) klappt das aber in allen Browsern. ist das weil alle Browser die div tags anders interpretieren, oder hab ich beim schreiben schrott verzapft?
kann mir da jemand weiterhelfen?

Grüsse,

Nico

<html>
    <head>

<script>
<!--
pictures = new Array();
    pictures[0] = "<img src='bilder/link_bilder/aod_banner.jpg' border='0' width='400' />";
    pictures[1] = "<img src='bilder/link_bilder/doomstone.jpg' border='0' />";
    pictures[2] = "<img src='bilder/link_bilder/hellmasters.jpg' border='0' />";
    pictures[3] = "<img src='bilder/link_bilder/infinight.gif' border='0' />";
    pictures[4] = "<img src='bilder/link_bilder/lcn.jpg' border='0' />";
    pictures[5] = "<img src='bilder/link_bilder/Ra_s_Dawn.jpg' border='0' />";
    pictures[6] = "<img src='bilder/link_bilder/somewhere_in_nowhere.gif' border='0' />";
 pictures[7] = "<img src='bilder/link_bilder/Dunkler_Poet.jpg' border='0' />";
 pictures[8] = "<img src='bilder/link_bilder/reptured_silence.gif' border='0' />";
 pictures[9] = "<img src='bilder/link_bilder/WORLDSENDstudio_neu.gif' border='0' />";
 pictures[10] = "<img src='bilder/link_bilder/WORLDSENDstudio_neu.gif' border='0' />";

function show(id){
    document.getElementById("bilder").innerHTML = pictures[id];
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
    </head>
    <body>
        <div id="bilder" valign="top" align="left" style="position:absolute;left:400px;top:150px;">Links zu anderen Bands</div>

<div valign="top" style="position:absolute;top:50px;left:100px;">
          <form name="form1">
    <select name="Bands" onChange="MM_jumpMenu('parent',this,0)" size="1">
      <option>Bands</option>
      <option onmouseover="show('0')" value="http://www.ageofdistrust.de">age of distrust</option>
      <option onmouseover="show('1')" value="http://www.doomstone.de">Doomstone</option>
      <option onmouseover="show('2')" value="http://www.hellmasters.de">Hellmasters</option>
      <option onmouseover="show('3')" value="http://www.infinight.de">Infinight</option>
      <option onmouseover="show('4')" value="http://www.lcn-hardcore.de/">LCN</option>
      <option onmouseover="show('5')" value="http://www.ras-dawn.de">Ra's dawn</option>
      <option onmouseover="show('6')" value="http://somewhere-in-nowhere.de/">somewhere in nowhere</option>
    </select>
  </form>
  <br>
            <a href="#" onmouseover="show('1')">Bild 2</a><br />
            <a href="#" onmouseover="show('2')">Bild 3</a><br />
            <a href="#" onmouseover="show('3')">Bild 4</a><br />
            <a href="#" onmouseover="show('4')">Bild 5</a><br />
            <a href="#" onmouseover="show('5')">Bild 6</a><br />
            <a href="#" onmouseover="show('6')">Bild 7</a><br />
        </div>
   </body>
 </html>

  1. Hallo Nico,

    Du verlangst ziemlich viel von dem armen Browser, wenn er bei einem mouseover mal schnell ein Bild von 20kb oder so runterladen und anzeigen soll. Dieses Konzept solltest Du noch mal ueberdenken.
    Aber sagen wir mal, du hast Dir das gut ueberlegt, hast einen Vorlader etc. Dann koenntest du doch einfach die Eigenschaft src des Bildes aendern anstatt innerHTML vom div. Zudem kannst Du im Array Pictures auf border verzichten, dafuer gibt es CSS. Du waerst also hier:
     pictures = new Array();
         pictures[0] = "aod_banner.jpg";
         pictures[1] = "doomstone.jpg";
       ....

    function show(id){
    // hier haengst Du die URL mit rein
    // ausserdem beziehst du dich auf src des Bildes
         document.getElementById("meinbild").src = 'bilder/link_bilder/' + pictures[id];
    }
    <div id="bilder"><img src="" id="meinbild" /></div>
    Vielleicht solltest Du der Einfachheit halber aus "Links zu anderen Bands" eine Grafik machen.
    Ich hab das jetzt nicht weiter ausprobiert, aber die Chancen, dass Du so weiterkommst, sind gut.

    Gruß,

    Dieter

    1. Aber sagen wir mal, du hast Dir das gut ueberlegt, hast einen Vorlader etc.

      naja, hab überlegt das es sicher ein platzsparender netter Effekt wäre.
      aber das mit dem preloader bekomm ich vielleicht auch noch hin.

      hab das so umgebaut wie Du beschrieben hast, aber es geht immer noch nur im Firefox.
      der Fehler liegt irgendwo anders!

      <div id="bilder"><img src="" id="meinbild" /></div>
      Vielleicht solltest Du der Einfachheit halber aus "Links zu anderen Bands" eine Grafik machen.

      wieso sollte da ein Bild sein? da muss sowieso nicht unbedingt etwas stehen. ist ja mehr für schön, aber es sollte erstmal funktionieren

      cu,

      Nico

      1. Hallo Nico,

        <div id="bilder"><img src="" id="meinbild" /></div>

        Da muss deshalb ein Bild stehen, damit du dessen Eigenschaft src wechseln kannst. ImPrinzip reicht auch transparentes 1px-gif. Ansonsten muesstet Du mit createElement erstmal fuer ein Bild sorgen, das halte ich hier aber fuer Overkill.

        Gruß,

        Dieter

        1. Hallo Dieter,

          OK, hab ich gemacht, aber es wird immernoch nur im Firefox angezeigt.
          ausser die Links unten, die klappen weiterhin in allen Browsern.

          gruss,

          Nico

          1. Hallo Nico,

            Kannst Du dsen fertigen Code in der neuen Variante mal posten, ich mag das nicht tippen muessen.

            Gruß,

            Dieter

            1. Kannst Du dsen fertigen Code in der neuen Variante mal posten, ich mag das nicht tippen muessen.

              Klar, hier.

              <html>
                  <head>

              <script>
              <!--
              pictures = new Array();
                  pictures[0] = "aod_banner.jpg";
                  pictures[1] = "doomstone.jpg";
                pictures[2] = "dream_galarie.jpg";
                  pictures[3] = "hellmasters.jpg";
                  pictures[4] = "infinight.gif";
                  pictures[5] = "lcn.jpg";
                  pictures[6] = "Ra_s_Dawn.jpg";
                  pictures[7] = "somewhere_in_nowhere.gif";
                  pictures[8] = "Dunkler_Poet.jpg";
                  pictures[9] = "reptured_silence.gif";
                  pictures[10] = "WORLDSENDstudio_neu.gif";

              function show(id){
                   document.getElementById("meinbild").src = 'bilder/link_bilder/' + pictures[id];
              }

              function MM_jumpMenu(targ,selObj,restore){ //v3.0
                eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
                if (restore) selObj.selectedIndex=0;
              }
              //-->
              </script>
                  </head>
                  <body>
                <div id="bilder" valign="top" align="left" style="position:absolute;left:400px;top:150px;"><img src="/bilder/transparent.jpg" id="meinbild" /></div>

              <div valign="top" style="position:absolute;top:50px;left:100px;">
                  <form name="form1">
                    <select name="Bands" onChange="MM_jumpMenu('parent',this,0)" size="1">
                      <option>Bands</option>
                      <option onmouseover="show('0')" value="http://www.ageofdistrust.de">age of distrust</option>
                      <option onmouseover="show('1')" value="http://www.doomstone.de">Doomstone</option>
                <option onmouseover="show('2')" value="http://www.dream-gallery.com">Dream Gallery</option>
                      <option onmouseover="show('3')" value="http://www.hellmasters.de">Hellmasters</option>
                      <option onmouseover="show('4')" value="http://www.infinight.de">Infinight</option>
                      <option onmouseover="show('5')" value="http://www.lcn-hardcore.de/">LCN</option>
                      <option onmouseover="show('6')" value="http://www.ras-dawn.de">Ra's dawn</option>
                      <option onmouseover="show('7')" value="http://somewhere-in-nowhere.de/">somewhere in nowhere</option>
                    </select>
                  </form>
                  <br>
                  <a href="#" onmouseover="show('1')">Bild 2</a><br />
                  <a href="#" onmouseover="show('2')">Bild 3</a><br />
                  <a href="#" onmouseover="show('3')">Bild 4</a><br />
                  <a href="#" onmouseover="show('4')">Bild 5</a><br />
                  <a href="#" onmouseover="show('5')">Bild 6</a><br />
                  <a href="#" onmouseover="show('6')">Bild 7</a><br />
                </div>
               </body>
              </html>

              1. Hallo Nico,

                Tut mir leid, ich muss hier erst mal passen. Ich habe aber den Betreff mal so geaendert, dass sich vielleicht noch jemand anders erbarmt..

                Gruß,

                Dieter

                1. Hallo Dieter,

                  Danke trotzdem für Deine Zeit und Mühe.

                  Gruss,

                  Nico

                  1. Hallo Nico,

                    Danke trotzdem für Deine Zeit und Mühe.

                    Gerne

                    Gruß,

                    Dieter

              2. Hi,

                fällt Dir hier nicht ein kleiner aber wichtiger Unterschied auf?

                document.getElementById("meinbild").src = 'bilder/link_bilder/' + pictures[id];
                <img src="/bilder/transparent.jpg" id="meinbild" /></div>

                und warum übergibst Du hier

                <a href="#" onmouseover="show('1')">Bild 2</a>

                einen Text? Und warum überhaupt ein A, wenn gar kein Link vorhanden ist? onmouseover funktioniert auch bei anderen Elementen, die hier sicher sinnvoller wären.

                freundliche Grüße
                Ingo