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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    images and radio buttons

    I'm trying to swap three images at the same time by clicking a radio button.There are two radio buttons if you click one three images will replace three other images in a table.
    the other button will replace three other images

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Something on these lines?




    <script>
    <!--
    function change_pic(){

    if(document.f1.r1[0].checked==true){
    document.getElementById("pic1").src="pic02.jpg"
    document.getElementById("pic2").src="pic02.jpg"
    document.getElementById("pic3").src="pic02.jpg"
    }

    if(document.f1.r1[1].checked==true){
    document.getElementById("pic1").src="pic01.jpg"
    document.getElementById("pic2").src="pic01.jpg"
    document.getElementById("pic3").src="pic01.jpg"
    }

    }
    // -->
    </script>


    <form name="f1">
    <input type="radio" name="r1" onclick="change_pic()">
    <input type="radio" name="r1" onclick="change_pic()">
    </form>


    <table border="1">
    <tr>
    <td><img id="pic1" src="pic01.jpg"></td>
    <td><img id="pic2" src="pic01.jpg"></td>
    <td><img id="pic3" src="pic01.jpg"></td>
    </tr>
    </table>

  • #3
    New to the CF scene
    Join Date
    Dec 2003
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here is what I'm doing in the first column lies the radio buttons , the second column contains three blank images when I click on the one radio button the three images need to change to something else. when the other button is clicked three seperate images are to be displayed.

    <html>
    <head>
    <title>Final Exam</title>
    <script language="JavaScript">
    !-->


    //-->
    </script>
    </head>
    <body bgcolor="#FFFFFF" text="#000000">
    <table width="593" border="0" cellspacing="0" cellpadding="0" height="376">
    <tr>
    <td colspan="3" height="56">
    <center>
    <H1>Santa's List Self Declaration</H1>
    </center>
    </td>
    </tr>
    <td>
    <div align="center"><font size="5">1</font> <font size="2">Rate Your Behavior</font>
    <p>
    <Input type="radio" name="attitude" value="good">
    Good
    <p>
    <Input type="radio" name="attitude" value="good">
    Bad
    </div>
    </td>
    <td>
    <p align="center">&nbsp;</p>
    <p align="center">&nbsp;</p>
    <p align="center"><font size="5">2</font> <font size="2">Choose Your Reward</font>
    </p>
    <p align="center"><img src="spacer.gif" width="96" height="104"></p>
    <p align="center"><img src="spacer2.gif" width="96" height="104"></p>
    <p align="center"><img src=spacer3.gif" width="96" height="104"></p>
    </td>
    <td width="198" height="30">
    <p align="center"><font size="5">3</font> <font size="2">Enter your E-Mail Address </font>
    <Input type="text">
    </p>
    <div align="center"><font size="5">4</font> <font size="2">Confirm Your Choice</font>
    <Input type="text"><Input type="submit" value="submit">
    </div>
    <p align="center"> <font size="5">?</font> <font size="2">Click on the Elf
    for Help</font></p>
    <p align="center"> <img src="elf.gif" width="96" height="104">
    </p>
    </td>
    </tr>
    </table>
    </body>
    </html>


  •  

    Posting Permissions

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