| Autor |
Nachricht |
mahzell
Threadersteller
Dabei seit: 16.06.2003
Ort: bochum
Alter: 43
Geschlecht: 
|
Verfasst Mo 08.05.2006 17:45
Titel [javascript] bild nachladen ohne seite neu zu laden |
  |
|
hallo,
ich hab folgende idee, mangels javascript kenntnisse aber keine ahnung wie sich das umsetzen lässt.
folgendes szenario:
ich habe eine seite mit vielen kleinen thumbnails auf der linken seite, und möchte beim klick auf eines dieser thumbnails
dass das größere bild dazu auf der rechten seite angezeigt wird.
um nicht jedes bild in ne neue seite packen zu müssen, möchte ich dass allein dieses größere bild rechts neu geladen wird sobald ich auf ein thumbnail klicke, jedoch ohne dass dafür jedes mal ne neue(identisch aussehende) seite geladen werden muss.
kurz gesagt, es soll nur das bild "nachgeladen" werden ohne eine komplette seite laden zu müssen.
also nicht index.htm, bild1.htm, bild2.htm, bild3.htm sondern bild1.jpg, bild2.jpg bild3.jpg auf index.html laden.
Zuletzt bearbeitet von mahzell am Mo 08.05.2006 18:13, insgesamt 3-mal bearbeitet
|
|
| |
   |
 |
chrikle
Dabei seit: 02.05.2002
Ort: NRW
Alter: 47
Geschlecht: 
|
Verfasst Mo 08.05.2006 17:52
Titel
|
|
|
Hallo!
Vielleicht sowas: Bilder-Galerie
Gruß
Chris
Zuletzt bearbeitet von chrikle am Mo 08.05.2006 17:53, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mo 08.05.2006 18:29
Titel
|
|
|
javascript:
| Code: | function ladMirEinBild (bild,id) {
var hutziwutzi = new Image()
hutziwutzi.src = bild;
var neuesbild = document.getElementById(id);
neuesbild.src = hutziwutzi.src;
neuesbild.height = hutziwutzi.height;
neuesbild.width = hutziwutzi.width;
} |
html:
| Code: | <a href="javascript:ladMirEinBild('deingrossesbild.jpg','grossesBild')"><img src="deinthumbnail.jpg" width="x" height="y" /></a>
<img src="xyz.jpg" id="grossesBild" width="1000" height="1000" /> |
an die javascript funktion übergibst du als erstes die src deines neuen bildes und danach die id des bildes, in welches die große version neu geladen werden soll.
... ungetestet, sollte aber gehen.
edit: Id.. nicht ID.. jedesmal mach ich das falsch 
Zuletzt bearbeitet von sahnemuh am Mo 08.05.2006 18:42, insgesamt 4-mal bearbeitet
|
|
| |
|
|
mikesch
Dabei seit: 15.04.2002
Ort: Leverkusen
Alter: 47
Geschlecht:
|
Verfasst Mo 08.05.2006 23:23
Titel :-) |
|
|
|
google mal nach "ajax". wäre genau das richtige für dich. allerdings ist es nicht so ganz easy.
|
|
| |
|
|
mahzell
Threadersteller
Dabei seit: 16.06.2003
Ort: bochum
Alter: 43
Geschlecht:
|
Verfasst Mi 10.05.2006 13:32
Titel
|
|
|
| sahnemuh hat geschrieben: | |
ich danke dir, das klappt prima.
eine frage noch, ich würde das ausgegebene bild gerne nochmals verlinken.
ist es möglich den href-tag noch zusätzlich zum scr-tag in die funktion zu integrieren?
ich bräuchte also die ausgabe auf das scr-tag und das href-tag?
| Code: | function ladMirEinBild (bild,id,id2) {
var hutziwutzi = new Image()
hutziwutzi.src = bild;
hutziwutzi.href = bild;
var neuesbild = document.getElementById(id);
neuesbild.src = hutziwutzi.src;
neuesbild.height = hutziwutzi.height;
neuesbild.width = hutziwutzi.width;
var neuesbild2 = document.getElementById(id2);
neuesbild2.href = hutziwutzi.href;
neuesbild2.height = hutziwutzi.height;
neuesbild2.width = hutziwutzi.width;
} |
| Code: | <a href="javascript:ladMirEinBild('xyz.jpg','grossesBild',grossesBild2)"><img src="xyz_thumb.jpg" width="x" height="y" /></a>
<a href="xyz.jpg" id="grossesBild2"><img src="xyz.jpg" id="grossesBild" width="500" height="350" /> |
ich hab mal folgendes oben zusammengebastelt, allerdings aus meinem reinen "logischen verständnis" heraus, ohne auch nur ahnung von javascript zu haben, natürlich funktioniert das so nicht. ich hab auch keine ahnung ob ich unbedingt 2ids verteilen muss. so wie es aussieht hängt das ganze noch an der übergabe von bild zu hutziwutzi.src bzw. hutziwutzi.href.
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Mi 10.05.2006 14:07
Titel
|
|
|
| mikesch hat geschrieben: | | [...]buzzword bingo[...] |
das ist totaler blödsinn und völliger overkill für sein vorhaben. warum sollte man für einen einfachen bildwechsel irgendwelche serververbindungen aufbauen und xml daten laden? so dynamisch scheint mir die seite dann doch nicht.
nur weils grade "hip" ist muss man nicht für jeden schmonz in die "web 2.0" kiste greifen.
zum thema:
ja natürlich.
javascript:
| Code: |
function ladMirEinBild (bild,id,id2,bild2) {
var hutziwutzi = new Image()
hutziwutzi.src = bild;
var neuesbild = document.getElementById(id);
neuesbild.src = hutziwutzi.src;
neuesbild.height = hutziwutzi.height;
neuesbild.width = hutziwutzi.width;
var neuerlink = document.getElementById(id2);
neuerlink.href = bild2;
}
|
html
| Code: |
<a href="javascript:ladMirEinBild('xyz.jpg','grossesBild','grossesBild2','grossesBild2.jpg')"><img src="xyz_thumb.jpg" width="x" height="y" id="grossesBild" /></a>
<a href="xyz.jpg" id="grossesBild2"><img src="xyz.jpg" id="grossesBild" width="500" height="350" />
|
Zuletzt bearbeitet von sahnemuh am Mi 10.05.2006 14:07, insgesamt 1-mal bearbeitet
|
|
| |
|
|
mahzell
Threadersteller
Dabei seit: 16.06.2003
Ort: bochum
Alter: 43
Geschlecht:
|
Verfasst Do 11.05.2006 00:56
Titel
|
|
|
ich danke dir vielmals 
|
|
| |
|
|
Atahualpa
Dabei seit: 08.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 11.03.2008 15:54
Titel
|
|
|
| sahnemuh hat geschrieben: | javascript:
| Code: | function ladMirEinBild (bild,id) {
var hutziwutzi = new Image()
hutziwutzi.src = bild;
var neuesbild = document.getElementById(id);
neuesbild.src = hutziwutzi.src;
neuesbild.height = hutziwutzi.height;
neuesbild.width = hutziwutzi.width;
} |
html:
| Code: | <a href="javascript:ladMirEinBild('deingrossesbild.jpg','grossesBild')"><img src="deinthumbnail.jpg" width="x" height="y" /></a>
<img src="xyz.jpg" id="grossesBild" width="1000" height="1000" /> |
|
also ich habe das genauso gemacht wie von sahnemuh hier angegeben. allerdings habe ich folgendes komisches problem. beim klick auf ein thumbnail lädt er das bild ohne es anzuzeigen. erst bei einem weiterne klick auf das thumbnail wird das bild tatsächlich angezeigt. ist sowohl bei ie, ff, und opera so. hat jemand einen tipp, woran das liegen könnte?
vielen dank
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Bild nachladen ohne Seite zu verändern 2
Javascript wird vor dem laden der Seite ausgeführt
JS: Bild austauschen, Seite neu laden, Variable behalten...
[Javascript] - Dynamisch Nachladen von Objekten
Verlinkung Thumbnail / gr. Bild auf gl. Seite mit Javascript
javascript : parent.location nachladen.. funzt net
|
|
Willkommen auf dem Portal für Mediengestalter
