| Autor |
Nachricht |
mahzell
Threadersteller
Dabei seit: 16.06.2003
Ort: bochum
Alter: 40
Geschlecht: 
|
Verfasst Mo 08.05.2006 16: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 17:13, insgesamt 3-mal bearbeitet
|
|
| |
   |
 |
chrikle
Dabei seit: 02.05.2002
Ort: NRW
Alter: 44
Geschlecht: 
|
Verfasst Mo 08.05.2006 16:52
Titel
|
|
|
Hallo!
Vielleicht sowas: Bilder-Galerie
Gruß
Chris
Zuletzt bearbeitet von chrikle am Mo 08.05.2006 16:53, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 39
Geschlecht:
|
Verfasst Mo 08.05.2006 17: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 17:42, insgesamt 4-mal bearbeitet
|
|
| |
|
|
mikesch
Dabei seit: 15.04.2002
Ort: Leverkusen
Alter: 44
Geschlecht:
|
Verfasst Mo 08.05.2006 22: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: 40
Geschlecht:
|
Verfasst Mi 10.05.2006 12: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: 39
Geschlecht:
|
Verfasst Mi 10.05.2006 13: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 13:07, insgesamt 1-mal bearbeitet
|
|
| |
|
|
mahzell
Threadersteller
Dabei seit: 16.06.2003
Ort: bochum
Alter: 40
Geschlecht:
|
Verfasst Mi 10.05.2006 23:56
Titel
|
|
|
ich danke dir vielmals 
|
|
| |
|
|
Atahualpa
Dabei seit: 08.03.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 11.03.2008 14: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 |
JS: Bild austauschen, Seite neu laden, Variable behalten...
Bild nachladen ohne Seite zu verändern 2
seite neu laden
Seite einmal neu laden
Seite neu laden, iFrame aber nicht?
javascript neu laden > bei browsergröße ändern [solved]
|
|
Willkommen auf dem Portal für Mediengestalter
