homepage Welcome to WebmasterWorld Guest from 54.211.231.221
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Website
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
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>

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved