mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 31.10.2014 14:28 Benutzername: Passwort: Auto-Login

Thema: [javascript] bild nachladen ohne seite neu zu laden vom 08.05.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> [javascript] bild nachladen ohne seite neu zu laden
Autor Nachricht
mahzell
Threadersteller

Dabei seit: 16.06.2003
Ort: bochum
Alter: 34
Geschlecht: Weiblich
Verfasst Mo 08.05.2006 16:45
Titel

[javascript] bild nachladen ohne seite neu zu laden

Antworten mit Zitat Zum Seitenanfang

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.

* Ööhm... ja? *


Zuletzt bearbeitet von mahzell am Mo 08.05.2006 17:13, insgesamt 3-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
chrikle

Dabei seit: 02.05.2002
Ort: NRW
Alter: 38
Geschlecht: Männlich
Verfasst Mo 08.05.2006 16:52
Titel

Antworten mit Zitat Zum Seitenanfang

Hallo!

Vielleicht sowas: Bilder-Galerie


Gruß
Chris


Zuletzt bearbeitet von chrikle am Mo 08.05.2006 16:53, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 33
Geschlecht: Männlich
Verfasst Mo 08.05.2006 17:29
Titel

Antworten mit Zitat Zum Seitenanfang

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 *Schnief*


Zuletzt bearbeitet von sahnemuh am Mo 08.05.2006 17:42, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden
mikesch

Dabei seit: 15.04.2002
Ort: Leverkusen
Alter: 38
Geschlecht: Männlich
Verfasst Mo 08.05.2006 22:23
Titel

:-)

Antworten mit Zitat Zum Seitenanfang

google mal nach "ajax". wäre genau das richtige für dich. allerdings ist es nicht so ganz easy.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
mahzell
Threadersteller

Dabei seit: 16.06.2003
Ort: bochum
Alter: 34
Geschlecht: Weiblich
Verfasst Mi 10.05.2006 12:32
Titel

Antworten mit Zitat Zum Seitenanfang

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?

Menno!


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.

* Keine Ahnung... *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 33
Geschlecht: Männlich
Verfasst Mi 10.05.2006 13:07
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
mahzell
Threadersteller

Dabei seit: 16.06.2003
Ort: bochum
Alter: 34
Geschlecht: Weiblich
Verfasst Mi 10.05.2006 23:56
Titel

Antworten mit Zitat Zum Seitenanfang

ich danke dir vielmals Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Atahualpa

Dabei seit: 08.03.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 11.03.2008 14:54
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
 
Ä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]
Neues Thema eröffnen   Neue Antwort erstellen
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.