Rutgar: Grafik mit OnClick wechseln bei 1000 Sourcen

Hallo.
Man nehme an, auf einer Seite sind 1000 Links mit kleinen Icons.
Bei Klick (OnClick) auf ein solches Icon erscheint dann ein Banner anstelle des Icons.
Mit Doppelklick (OnDblClick) verschwindet das Banner wieder und das Icon wird wieder angezeigt.
Das Ganze sieht als Code so aus:
<img src="icon.gif" onClick="src='pix/einsvontausend.jpg'" onDblClick="src='icon.gif'">
Ich habe Tage lang überall nach einer Lösung gesucht, wie man mit einem einzelnen Klick anstatt des Doppelklicks das Banner wieder verschwinden lassen kann. Leider ohne Erfolg.

Es ist nun so, daß man bei 1000 Links nicht jedem Bildchen einen einzelnen Namen zuweisen möchte, also kann ich hier mit der üblichen Lösung leider nichts anfangen.

Von der Funktion her bräuchte ich etwas wie
if(src=='icon.gif'){src=icon.gif}

Nur merken die Browser anscheinend nicht, ob das Banner schon aufgerufen wurde oder nicht...

Und jetzt sind die Kenner gefragt :)

Im Voraus schonmal vielen Dank!!!

  1. hi,

    Von der Funktion her bräuchte ich etwas wie
    if(src=='icon.gif'){src=icon.gif}

    Nur merken die Browser anscheinend nicht, ob das Banner schon aufgerufen wurde oder nicht...

    Du möchtest dir den Inhalt des src-Attributes mal zur Kontrolle per alert ausgeben lassen - am besten auch in verschiedenen Browsern.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hi,

    <img src="icon.gif" onClick="src='pix/einsvontausend.jpg'" onDblClick="src='icon.gif'">
    Ich habe Tage lang überall nach einer Lösung gesucht, wie man mit einem einzelnen Klick anstatt des Doppelklicks das Banner wieder verschwinden lassen kann. Leider ohne Erfolg.

    function SwapImage(img)
    {
       if(typeof(img.swap) == "undefined")
       {
          img.swap= true;
          img.origSrc = img.src;
       }
       if(img.swap)
       {
          img.src = "pix/einsvontausend.jpg";
       }
       else
       {
          img.src = img.origSrc;
       }
       img.swap= !img.swap;
    }

    <img src="icon.gif" onclick="SwapImage(this)">

    sollte so gehen...

    Gruß
    Christian

    1. function SwapImage(img)
      {
         if(typeof(img.swap) == "undefined")
         {
            img.swap= true;
            img.origSrc = img.src;
         }
         if(img.swap)
         {
            img.src = "pix/einsvontausend.jpg";
         }
         else
         {
            img.src = img.origSrc;
         }
         img.swap= !img.swap;
      }

      <img src="icon.gif" onclick="SwapImage(this)">

      sollte so gehen...

      Dann müsste ich bei 1000 verschiedenen Bannern, die ich ja auf der Seite habe, diese Funktion auch 1000 mal in den Header schreiben, sehe ich das richtig?

      1. Hello,

        Dann müsste ich bei 1000 verschiedenen Bannern, die ich ja auf der Seite habe, diese Funktion auch 1000 mal in den Header schreiben, sehe ich das richtig?

        Du kannst sie doch mit Parameter aufrufen...

        Harzliche Grüße vom Berg
        http://www.annerschbarrich.de

        Tom

        --
        Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
        Nur selber lernen macht schlau

        1. Du kannst sie doch mit Parameter aufrufen...

          Und wie geht das? Ich möchte es übrigens auch vermeiden, jedem Bild eine eigene ID oder eigene Namen zu geben, falls du das meinst. Ich bin nicht der Hellste was JS angbelangt, also bitte bitte etwas genauer.

          1. hi,

            Du kannst sie doch mit Parameter aufrufen...

            Und wie geht das?

            So, wie Christian es dir schon vorgekaut hat ...

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
    2. function SwapImage(img)
      {
         if(typeof(img.swap) == "undefined")
         {
            img.swap= true;
            img.origSrc = img.src;
         }
         if(img.swap)
         {
            img.src = "pix/einsvontausend.jpg";
         }
         else
         {
            img.src = img.origSrc;
         }
         img.swap= !img.swap;
      }

      <img src="icon.gif" onclick="SwapImage(this)">

      sollte so gehen...

      Gruß
      Christian

      Danke, das funktioniert bei mir. Leider nur mit 1 Bild. Ich habe aber 1000. Ich weiß nun nicht wie ich die jeweilige Bild-URL übergeben kann.
      Vielleicht so irgendwie?
      <img src="icon.gif" onclick="SwapImage(this['pix/einsvontausend.jpg'])">

      1. function SwapImage(img)
        {
           if(typeof(img.swap) == "undefined")
           {
              img.swap= true;
              img.origSrc = img.src;
           }
           if(img.swap)
           {
              img.src = "pix/einsvontausend.jpg";
           }
           else
           {
              img.src = img.origSrc;
           }
           img.swap= !img.swap;
        }

        <img src="icon.gif" onclick="SwapImage(this)">

        sollte so gehen...

        Gruß
        Christian

        Danke, das funktioniert bei mir. Leider nur mit 1 Bild. Ich habe aber 1000. Ich weiß nun nicht wie ich die jeweilige Bild-URL übergeben kann.
        Vielleicht so irgendwie?
        <img src="icon.gif" onclick="SwapImage(this['pix/einsvontausend.jpg'])">

        Jippieh ich habe es doch noch selbst geschafft, das jeweilige Bild als Parameter zu übergeben! Für alle die nach mir kommen und das gleiche Problem haben, hier meine minimal angepasste Version (für sehr sehr viele Bilder) von Christians Script:

        <script type="text/javascript" language="JavaScript">
        function SwapImage(img,banner)
        {
           if(typeof(img.swap) == "undefined")
           {
              img.swap= true;
              img.origSrc = img.src;
           }
           if(img.swap)
           {
              img.src = banner;
           }
           else
           {
              img.src = img.origSrc;
           }
           img.swap= !img.swap;
        }
        </script>

        Und dann im jeweiligen HTML Tag:

        <img src="icon.gif" onClick="SwapImage(this,'pix/einsvontausend.jpg')">

        Danke nochmal und tschüs :D