Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Want to get image swapping script working in NN4

    Hi Everyone,

    I have a script that alternately swaps two images on mouse click, to give the appearance of a button being pressed. The script works fine in IE6, NS7, Firefox, now I want to code it so that it will additionally work in NN4. I have no idea of what commands to use in order to make it work in NN4, any help will be really appreciated. Also if you can see any potential problems with the scripting for IE4 could you please point them out. The script is as follows....

    Code:
    <html>
    <head>
    <title> Press Button Emulation Experiment </title>
    <style type="text/css">
    #nav_button_layer
    {
    	position:			absolute;
    }
    </style>
    <script src="positioner.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<!--
    
    var buttonPressed = false;
    
    function swapImage(imageName)
    {
    	if(document.getElementById)	// IE5+ & NS6+ --> W3C DOM
    	{	
    		var imageObject = document.getElementById(imageName);
    		
    		if(!buttonPressed)
    		{
    			imageObject.setAttribute("src", "button_1.gif");
    			buttonPressed = true;
    		}
    		else
    		if(buttonPressed)
    		{
    			imageObject.setAttribute("src", "button_2.gif");
    			buttonPressed = false;
    		}
    	}
    	else
    	if(document.all)			// IE 4
    	{
    		var imageObject = document.all.item(imageName);
    
    		if(!buttonPressed)
    		{
    			imageObject.src = "button_1.gif";
    			buttonPressed = true;
    		}
    		else
    		if(buttonPressed)
    		{
    			imageObject.src = "button_2.gif";
    			buttonPressed = false;
    		}
    	}		
    	else
    	if(document.layers)
    	{
    		var imageObject = document.layers[imageObject];
    
    		// Need to work out code for this section
    	}
    }
    
    //-->
    </script>
    </head>
    <body>
    <div id="nav_button_layer">
    	<img id="nav_button" style="cursor:pointer; cursor:hand" src="button_2.gif" onclick="swapImage('nav_button')">
    </div>
    	<script type="text/javascript">
    		setElement('nav_button_layer', 0, 92, 8, 20, 1, "#ffffff");
    	</script>	
    </body>
    </html>
    Thanks heaps for your help with this.

    Regards

    Davo

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    You don't need to write different codes for different browsers if it can be done with a common code that is supported by all.
    Code:
    function swap(imgName, imgURL){
      document.images[imgName].src = imgURL;
    }
    ...
    <a href="#" onmousedown="swap('myimage','button1_down.gif')" onmouseup="swap('myimage','button1_up.gif')"><img name="myimage" src="button1_up.gif" border="0" /></a>
    <a href="#" onmousedown="swap('myimage2','button2_down.gif')" onmouseup="swap('myimage2','button2_up.gif')"><img name="myimage2" src="button2_up.gif" border="0" /></a>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

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