SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2004
    Location
    england
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    swapping using DOM

    Hey how do you swap to cell elements?

    if i had a table of 1 row and 2 cells with a image in each cell how do i swap the images using DOM based javascript

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You didn't say which kind of event you wanted to initiate the swap, but here's an example using a button: DEMO
    Code:
    <html>
     <head>
      <script language="JavaScript" type="text/javascript">
      <!--
    	function swapImages(){
    	 var firstImage = document.getElementById('image1');
    	 var secondImage = document.getElementById('image2');
    	////////////////////////////////////////////////////////
    	// The image src includes the full path of the image  //
    	// The following section extracts file name only	  //
    	////////////////////////////////////////////////////////
    	 var URLBits = firstImage.src.split("/");
    	var firstImageSrc = URLBits[URLBits.length-1];
    	
    	if(firstImageSrc == "1.gif"){
    	  firstImage.src = "2.gif";
    	 secondImage.src = "1.gif";
    	}
    	else{
    	  firstImage.src = "1.gif";
    	 secondImage.src = "2.gif";
    	} 
       }
      //-->
      </script>
     </head>
     <body>
      <table>
       <tr>
    	<td>
    	 <img id="image1" src="1.gif">
    	</td>
    	<td>
    	  <img id="image2" src="2.gif">
    	</td>
       </tr>
       <tr>
    	 <td colspan="2">
    	  <input type="button" value="Swap" onClick="swapImages();" />
    	</td>
       </tr>
      </table>  
     </body>
    </html>
    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...sorta DOM-based...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>...sorta DOM-based...</title>
    <style type="text/css">
    
    body {
    	background: #000;
    	}
    #foo {
    	margin: 40px auto;
    	}
    td {
    	margin: 1px;
    	border: 3px #fff dashed;
    	}
    td img {
    	width: 350px;
    	height: 344px;
    	margin: 0;
    	padding: 0;
    	border-width: 0;
    	}
    #info {
    	width: 14px;
    	font: bold 14px monospace;
    	color: #080;
    	text-align: center;
    	border-width: 0;
    	background: #fff;
    	}
    
    </style>
    <script type="text/javascript">
    
    function fnDOM_swap_cells( /* [cell ids, in pairs] */)
    {
    	var cell_1, cell_2, a = 0;
    	for (a; a < arguments.length; a += 2)
    	{
    		if ((cell_1 = document.getElementById(arguments[a]))
    		&& (cell_2 = document.getElementById(arguments[a + 1])))
    		{
    			cell_1.parentNode.replaceChild(cell_2.cloneNode(true), cell_1);
    			cell_2.parentNode.replaceChild(cell_1.cloneNode(true), cell_2);
    		}
    	}
    	return false;
    }
    
    onload = function()
    {
    	var foo = null;
    	if (foo = document.getElementById('foo'))
    		foo.ondblclick = function() { return fnDOM_swap_cells('cellL', 'cellR') };
    }
    
    </script>
    </head>
    <body>
    <table id="foo">
    <thead>
    </thead>
    <tbody>
    <tr>
    <td id="cellL"><img src="http://www.giftbasketman.com/hires/spaghetti.jpg" /></td>
    <td id="info">d o u b l e<br /><br />c l i c k<br /><br /><br />t o<br /><br />s w a p</td>
    <td id="cellR"><img src="http://www.giftbasketman.com/hires/fruit.jpg" /></td>
    </tr>
    </tbody>
    <tfoot>
    </tfoot>
    </table>
    </body>
    </html>
    
    ::: certified wild guess :::


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
  •