Bildinformationen bei click an anderes Div übermitteln

D

Dustin84

Erfahrenes Mitglied
Hallo,

ich habe hier was gebastelt: http://cpalace.de/testdiv.php
Das wird eine Bildergalerie. Beim klicken auf das Thumb, wird eine größere Version geladen.

Das ganze muss später dynamischer laufen. Ich muss die Inhalt vom angeklickten Bild im 1 Div speichern und dann im 2 Div für die Großansicht einfügen.
Daher muss ich class="bild_1" und den Bilderpfad src="/wallpaper4.jpg" übergeben.

Ich hoffe, ihr versteht mein Problem.

Gruß
Jan



PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

</head>

<body>
<button>Toggle</button>

<?

?>

<div class="inhalt" style="float:right;">
	<img class="bild_1" src="/Manu_Bilder_021.jpg" width="20%" height="20%" border="0" />
  <img src="/suedafrik1g.jpg" width="20%" height="20%" border="0" />
  <img src="/wallpaper4.jpg" width="20%" height="20%" border="0" />
</div>


<div class="inhalt" style="display: none">
	<img class="bild_1" src="/wallpaper4.jpg" width="70%" height="70%" border="0" />
</div>


<script>
	$(".bild_1").click(function () {
		$(".inhalt").toggle();
	});
</script>


</body>
</html>
 
Beim klicken die Infos wie src, class, name etc. in eine Variable speichern?

Hallo,

ist es möglich, dass ich beim klicken auf ein Bild die Infos wie src, class, name oder id in eine Variable speicher?

Irgendwie sowas wie getElementbyName("self") oder sowas ?!

Gruß
D.
 
Klar geht das.

HTML: 
<img src="test.jpg"  class="bildklasse" name="testbild" id="bildid" onclick="getAttributes(this);">

Javascript: 
function getAttributes(target){
var bildSrc = target.src;
var bildClass = target.className;
var bildId = target.id;
}
 
Zuletzt bearbeitet von einem Moderator:
Hallo,

da JavaScript beim Benutzer im Browser ausgeführt wird, und PHP auf dem Server läuft gibt es keine "einfache" Möglichkeit die Daten hin und her zubewegen.
Die einfachste Möglichkeit ist, dass du per JavaScript eine andere Seite aufrufst (location.href mal nachschlagen), und die Daten als Parameter übergibst. Der Nachteil ist halt, dass der Browser die Seite neu lädt. Eine etwas komplere Möglichkeit zum Datenaustausch stellt AJAX dar, mit dem kannst du in beide Richtungen Daten austauschen ohne dass die Seite neu geladen wird.

Gruß
BK
 
so langsam wird es :-)

Neue Frage:

Ich habe mein Thumb:
PHP: 
<img class="bild_1" onclick="getAttributes(this);" src="/Manu_Bilder_021.jpg" width="15%" height="15%" border="0" />

Beim klicken wird folgendes ausgeführt:
PHP: 
<script>
  // Hole die Bildinfos zum geklickten Bild ein
  function getAttributes(target){
    var bildSrc = target.src;
    var bildClass = target.className;
    var bildId = target.id;
    var bildName = target.name;
    
    document.getElementsById('FotoBig').setAttribute('src', '/suedafrik1g.jpg');
  }
  </script>

Hier soll das Bild aus dem Script ( /suedafrik1g.jpg ) eingefügt werden. Leider passiert da nichts.
PHP: 
<img class="bild_1" id="FotoBig" src="" width="70%" height="70%" border="0" />

Hier nochmal ein Link zur Seite: http://cpalace.de/testdiv2.php

Freue mich wie immer über Hilfe.

Gruß
D.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück