SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Image Swaping

  1. #1
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Image Swaping

    I want to create a link which can swap image without clicking that image.

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can you provide a little more context?
    For instance, do you already have some HTML structure in which you wish to implement this behaviour?

  3. #3
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Ize View Post
    Can you provide a little more context?
    For instance, do you already have some HTML structure in which you wish to implement this behaviour?
    yes you are right...I have sent you a email..

  4. #4
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try something like this:


    Code HTML4Strict:
    <a href="#" onmouseout="restoreImage('image1');" onmouseover="swapImage('image1','newSrc.jpg');">This is a link</a>
    <img id="image1" src="oldSrc.jpg">

    Code JavaScript:
    function swapImage (id, newSrc) {
      if (!document.getElementById(id)) {
        return;
      } else {
        var img = document.getElementById(id);
        if (typeof img.ORIGINALSOURCE == 'undefined'){
          img.ORIGINALSOURCE = img.src;
        }
        img.src = newSrc;
    }
    function restoreImage (id) {
      if (!document.getElementById(id)) {
        return;
      } else {
        var img = document.getElementById(id);
        if (typeof img.ORIGINALSOURCE != 'undefined'){
          img.src = img.ORIGINALSOURCE;
        }
      }
    }

    Let's continue the discussion here, so others can participate.

  5. #5
    SitePoint Addict swaraj_here's Avatar
    Join Date
    Jan 2007
    Location
    India
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Quote Originally Posted by Ize View Post
    Try something like this:


    Code HTML4Strict:
    <a href="#" onmouseout="restoreImage('image1');" onmouseover="swapImage('image1','newSrc.jpg');">This is a link</a>
    <img id="image1" src="oldSrc.jpg">

    Code JavaScript:
    function swapImage (id, newSrc) {
      if (!document.getElementById(id)) {
        return;
      } else {
        var img = document.getElementById(id);
        if (typeof img.ORIGINALSOURCE == 'undefined'){
          img.ORIGINALSOURCE = img.src;
        }
        img.src = newSrc;
    }
    function restoreImage (id) {
      if (!document.getElementById(id)) {
        return;
      } else {
        var img = document.getElementById(id);
        if (typeof img.ORIGINALSOURCE != 'undefined'){
          img.src = img.ORIGINALSOURCE;
        }
      }
    }

    Let's continue the discussion here, so others can participate.
    Can this handle another id at a same time to show some sublinks?? Also the actions should be invoked on mouseclick not mousehover.

  6. #6
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by swaraj_here View Post
    Can this handle another id at a same time to show some sublinks?? Also the actions should be invoked on mouseclick not mousehover.
    Sure, change the functions to this:

    Code JavaScript:
    function swapImages (ids, newSrcs) {
      for (var i=0; i<ids.length; i++){
        if (!document.getElementById(ids[i])) {
          continue;
        } else {
          var img = document.getElementById(ids[i]);
          if (typeof img.ORIGINALSOURCE == 'undefined'){
            img.ORIGINALSOURCE = img.src;
          }
          img.src = newSrcs[i];
        }
      }
    }
    function restoreImages (ids) {
      for (var i=0; i < ids.length; i++){
        if (!document.getElementById(ids[i])) {
          continue;
        } else {
          var img = document.getElementById(ids[i]);
          if (typeof img.ORIGINALSOURCE != 'undefined'){
            img.src = img.ORIGINALSOURCE;
          }
        }
      }
    }

    Then send, instead of one id, an array of ids to the functions:

    Code HTML4Strict:
    <a href="#" onmouseout="restoreImages(['image1','image2']);" onmouseover="swapImages(['image1','image2'],['newsrc.jpg','newsrc2.jpg']);">This is a link</a>

    Of course it's also possible to trigger this function onclick, just change onmouseover to onclick, but you have to come up with an event on which you wish to restore the images to their original sources.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •