Mutare imagine dintr-un tag in altul si inapoi

[MarPlo]

Iata un mic script JavaScript prin care se poate muta imaginea adaugata intr-un tag in alt element HTML, si sa revina in tag-ul precedent cand se apasa click pe ea.

Cod: Selectaţi tot

<div id="idfrom" style="width:100px; height:100px; border:2px dotted green;"><img src="image.jpg" width="100" height="100" alt="titlu" /></div><br/>
<div id="idto" style="width:100px; height:100px; border:2px solid blue;"></div>
<script type="text/javascript">
// cod pt afisare imagine
var img = '<img src="image.jpg" width="100" height="100" alt="titlu" />';

// face elementul cu id-ul de la "gol" fara date
// adauga imaginea in tag-ul cu id-ul de la "plin"
function putImg(gol, plin) {
  document.getElementById(gol).innerHTML = '';
  document.getElementById(plin).innerHTML = img;
}

// inregistreaza onclick la tag-urile cu id "idfrom" si "idto"
document.getElementById('idfrom').onclick = function(){ putImg(this.id, 'idto'); };
document.getElementById('idto').onclick = function(){ putImg(this.id, 'idfrom'); };
</script>

Cu efecte jQuery:

Cod: Selectaţi tot

<div id="idfrom" style="width:100px; height:100px; border:2px dotted green;"><img src="image.jpg" width="100" height="100" alt="titlu" /></div><br/>
<div id="idto" style="width:100px; height:100px; border:2px solid blue;"></div>
<script type="text/javascript">
// cod pt imagine
var img = '<img src="image.jpg" width="100" height="100" alt="titlu" style="display:none;" />';

// face elementul cu id-ul de la "gol" fara date
// adauga imaginea in tag-ul cu id-ul de la "plin"
function putImg(gol, plin) {
 // www.coursesweb.net/javascript/
  // ascunde imaginea, apoi sterge codul din "gol", adauga imaginea in "plin" si o face vizibila
  $('#'+gol+ ' img').hide(800, function(){
    $('#'+gol).html('');
    $('#'+plin).html(img);
    $('#'+plin+ ' img').fadeIn(500);
  });
}

// inregistreaza onclick la tag-urile cu id "idfrom" si "idto"
$('#idfrom').click(function(){ putImg(this.id, 'idto'); });
$('#idto').click(function(){ putImg(this.id, 'idfrom'); });
</script>

- O versiune mai avansata, in care se pot adauga usor mai multe imagini, e la: Move image from an element /tag to another.