✔ Swap Image Problem $_POST

M

micronix

Mitglied
Hallo liebe Leute,
ich habe folgendes Problem und zwar findet in diesem Beispiel ein Bildtausch statt
der ganz gut funktioniert dennoch möchte ich mit PHP dass ausgewählte Bild per Post weiterverarbeiten wie mache ich dass
habe schon Input Hidden versucht leider vergebens
Ich hoffe es kann mir jemand weiter helfen

Liebe Grüße
Sascha

Hier der SourceCode

PHP: 
<script>
var image_swap = (document.getElementById) ? true : false;
window.onload = window_load;

function window_load()
   {

   if ( image_swap )
      {

      document.getElementById('icon1').onclick = swapimage;
      document.getElementById('icon2').onclick = swapimage;
      document.getElementById('icon3').onclick = swapimage;
	  document.getElementById('icon4').onclick = swapimage;
	  document.getElementById('icon5').onclick = swapimage;
	  document.getElementById('icon6').onclick = swapimage;
	  document.getElementById('icon7').onclick = swapimage;
	  document.getElementById('icon8').onclick = swapimage;
      
      }
   else
      {

      document.images['icon1'].onclick = swapimage;
      document.images['icon2'].onclick = swapimage;
      document.images['icon3'].onclick = swapimage;
      document.images['icon4'].onclick = swapimage;
      document.images['icon5'].onclick = swapimage;
      document.images['icon6'].onclick = swapimage;
      document.images['icon7'].onclick = swapimage;
      document.images['icon8'].onclick = swapimage;

      }

   }

function swapimage()
   {
   
      var imgMain = document.getElementById('mainimage');
      var divParent;
	  
      // Erstellt ein neues Image Element
      var imgNew = document.createElement('img');
	  
      
      imgNew.src = this.src;
	  imgNew.width = this.width;
	  imgNew.height = this.height;
   
      // Erhält eine ID
      imgNew.id = 'mainimage';

      // Hier findet der Bildtausch Statt
      divParent = imgMain.parentNode;
      divParent.replaceChild(imgNew, imgMain);

   }         

</script>
<div id="main">
<img id="mainimage" src="00000004.jpg" width="214px" height="120px">
</div>
<div style="margin-top: 10px"></div>
<div id="icons">
<img id="icon1" name="thumb1" src="00000001.jpg" width="214px" height="120px">
<img id="icon2" name="thumb2" src="00000002.jpg" width="214px" height="120px"> 
<img id="icon3" name="thumb3" src="00000003.jpg" width="214px" height="120px"> 
<img id="icon4" name="thumb4" src="00000004.jpg" width="214px" height="120px"> 
<img id="icon5" name="thumb5" src="00000005.jpg" width="214px" height="120px"> 
<img id="icon6" name="thumb6" src="00000006.jpg" width="214px" height="120px"> 
<img id="icon7" name="thumb7" src="00000007.jpg" width="214px" height="120px">
<img id="icon8" name="thumb8" src="00000008.jpg" width="214px" height="120px">

</div>
 
Hi,

wenn die Daten mit der Post-Methode übermittelt werden sollen, wirst du auf Ajax zurückgreifen müssen. Dazu solltest du ausreichend Beiträge im Forum finden.

Soll lediglich ein PHP-Script angestossen werden, dass die Daten weiterverarbeitet und diese auch per GET gesendet werden können, gibt es eine einfachere Möglichkeit. Du kannst an entsprechender Stelle in der bereits existierenden Routine ein Bildobjekt erstellen. Diesem wird die Ziel-PHP-Datei als Quelle zugewiesen. Die Daten werden diesem String als Parameter übergeben.

Beispiel:
Code: 
function swapimage(){
	var imgMain = document.getElementById('mainimage');
	var divParent;

	// Erstellt ein neues Image Element
	var imgNew = document.createElement('img');

	// Bildobjekt erstellen
	var objImg = new Image();
	// Zieldatei mit den gewünschten Parametern zuweisen (Date-Komponente wegen Cache)
	objImg.src = "blank.php?img="+encodeURIComponent(this.src)+"&amp;"+new Date().getTime();


	imgNew.src = this.src;
	imgNew.width = this.width;
	imgNew.height = this.height;

	// Erhält eine ID
	imgNew.id = 'mainimage';

	// Hier findet der Bildtausch Statt
	divParent = imgMain.parentNode;
	divParent.replaceChild(imgNew, imgMain);
}

Im Übrigen bitte ich darum, in deinen Postings auf das Setzen von Satzzeichen zu achten. Denn so ist es für den Helfenden relativ schwer, sich durch den Text zu lesen - besten Dank im voraus.

Ciao
Quaese
 
Vielen dank :)
Aber dennoch stellt sich die Frage: Wie kann ich dass bild in einem Formular als Post Variable mit dem ausgewähltem Bild anfügen ?
Dass wenn ich auf Submit Klick dass image z.b als Post in img geschrieben wird..
Wäre euch sehr Dankbar.

Sollte sowas werden wie bei Stage6
Hier ein kleiner Rückblick

http://img15.imageshack.us/img15/1171/unbenanntcsa.png

Liebe Grüße
Sascha
 
Ist erledigt Vielen Dank

Ich habe dass Problem mittlerweile Gelöst
Ich bin wieder der alte er... :-)

Ich habs hinbekommen und möchte es euch nicht vorbehalten.. !

Hier der neue Source Code mit Pics von einem Nvidia Video mit Mplayer Capture Scenes

PHP: 
<script type="text/javascript" src="prototype.js"></script>
<style type="text/css">
	#mymedia .thumbnail-selection {
		padding: 4px; 
		border: 1px solid #ddd; 
		margin-left: 2px;
		width: 214px;
		height: 120px;
	}
	#mymedia .thumbnail-selection-selected {
		background-color: #fefcb3; 
		border: 1px solid #ffe158; 
		margin-left: 2px;
		padding: 4px;
		width: 214px;
		height: 120px;
	}
</style>

<script>
var image_swap = (document.getElementById) ? true : false;
window.onload = window_load;

function window_load()
   {

   if ( image_swap )
      {

      document.getElementById('thumbnail-1').onclick = swapimage;
      document.getElementById('thumbnail-2').onclick = swapimage;
      document.getElementById('thumbnail-3').onclick = swapimage;
	  document.getElementById('thumbnail-4').onclick = swapimage;
	  document.getElementById('thumbnail-5').onclick = swapimage;
	  document.getElementById('thumbnail-6').onclick = swapimage;
	  document.getElementById('thumbnail-7').onclick = swapimage;
	  document.getElementById('thumbnail-8').onclick = swapimage;
      
      }
   else
      {

      document.images['thumbnail-1'].onclick = swapimage;
      document.images['thumbnail-2'].onclick = swapimage;
      document.images['thumbnail-3'].onclick = swapimage;
      document.images['thumbnail-4'].onclick = swapimage;
      document.images['thumbnail-5'].onclick = swapimage;
      document.images['thumbnail-6'].onclick = swapimage;
      document.images['thumbnail-7'].onclick = swapimage;
      document.images['thumbnail-8'].onclick = swapimage;

      }

   }
   
function swapimage()
   {
   
      var imgMain = document.getElementById('mainimage');
      var divParent;
	  
      // Erstellt ein neues Image Element       
	  var imgNew = document.createElement('img');
	  

      imgNew.src = this.src;
	  imgNew.width = this.width;
	  imgNew.height = this.height;
	  imgNew.setAttribute('class',"thumbnail-selection");
   
      // Erhält eine ID 
      imgNew.id = 'mainimage';

      // Hier findet der Bildtausch Statt 
      divParent = imgMain.parentNode;
      divParent.replaceChild(imgNew, imgMain);

   }         

	function replaceClass(elem, old_class, new_class) 
	{

      $(elem).addClassName(new_class);

      $(elem).removeClassName(old_class);
	}




	function onSetThumbnail(index) {
		var thumbnails = [document.getElementById('thumbnail-1'), document.getElementById('thumbnail-2'),document.getElementById('thumbnail-3'), document.getElementById('thumbnail-4'), document.getElementById('thumbnail-5'), document.getElementById('thumbnail-6'), document.getElementById('thumbnail-7'), document.getElementById('thumbnail-8')];
		document.getElementById('field_still_id').value = index;
		for (var i = 0; i < thumbnails.length; i++) {
			replaceClass(thumbnails[i], 'thumbnail-selection-selected', 'thumbnail-selection');
		}
		replaceClass(thumbnails[index - 1], 'thumbnail-selection', 'thumbnail-selection-selected');
	}
</script>

<div id="mymedia">
<form id="video-thumbnail-generator" name="video-thumbnail-generator" method="post" action="#">
		
<input type="hidden" id="field_current_still_id" name="field_current_still_id" value="2">
<input type="hidden" id="field_still_id" name="field_still_id" value="2">


<img id="mainimage"  class="thumbnail-selection" src="00000004.jpg" width="214px" height="120px">


<div style="margin-top: 10px"></div>

<a href="#" onClick="onSetThumbnail(1); return false;"><img id="thumbnail-1" src="00000001.jpg" class="thumbnail-selection" /></a>
<a href="#" onClick="onSetThumbnail(2); return false;"><img id="thumbnail-2" src="00000002.jpg" class="thumbnail-selection" /></a>
<a href="#" onClick="onSetThumbnail(3); return false;"><img id="thumbnail-3" src="00000003.jpg" class="thumbnail-selection" /></a>
<a href="#" onClick="onSetThumbnail(4); return false;"><img id="thumbnail-4" src="00000004.jpg" class="thumbnail-selection" /></a>
<a href="#" onClick="onSetThumbnail(5); return false;"><img id="thumbnail-5" src="00000005.jpg" class="thumbnail-selection" /></a>
<a href="#" onClick="onSetThumbnail(6); return false;"><img id="thumbnail-6" src="00000006.jpg" class="thumbnail-selection" /></a>
<a href="#" onClick="onSetThumbnail(7); return false;"><img id="thumbnail-7" src="00000007.jpg" class="thumbnail-selection" /></a>
<a href="#" onClick="onSetThumbnail(8); return false;"><img id="thumbnail-8" src="00000008.jpg" class="thumbnail-selection" /></a>


</form>
</div>

http://www.mediafire.com/?glnktaztdmu
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück