www.webdeveloper.com
Results 1 to 2 of 2

Thread: onclick image swap

Hybrid View

  1. #1
    Join Date
    Jul 2013
    Posts
    3

    onclick image swap

    Code:
    <img src="a.png">
    <img src="b.png">
    i want to click on a.png and highlight it
    then click on b.png and swap images with each other
    been looking at other peoples codes, and they all are swaping a master image and not what i am looking for, please help dont know what i need javascript,html, or php

  2. #2
    Join Date
    Jul 2013
    Posts
    3

    swap is done, just need help saving the changes when changes happen

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Swap demo</title>
    
    <style type="text/css">
    #GALLERY td {
        height: 200px; width: 200px;
        text-align: center;
        vertical-align: middle;
    }
    #GALLERY td img, #GALLERY td img.normal {
        border: solid white 5px;
    }
    #GALLERY td img.highlighted {
        border: solid red 5px;
    }
    </style>
    
    </head>
    <body>
          <table id="GALLERY">
          <tr>
              <td>
                  <img src="http://www.clearviewarts.com/thumbnails/Puppy In Basket.jpg" alt="Dogs"/>          
              </td>
              <td>
                  <img src="http://www.clearviewarts.com/thumbnails/BabyIndy.jpg" alt="Dogs"/>          
              </td>
              <td>
                  <img src="http://www.clearviewarts.com/thumbnails/HarlequinDane.jpg" alt="Dogs"/>          
              </td>
          </tr>
          <tr>
              <td>
                  <img src="http://www.clearviewarts.com/thumbnails/Pug.jpg" alt="Dogs"/>          
              </td>
              <td>
                  <img src="http://www.clearviewarts.com/thumbnails/Wagner-edit1.jpg" alt="Dogs"/>          
              </td>
              <td>
                  <img src="http://www.clearviewarts.com/thumbnails/CanusAngelicus.jpg" alt="Dogs"/>          
              </td>
          </tr>
          </table>
    
    <script type="text/javascript">
    var pix = document.getElementById("GALLERY").getElementsByTagName("img");
    for ( var p = 0; p < pix.length; ++p )
    {
        pix[p].onclick = picclick;
    }
    
    var firstImage = null;
    function picclick( )
    {
        // to cancel a swap, click on first image again:
        if ( firstImage == this ) 
        {
            this.className = "normal";
            firstImage = null;
            return;
        }
        // is this first image clicked on?
        if ( firstImage == null )
        {
            // yes
            firstImage = this;
            this.className = "highlighted";
            return; // nothing more to do
        }
        // aha! second image clicked on, so do swap
        firstImage.className = "normal";
        var temp = this.src;
        this.src = firstImage.src;
        firstImage.src = temp;
        firstImage = null;
        
    }
    </script>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles