Andy123: Bildwechsel + Usemap

Hallo,

ich habe einen wie hier http://de.selfhtml.org/javascript/beispiele/buttons.htm ähnlich beschriebenen Bildwechsel gemacht:

<html>
<head>
<title>Wechselndes Bild</title>
<script type="text/javascript">
Normal1 = new Image();
Normal1.src = "images/notebook_closed.jpg";
Highlight1 = new Image();
Highlight1.src = "images/notebook_open.jpg";

function Bildwechsel (Bildnr, Bildobjekt) {
  window.document.images[Bildnr].src = Bildobjekt.src;
}
</script>
</head>
<body>
<img src="images/notebook_closed" usemap="#notebook">
<a href=javascript:Bildwechsel(0, Highlight1)>open</a>
<a href=javascript:Bildwechsel(0, Normal1)>close</a>
</body>
</html>

Wenn ich auf open klicke soll das Bild vom geöffneten Notebook erscheinen,
wenn ich auf close klicke das Bild vom geschlossenen Notebook.

Das Problem:
Die Imagemap soll nur für "images/notebook_open.jpg" gelten und nicht für
"images/notebook_open.jpg" und für "images/notebook_closed.jpg".

Is das mit JavaScript zu lösen? Wenn ja, wie?

Vielen Dank,
Andy

  1. Hallo Andy,

    Die Imagemap soll nur für "images/notebook_open.jpg" gelten und nicht für
    "images/notebook_open.jpg"

    Ja nee is klar ;-)

    Du hast ein offenes und ein geschlossenes Notebook. Wenn das offene Notebook angezeigt wird soll dafür ne imagemap funktionieren, right?

    Nimm zwei div, eines mit dem offenem und eines mit dem geschlossenem Notebook. OnClick machst du mal den einen und mal den anderen div sichtbar. Damit ist auch die Imagemap nur für den sichtbaren Teil erreichbar.

    Viele Grüße

    Stephan

    1. Okay,

      thx, das hört sich auf jeden Fall mal gut an :)
      Nur wie mach ich ein div sichtbar/unsichtbar?

      Gruß,
      Andy

      1. Hi,

        Nur wie mach ich ein div sichtbar/unsichtbar?

        Indem du die Style-Eigenschaft visibility auf visible/hidden setzt.

        mfG,
        steckl

        1. Hi,

          thx :)
          und das jetzt in Verbindung mit OnClick?

          <div id="1"><img src="images/notebook_open" /></div>
          <div id="2"><img src="images/notebook_closed" /></div>

          <a OnClick="Mach das einmal das div1 sichtbar und das div2 unsichtbar>open</a>
          <a OnClick="Mach das einmal das div2 sichtbar und das div1 unsichtbar>close</a>

          ??

          Gruß,
          Andy

      2. Per CSS kannst Du die Sichtbarkeit eines div einstellen.

        <div id="notebook_closed" style="visibility:visible">
        <div id="notebook_open" style="visibility:hidden">

        <input type="button" value="Öffnen" onClick="getElementById('notebook_closed').style.visibility='hidden';getElementById('notebook_open').style.visibility='visible'">

        Hoffe sind jetzt keine Schreibfehler drinne...aber Prinzip sollte ersichtlich sein?!

        Gruß
        Stephan

        Okay,

        thx, das hört sich auf jeden Fall mal gut an :)
        Nur wie mach ich ein div sichtbar/unsichtbar?

        Gruß,
        Andy

        1. <div id="notebook_closed" style="visibility:visible">
          <div id="notebook_open" style="visibility:hidden">

          <input type="button" value="Öffnen" onClick="getElementById('notebook_closed').style.visibility='hidden';getElementById('notebook_open').style.visibility='visible'">

          Sehr schön!
          werd ich gleich mal ausprobieren.

        2. Hallo Stephan,

          da bei visibility="hidden" das DIV zwar unsichtbar wird, aber trotzdem Platz beansprucht, würde ich lieber display="none" / "block" verwenden.

          Gruß, Jürgen