Startseite Forum
Willkommen, Gast
Benutzername: Passwort: Angemeldet bleiben:
Passwort vergessen? Benutzername vergessen?
Javascript Forum
Javascript
Hilfe bei fremden Javascripts

Problem mit "onklick" in Slideshow
(1 Leser) (1) Gast
Bitte beachten, dass es hier nur um Javascripts geht, die sich nicht in unserem Archiv befinden.
Auf Thema antworten
Neues Thema
  • Seite:
  • 1

THEMA: Problem mit "onklick" in Slideshow

Problem mit "onklick" in Slideshow 1 Jahr, 6 Monate her #9196

  • tuningflex
  • OFFLINE
  • Fresh Boarder
  • Beiträge: 11
  • Karma: 0
Hi,


also ich habe mir eine kleine Slideshow in meine Website eingebaut.
Um genau zu sein diese hier:

Ich nutze diese Slideshow

Die Vorschaubilder habe ich teils schon durch meine eigenen ersetzt und das Teil läuft!

Was habe ich jetzt damit vor!?

Nun ich möchte, dass bei einem Klick auf eines der Vorschaubilder in der Slideshow das jeweilige Bild in einem separaten DIV Tag geladen wird.
Also bei "onklick" auf eines der Bilder öffnet sich dann das "gleiche" Bild natürlich in viel viel höherer Auflösung in einem DIV Tag, den ich via CSS an einer beliebigen Stelle positionieren kann.

Leider gelingt mir das nach vielen Versuchen einfach nicht und ich habe auch noch nicht so viel Ahnung von JS. Aber man lernt hier im Forum schnell dazu


Hier mal mein Codeauszug:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<link href="index.php-Dateien/template_css.css" rel="stylesheet" type="text/css">
</head>


<script type="text/javascript">

window.addEvent("domready", function() {
    //new Accordion($$(".accordion_toggler"), $$(".accordion_content"));

    dp.SyntaxHighlighter.HighlightAll("usage");

    new iCarousel("example_3_content", {
        idPrevious: "example_3_previous",
        idNext: "example_3_next",
        idToggle: "undefined",
        item: {
            klass: "example_3_item",
            size: 86
        },
        animation: {
            duration: 250,
            amount: 4
        }
    });
});
    
        </script>
    <link href="example3.asp-Dateien/this_002.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body>
<div id="container_bd">
            
            
  
  
  <dl id="accordionExample" class="accordion">
     
    <dd class="accordion_content">
      <br />
        
      <div id="example_3">
        <ul id="example_3_content">
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/1.jpg" alt="flower 1" width="64" height="64" /></a></li>

          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/2.jpg" alt="flower 2" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/3.jpg" alt="flower 3" width="64" height="64" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/4.jpg" alt="flower 4" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/5.jpg" alt="flower 5" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/6.jpg" alt="flower 6" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/7.jpg" alt="flower 7" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/8.jpg" alt="flower 8" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/9.jpg" alt="flower 9" /></a></li>
          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/A.jpg" alt="flower A" /></a></li>

    

          <li class="example_3_item"><a href="#"><img src="example3.asp-Dateien/K.jpg" alt="flower K" /></a></li>
          </ul>
        <div id="example_3_frame">
          <img src="example3.asp-Dateien/ex3_previous.png" alt="move previous" width="20" height="86" id="example_3_previous" />
          <img src="example3.asp-Dateien/ex3_next.png" alt="move next" width="20" height="86" id="example_3_next" />
          </div>
        </div>
      <br />
    </dd>

     
  </dl>
  </form>
            
            
  </div>
      <div id="container_ft">
                
          <ul>
              <li></li>
              <li></li>
          </ul>
      </div>

<div class="containerimage"></div>

</body></html>


Jetzt habe ich z.B. diesen DIV-Tag angelegt:

"<div class="containerimage"></div>"

Ich möchte, dass das Bild hier drin geladen wird, sobald man auf das passende Vorschaubild in der Slideshow klickt!


Ich hoffe das ist nicht allzu schwer, vielen Dank!
Antwort Zitieren

Aw: Problem mit "onklick" in Slideshow 1 Jahr, 6 Monate her #9202

  • Super_Mario
  • OFFLINE
  • Platinum Boarder
  • Beiträge: 623
  • Karma: 35
Hallo,

das lässt sich mit einem onclick-Attribut machen, das du in die Bilder (img-Tags) in der Slideshow einbaust. Beim Anklicken des Bildes in der Slideshow wird dann das vergrößerte Bild in das div eingesetzt

So lässt es sich machen:
onclick="document.getElementById('mein_div').innerHTML = '<img border=0 src=http://www.adresse-deiner-webseite.de/Bild_gross.jpg>'"

Das div braucht dafür eine id, über die es angesprochen werden kann. In diesem Beispiel ist sie mein_div. Mit der Funktion getElementById() bezieht sich das Javascript dann auf das div und setzt anschließend mit der Javascript-Eigenschaft innerHTML einen HTML-Inhalt ein.

Dieser ist hier grün markiert und in unserem Fall ein img-Tag mit der Bildadresse des jeweils vergrößerten Bildes. Natürlich kannst du den Inhalt auch umändern (zusätzliche Attribute, ein paar Tags dazugeben, etc.). Was du nur nicht verwenden darfst, sind die " Anführungszeichen. Wenn du die einbaust, hält der Browser das sonst für das Ende des onclick-Attributes und der Code ist unbrauchbar. Die ' Apostrophe können schon verwendet werden, allerdings nur mit einem \ Backslash davor.



Ich hoffe, ich konnte dir hellfen
liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!
Letzte Änderung: 1 Jahr, 6 Monate her von Super_Mario.
Antwort Zitieren

Aw: Problem mit "onklick" in Slideshow 1 Jahr, 6 Monate her #9223

  • tuningflex
  • OFFLINE
  • Fresh Boarder
  • Beiträge: 11
  • Karma: 0
Hey SuperMario,

vielen Dank für deine Hilfe. Das läuft, echt Spitze.
Habe leider ein wenig gebraucht.

Tolles Forum
Antwort Zitieren

Aw: Problem mit "onklick" in Slideshow 1 Jahr, 6 Monate her #9228

  • Super_Mario
  • OFFLINE
  • Platinum Boarder
  • Beiträge: 623
  • Karma: 35
Gerne
liebe Grüße
Super Mario

Meine Webseite ist Mario & Luigis wunderbare Welt. Dort gibt es auch eine große Auswahl an kostenlosen und werbefreien Javascripts. Meine Javascripts laufen in vielen, bzw. allen Browsern und sind W3C valide!
Antwort Zitieren
Auf Thema antworten
Neues Thema
  • Seite:
  • 1
Javascript Forum
Javascript
Hilfe bei fremden Javascripts
Powered by Kunena
Ladezeit der Seite: 0.33 Sekunden

Login

Aktuell im Forum

mehr