Javascript

[rofie]

Hallo!
Ich benötige dringend Hilfe und zwar benötige ich ein Script, welches die goßen Fotos durch anklicken der Vorschaufotos im selben Fenster öffnet.
Schaut euch das einmal an unter http://www.fiege-fotodesign.de In der galerie das erste foto v. l. anklicken und ihr gelangt zu meinem Problem.

Gruß Rolf

[walter]

Hallo ich weiß nicht ob ich dich richtig verstanden habe. Du möchtest praktisch auf das kleine Photo klicken und dann erscheint das große oben. Die kleinen bleiben wo sie sind. Wenn du nun auf eine anderes kleines Photo klickst erscheint das oben. Richtig?

Möchtest du nun ein komplett fertiges Script oder ein paar Denkanstösse für dein Problem. Bist du mit JavaScript etwas vertraut?

Grundlegend denke ich kann man das lösen indem man das große Bild über den Klick aufs kleine so austauscht:

javascript:

BildGross1 = new Image(); //neues Bildobjekt instanzieren
BildGross1.src = "BildGross1.gif"; //Dem Objekt das erste Bild zuweisen

function Bildwechsel(Bildname,Bildobjekt)
{
window.document.Bildname.src = Bildobjekt.src;
}

Der Bildname ist der name der beim Image-Tag als Name des großen Bildes vergeben wurde. In deinem Fall der Name des großen Bildes. z.B. name="wechselbild"

Aufrufen tust du die Funktion dann im Groben so: Bildwechsel(wechselbild,BildGross1). Du möchtest ja das die Funktion aufgerufen wird wenn man drauf klickt also mit dem Event-Handler onClick.

So wenn du aber gar keine Ahnung von JavaScript hast wirst du jetzt wohl voll auf dem Schlauch stehen.
Schreib nochmal wenn du ein komplettes Script brauchst. Aber ohne Kentnisse in JavaScript wirds auch dann sicher ein wenig schwer denk ich.

Sollte ich einen Fehler gemacht haben korrigiert mich bitte!

Gruss
Walter

[rofie]

Hallo Walter,
nein ich bin nicht mit Javascript vertraut. Genau so wie du Anfangs beschrieben hast soll es gemacht werden.
Wenn ich den Anfang erst einmal habe (für 2 Fotos) dan komme ich auch weiter. Ich hatte schon einmal so eine Seite, aber leider habe ich mir den Script nicht kopiert.

Gruß Rolf

[walter]

Wenn dus nicht sofort brauchst kann ich dir eins schreiben oder danach suchen. Ich werd mal sehen wenn ich mehr Zeit habe.
Wenn du eins hast, bitte hier posten, damit ich weiß das es sich erledigt hat.

Gruß
Walter

[rofie]

Ja mache ich !

[Adromir]

Du machst folgendes:
Dort wo das Bild erscheinen soll, machst du einen Div-Container (frei nach wunsch und positionierung) und definierst ein leeres Hintergrundbild. Der Div-Container braucht eine eindeutige ID, zB. Photo.
Also sowas wie:

<style type="text/css">
#Photo {width: x; height: y; left: 10%; top: 5%; }
</style>




Dann schreibst du in den Head-Bereich folgendes:
<script type="text/javascript">
function changeIMG(div, pic)
{
parent.oben.document.getElementById(div).style.backgroundImage = "url(" + pic + ")";

};
</script>


Und dann fügst du in den Link ein:
onmouseover="javascript:changeIMG('Photo', 'PhotoURL')"

[walter]

Hast zwar schon eine Lösung jetzt, aber hab mir gestern die Arbeit gemacht und das mal ausprobiert. Ich poste meine Lösung mal das ich nicht umsonst gecoded hab.

Also das ist der Quellcode des JavaScripts:

<script language="javascript" type="text/javascript">

oGross1 = new Image();						//neues Image-Objekt erzeugen
oGross1.src = "gross1.jpg";					//Image-Objekt Grafik zuweisen -> hier den Pfad
											//des Bildes eintragen

oGross2 = new Image();						//neues Image-Objekt erzeugen
oGross2.src = "gross2.jpg";					//Image-Objekt Grafik zuweisen -> hier den Pfad
											//des Bildes eintragen

oGross3 = new Image();						//neues Image-Objekt erzeugen
oGross3.src = "gross3.jpg";					//Image-Objekt Grafik zuweisen -> hier den Pfad
											//des Bildes eintragen

//Funktion bildwechsel zum Tauschen der Bilder -> Es werden 2 Parameter übergeben: 
//->tauschplatz ist der eindeutige Name des Bildes das ständig ausgetauscht werden soll,
//der Name wird im Image-Tag mit id="eindeutigerBildname" festgelegt
//->bildobjekt ist das Bildobjekt das zum Tausch verwendet werden soll, also eines der oben
//erzeugten Bildobjekte z.B. oGross2 

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

</script> 

Und das der Quellcode der HTML-Datei:

<body>

<!-- Haupttabelle -->
<table width="700" border="0">
  		
  <tr>
  	<!-- Tabellenzelle mit grossem Bild -> unter id wird der eindeutige Name des Bildes eingetragen -->
    <td><img id="grossesBild" src="gross1.jpg"></td>
  </tr>
  
  <tr>
    <td>
	
	<!-- Tabelle mit kleinen Bildern (Thumbnails) -->
	<!-- im Eventhandler onClick wird die Funktion bildwechsel aufgerufen, die Parameter sind -->
	<!-- entsprechend einzutragen: 1. Parameter der eindeitige Name; -->
	<!-- 2. Parameter das jeweilige Bildobjekt -->
	<table border="0">
	  <tr>
		<td width="150"><a href="#" onClick="bildwechsel('grossesBild',oGross1)"><img src="klein1.jpg" border="0"></a></td>
		<td width="150"><a href="#" onClick="bildwechsel('grossesBild',oGross2)"><img src="klein2.jpg" border="0"></a></td>
		<td width="150"><a href="#" onClick="bildwechsel('grossesBild',oGross3)"><img src="klein3.jpg" border="0"></a></td>
	  </tr>
	</table>

	</td>
  </tr>

</table>
</body>

Ich hab das ganze mal in eine Tabelle gepackt, ist aber natürlich mit Div-Containern so wie es Adromir gepostet hat auch möglich und sogar noch ein wenig besser.

Ich hab das jetzt so verstanden das du auf das Bild klicken möchtest zum Wechseln. Adromir hat es anscheinend so verstanden das du mit der Mouse drüber fahren möchtest zum Wechseln. Kannst es ja jetzt machen wie du möchtest.

Gruss
Walter

[Adromir]

Sorry, bei mir ist noch ein Fehler drin:
Anstatt
parent.oben.document.getElementById(div).style.bac kgroundImage = "url(" + pic + ")";

muss es nur:
document.getElementById(div).style.bac kgroundImage = "url(" + pic + ")";

Die obrige Version war nämlich Frameübergreifend..