| Add image ffrom an element into other HTML element
Add image ffrom an element into other HTML element with javascript |
CoursesWeb
msg:4464709 | 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>
|
|
