Autor |
Nachricht |
jsliderex
Threadersteller
Dabei seit: 18.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 18.01.2010 21:36
Titel Bildwechsel mit JavaScript |
|
|
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!
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
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 19.01.2010 08:33
Titel
|
|
|
wäre sicher hilfreich, wenn dein js auch irgendwo aufgerufen wird
Code: |
<a href="image1.jpg" onclick="createBigImage(); return false;" ....
|
|
|
|
|
|
Anzeige
|
|
|
jsliderex
Threadersteller
Dabei seit: 18.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 19.01.2010 11:32
Titel
|
|
|
Naja, also das Platzhalterbild funktioniert schon. Wird problemlos angezeigt.
Was mich jetzt interessiert ist wie ich den Bilderwechsel vollziehen kann!
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Di 19.01.2010 12:18
Titel
|
|
|
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);
...
}
|
|
|
|
|
|
jsliderex
Threadersteller
Dabei seit: 18.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 19.01.2010 17:11
Titel
|
|
|
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
}
|
|
|
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Mi 20.01.2010 06:51
Titel
|
|
|
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
Code: |
function prepareLinks () {
var thumbs = document.getElementById('thumbs');
var links = thumbs.getElementsByTagName('a');
alert (links[0].href);
}
|
|
|
|
|
|
jsliderex
Threadersteller
Dabei seit: 18.01.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 20.01.2010 17:59
Titel
|
|
|
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ç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
Schönen Abend![/quote]
|
|
|
|
|
choise
Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht:
|
Verfasst Mi 20.01.2010 18:31
Titel
|
|
|
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" />
|
|
|
|
|
|
|
|
|
Ähnliche Themen |
bildwechsel per javascript
Bildwechsel - Javascript
Bildwechsel mit Javascript
[JavaScript] Bildwechsel-Schleife
javascript/ bildwechsel/ funzt nicht!!
javascript-bildwechsel in anderen bereich!
|
|