Instructions

To use this script in your web page, follow this steps:
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 = {
  'imgs/boy.jpg': ['boy1', 'boyto'],
  'imgs/girl.jpg': ['girl1', 'girlto'],
  'imgs/dog.jpg': ['dog1', 'dogto']
};

         /* From here no need to edit */

// create class that will contain functions to alternate image from a tag to another
moveImg = function() {
 // 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;
  }

  // http://coursesweb.net/javascript/
  var storeim = {};            // store /associate id_elm: image

  // put the image in element with ID from "ide"
  var 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"
  var alternateImg = function(elmid) {
    var img = storeim[elmid];
    var addimg = (elmid == obimids[img][0]) ? obimids[img][1] : obimids[img][0];
    document.getElementById(elmid).innerHTML = '';
    putImg(img, addimg);

    // function executed after the image is moved into "addimg"
    whenAddImg();
  }

  // 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"
  this.regOnclick = function() {
    for(var im in obimids) {
      storeim[obimids[im][0]] = im;
      storeim[obimids[im][1]] = im;
      putImg(im, obimids[im][0]);
      document.getElementById(obimids[im][0]).onclick = function(){ alternateImg(this.id); };
      document.getElementById(obimids[im][1]).onclick = function(){ alternateImg(this.id); };
    }
  }
}

// create object of moveImg class
var obaImg = new moveImg();
obaImg.regOnclick();       // to execute regOnclick()
</script>

• The script contains a function ( whenAddImg() inside the body of moveImg ) 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.

Courses for web programers, development and site building: CoursesWeb.net