mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 19.03.2024 08:07 Benutzername: Passwort: Auto-Login

Thema: Bildwechsel mit JavaScript vom 18.01.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bildwechsel mit JavaScript
Seite: 1, 2  Weiter
Autor Nachricht
jsliderex
Threadersteller

Dabei seit: 18.01.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 18.01.2010 21:36
Titel

Bildwechsel mit JavaScript

Antworten mit Zitat Zum Seitenanfang

Hallo Leute!

Habe folgendes Problem:
Ich möchte gerne beim Klick auf ein Thumbnail-Bild die große Version des jeweiligen Bildes in einem im HTML-Code definierten div-Container "image" anzeigen. Also ich hab jetzt schon ein Platzhalterbild eingebunden, dass zu beginn angezeigt werden soll, danach soll es durch das jeweilige Bild das angeklickt wurde ersetzt werden. Ich probier da jetzt schon ewig rum aber es funktioniert einfach nicht. Wär toll wenn sich jemand kurz zeit nehmen würde mir zu helfen! Lächel

Hier mein HTML Code:
Code:
<body>
<div id="container">
   <h1 id="heading">Image Gallery</h1>
   
   <ul id="thumbs">
      <li><a href="image1.jpg" class="permanent"><img src="image1thumb.jpg"></img></a></li>
      <li><a href="image2.jpg" class="permanent"><img src="image2thumb.jpg"></img></a></li>
      <li><a href="image3.jpg" class="permanent"><img src="image3thumb.jpg" ></img></a></li>
    </ul>

    <div id="image">
    </div>
   
    <p id="description">Please click on a thumbnail!</p>
</div>
</body>


...und JavaScript:

Code:
function createBigImage() {
   var img = document.createElement('img');      
   img.src = 'platzhalter.jpg';                     
   img.id   = "platzhalter"
   img.alt   = "Platzhalter"
   document.getElementById('image').appendChild(img);   
   }   


Schönen Abend und Danke im Voraus Lächel
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Di 19.01.2010 08:33
Titel

Antworten mit Zitat Zum Seitenanfang

wäre sicher hilfreich, wenn dein js auch irgendwo aufgerufen wird *zwinker*

Code:

<a href="image1.jpg" onclick="createBigImage(); return false;"   ....
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
jsliderex
Threadersteller

Dabei seit: 18.01.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 19.01.2010 11:32
Titel

Antworten mit Zitat Zum Seitenanfang

Naja, also das Platzhalterbild funktioniert schon. Wird problemlos angezeigt.
Was mich jetzt interessiert ist wie ich den Bilderwechsel vollziehen kann!
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Di 19.01.2010 12:18
Titel

Antworten mit Zitat Zum Seitenanfang

kleiner denkanstoss:

Code:

<li><a href="image1.jpg" onclick="createBigImage(this); return false;" class="permanent"><img src="image1thumb.jpg"></img></a></li>


Code:

function createBigImage(el) {
   alert(el.href);
        ...

}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
jsliderex
Threadersteller

Dabei seit: 18.01.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 19.01.2010 17:11
Titel

Antworten mit Zitat Zum Seitenanfang

naja, ich möchte den bilderwechsel in einer eigenen funktion realisieren:
function createBigImage() {
// TODO: Create a new image element
// TODO: Set its attributes (src, id, etc.)
// TODO: Append it to the image container div
}

function prepareLinks(){
// TODO: Get the thumbs div container
// TODO: Get all a-element with that container
// TODO: Set an anonymous function for the onclick-attribute of every a element

// TODO: This function should do the following things:
// - Set the clicked element the "active" CSS class without removing the "permanent" class.
// - Replace the description in the paragrame with the alt-text of the clicked image
// - Show the corresponding image in the big-Image

}
  View user's profile Private Nachricht senden
pixelpapst303

Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht: Männlich
Verfasst Mi 20.01.2010 06:51
Titel

Antworten mit Zitat Zum Seitenanfang

dann fang doch erstmal mit der prepareLinks funktion an. was hast du da bislang, und wo haperts.

dir das ganze ding runterschreiben bringt (dir zum lernen) nichts so wirklich viel.

deshalb hier ein kleiner anfang, mit dem du weitermachen kannst *zwinker*

Code:

function prepareLinks () {
   var thumbs = document.getElementById('thumbs');
   var links = thumbs.getElementsByTagName('a');
   alert (links[0].href);
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
jsliderex
Threadersteller

Dabei seit: 18.01.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Mi 20.01.2010 17:59
Titel

Antworten mit Zitat Zum Seitenanfang

Also ich Hab nach stundenlangen rumprobieren und googeln folgenden Code zustandegebracht:
HTML:
Code:
<body>
<div id="container">
   <h1 id="heading">The Image Gallery</h1>
   
   <ul id="thumbs">
      <li><a href="#" onClick="bildwechsel('grossesBild',oGross1)" class="permanent"><img src="image1thumb.jpg" alt="The island of Cura&ccedil;ao"></img></a></li>
      <li><a href="#" onClick="bildwechsel('grossesBild',oGross1)" class="permanent"><img src="image2thumb.jpg" alt="Boston harbor"></img></a></li>
      <li><a href="#" onClick="bildwechsel('grossesBild',oGross1)" class="permanent"><img src="image3thumb.jpg" alt="The Algerian desert"></img></a></li>
    </ul>

    <div id="image">
    <img id="grossesBild" src="image1big.jpg">
    </div>
   
    <p id="description">Please click on a thumbnail!</p>
</div>
</body>


und
JavaScript:
Code:

oGross1 = new Image();                  
oGross1.src = "image1big.jpg";               
                                 

oGross2 = new Image();                  
oGross2.src = "image2big.jpg";               
                                 

oGross3 = new Image();                  
oGross3.src = "image3big.jpg";               
                                 



function bildwechsel(tauschplatz, bildobjekt)
{
   document.getElementById(tauschplatz).src = bildobjekt.src;
}


Bekomme aber immer einen Fehler:
Exception: bildwechsel is not defined File: .......gallery.htm .........

Bin leider Gottes noch Blutiger Anfänger in sachen JavaScript, will heißen ich hab noch wenig bis garkeine Erfahrung
Hoff ich nerv hier nicht allzusehr mit meinen "einfachen" Fragen Lächel

Schönen Abend![/quote]
  View user's profile Private Nachricht senden
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst Mi 20.01.2010 18:31
Titel

Antworten mit Zitat Zum Seitenanfang

schau dir das mal an.

Code:

function bildwechsel(obj) {
      document.getElementById("bigimg").src = obj.href;
}


Code:

<a href="bild01.png" onclick="bildwechsel(this);return false;"> Bild 1 </a> <br />
<a href="bild02.png" onclick="bildwechsel(this);return false;"> Bild 2 </a> <br />
<a href="bild03.png" onclick="bildwechsel(this);return false;"> Bild 3 </a> <br />
   
<img id="bigimg" src="bild04.png" />
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen bildwechsel per javascript
Bildwechsel - Javascript
Bildwechsel mit Javascript
[JavaScript] Bildwechsel-Schleife
javascript/ bildwechsel/ funzt nicht!!
javascript-bildwechsel in anderen bereich!
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.