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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Image changing use buttons

    I have a main image on a page im creating, i would like to change it using a button that the user selects. There is a maximum 3 image changes plus the original image that is displayed when the page loads.

    I would like it so that when you click on the button image A, turns into image B and if you click again you get back to image A.

    now i have the code for this already and have it working
    Code:
    <script language="JavaScript">
    <!--
    var x = 0;
    
    function chngImg()
    {
    	if (x == 0)
    	{
    		x = 1;
    	document.getElementById("image a").src = image b.gif';
    	}
    	else	
    	{
    		x = 0;
    		document.getElementById("image a").src = 'image a.gif';
    	}
    }
    //-->
    </script>
    and heres the html tag

    Code:
    <input type="button" value="Show image b" onclick="chngImg()" name="imgName"></input>
    The problem im having is modifying the same javascript to work for image C and D

    any help would be most highly appreciated.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate your code and clear all markup errors if any. I think space in the value of id attribute is invalid.

    PS:Post your html also, to get a better idea on what you've done so far.
    Last edited by abduraooft; 08-06-2008 at 10:15 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    the space is something i have placed in there to obscure the original variable name for reasons i wont go into now. the code works and does the switching i need what i really need to know is how do i modify/replace it so that i can do the same but with 2 more buttons and images

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Here's the relevant parts of my HTML

    Code:
    <input type="button" value="Show Image B" onclick="chngImg()" name="imgName"></input>
    <input type="button" value="Show Image C" onclick="chngImg()" name="imgName"></input>
    <input type="button" value="Show Image D" onclick="chngImg()" name="imgName"></input>
    
    <img src="Image A.gif" usemap="#imgMap" border="0" width="1024" height="768" alt="map" name="imgName" id="map">
          <map id="imgMap" name="imgMap">

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    <img src="Image A.gif" usemap="#imgMap" border="0" width="1024" height="768" alt="map" name="imgName" id="map">
    If you are trying to change the src of the above image
    document.getElementById("image a").src = image b.gif';
    should be
    document.getElementById("map").src = image b.gif';
    And you need to pass some value in onclick="chngImg()" like
    onclick="chngImg(0)" and then receive this value in the function like
    Code:
    function chngImg(x)
    PS: use the same value for name and id attribute of img tag
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    AmmO (08-06-2008)

  • #6
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    thanks that helped things but i maanaged to solve the problem with a large amount of help from a devloper freind of mine AKA mighty_mike


  •  

    Posting Permissions

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