Javascript Course

Move image from an element to another - with jQuery

The JavaScript script from this page can be used to move /add an image from an element to another.
It is created in two versions, with standard JavaScript, and with jQuery effects.

• To Download this script, with the examples presented below, click: Move image from an element /tag to another.


- Usage:
1. Copy the code of the script (displayed below) into your HTML document, at the end, before the closing tag </body>
2. In the obimids variable add the path of the image associated with the IDs of the two elements in which the image will alternate when click on it. You can add how many images you want, using this syntax:
'image_path': ['id_elm1', 'id_elm2']
  - "id_elm1" is the ID of the tag where the image is initially displayed.
  - "id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag.
• For example, adding 2 images:
var obimids = {
  'dirimg/image.jpg': ['idfrom', 'idto'],
  'dirimg/image2.jpg': ['idfrom2', 'idto2']
};
3. In your HTML document create the tags with the IDs that was associated to the image, in which the image will be displayed and moved.
• For example, if you add in obimids 2 images (like in the example above), in the HTML document add 4 elements (you can use CSS properties to position and design those elements):
<div id="idfrom"></div>
<div id="idfrom2"></div>
<div id="idto"></div>
<div id="idto2"></div>

- Code of the script:
<script type="text/javascript">
/*
 Here add:
    'image_path': ['id_elm1', 'id_elm2']
 "id_elm1" is the ID of the tag where the image is initially displayed
 "id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag
*/
var obimids = {
  'imgage1.jpg': ['ide1', 'ideto1'],
  'image2.jpg': ['ide2', 'ideto2']
};

// function executed when click to move the image into the other tag
function whenAddImg() {
  /* Here you can add a code to be executed when the images is added in the other tag */
  return true;
}

         /* From here no need to edit */

// create object that will contain functions to alternate image from a tag to another
var obaImg = new Object();
 // coursesweb.net/javascript/
  // put the image in element with ID from "ide"
  obaImg.putImg = function(img, ide) {
    if(document.getElementById(ide)) {
      document.getElementById(ide).innerHTML = '<img src="'+ img+ '" />';
    }
  }

  // empty the element with ID from "elmid", add image in the other element associated to "img"
  obaImg.alternateImg = function(elmid) {
    var img = obaImg.storeim[elmid];
    var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
    document.getElementById(elmid).innerHTML = '';
    obaImg.putImg(img, addimg);

    // function executed after the image is moved into "addimg"
    whenAddImg();
  }
  obaImg.storeim = {};            // store /associate id_elm: image

  // add 'image': 'id_elm1', and 'image': 'id_elm1' in "storeim"
  // add the image in the first tag associated to image
  // register 'onclick' to each element associated with images in "obimids"
  obaImg.regOnclick = function() {
    for(var im in obimids) {
      obaImg.storeim[obimids[im][0]] = im;
      obaImg.storeim[obimids[im][1]] = im;
      obaImg.putImg(im, obimids[im][0]);
      document.getElementById(obimids[im][0]).onclick = function(){ obaImg.alternateImg(this.id); };
      document.getElementById(obimids[im][1]).onclick = function(){ obaImg.alternateImg(this.id); };
    }
  }
obaImg.regOnclick();       // to execute regOnclick()
</script>

• The script contains a function ( whenAddImg() ) that is called after the image is moved into the other tag. You can use this function to perform some instructions when the image is moved from one tag into another.
- See also the comments in code.

Example: (Click on image to move it in other element, then click again on image to move it back to the initial place):
Move image into other HTML tag.

Move image from an element to another - with jQuery

Here is the same script, but with jQuery effects. The images are added the same as explained above, in the obimids object (see also the comments in code).

- Code of the script - with jQuery:
<script type="text/javascript">
/*
 Here add:
    'image_path': ['id_elm1', 'id_elm2']
 "id_elm1" is the ID of the tag where the image is initially displayed
 "id_elm2" is the ID of the second tag, where the image is moved, when click on the first tag
*/
var obimids = {
  'imgage1.jpg': ['ide1', 'ideto1'],
  'image2.jpg': ['ide2', 'ideto2']
};

// function executed when click to move the image into the other tag
function whenAddImg() {
  /* Here you can add a code to be executed when the images is added in the other tag */
  return true;
}

         /* From here no need to edit */

// create object that will contain functions to alternate image from a tag to another
var obaImg = new Object();
 // coursesweb.net/javascript/
  // put the image in element with ID from "ide"
  obaImg.putImg = function(img, ide, stl) {
    if(document.getElementById(ide)) {
      document.getElementById(ide).innerHTML = '<img src="'+ img+ '" '+stl+' />';
    }
  }

  // empty the element with ID from "elmid", add image in the other element associated to "img"
  obaImg.alternateImg = function(elmid) {
    var img = obaImg.storeim[elmid];
    var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
    $('#'+elmid+ ' img').hide(800, function(){
      $('#'+elmid).html('');
      obaImg.putImg(img, addimg, 'style="display:none;"');
      $('#'+addimg+ ' img').fadeIn(500);
    });

    // function executed after the image is moved into "addimg"
    whenAddImg();
  }
  obaImg.storeim = {};            // store /associate id_elm: image

  // add 'image': 'id_elm1', and 'image': 'id_elm1' in "storeim"
  // add the image in the first tag associated to image
  // register 'onclick' to each element associated with images in "obimids"
  obaImg.regOnclick = function() {
    for(var im in obimids) {
      obaImg.storeim[obimids[im][0]] = im;
      obaImg.storeim[obimids[im][1]] = im;
      obaImg.putImg(im, obimids[im][0], '');
      document.getElementById(obimids[im][0]).onclick = function(){ obaImg.alternateImg(this.id); };
      document.getElementById(obimids[im][1]).onclick = function(){ obaImg.alternateImg(this.id); };
    }
  }
obaImg.regOnclick();       // to execute regOnclick()
</script>

• The script contains a function ( whenAddImg() ) that is called after the image is moved into the other tag. You can use this function to perform some instructions when the image is moved from one tag into another.

Example: (Click on image to add it into the picture below, then click again on image to move it back to the initial place):
Add image from a tag to other element, and back.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Move image from an element /tag to another

Last accessed pages

  1. Zodiac Signs JavaScript code (10966)
  2. addChild and removeChild (7883)
  3. The Mastery of Love (6652)
  4. SHA512 Encrypt hash in JavaScript (24680)
  5. PHP Unzipper - Extract Zip, Rar Archives (31611)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (316)
  2. PHP Unzipper - Extract Zip, Rar Archives (108)
  3. Read Excel file data in PHP - PhpExcelReader (100)
  4. SHA1 Encrypt data in JavaScript (81)
  5. Get and Modify content of an Iframe (73)
Chat
Chat or leave a message for the other users
Full screenInchide