Welcome to WebmasterWorld Guest from 54.162.240.235

Forum Moderators: open

Message Too Old, No Replies

Add image ffrom an element into other HTML element

Add image ffrom an element into other HTML element with javascript

     
5:03 am on Jun 13, 2012 (gmt 0)



Here is a simple JavaScript code that can be used to add /move an image from a HTML element into another when click on it.
Then, when click again on that image, it moves back into first element.

<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">
var img = '<img src="image.jpg" width="100" height="100" alt="titlu" />';
// moves image from "gol" to "plin"
function putImg(gol, plin) {
document.getElementById(gol).innerHTML = '';
document.getElementById(plin).innerHTML = img;
}

// register onclick event
document.getElementById('idfrom').onclick = function(){ putImg(this.id, 'idto'); };
document.getElementById('idto').onclick = function(){ putImg(this.id, 'idfrom'); };
</script>


With jQuery effects:

<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">
// code for image
var img = '<img src="image.jpg" width="100" height="100" alt="titlu" style="display:none;" />';

// move image from "gol" into "plin"
function putImg(gol, plin) {
// www.coursesweb.net/javascript/
$('#'+gol+ ' img').hide(800, function(){
$('#'+gol).html('');
$('#'+plin).html(img);
$('#'+plin+ ' img').fadeIn(500);
});
}

$('#idfrom').click(function(){ putImg(this.id, 'idto'); });
$('#idto').click(function(){ putImg(this.id, 'idfrom'); });
</script>
 

Featured Threads

Hot Threads This Week

Hot Threads This Month