Mutare imagine dintr-un tag in altul si inapoi
Scris: Mie Iun 06, 2012
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.
Cu efecte jQuery:
- O versiune mai avansata, in care se pot adauga usor mai multe imagini, e la: Move image from an element /tag to another.
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>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>