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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Check boxes and images

    Hello

    I am trying to device some JavaScript whereby clicking on any one of four horizontally aligned images at the top of the page, redirects the user to another page.

    However, if users have not out a tick in the check-box at the bottom of the page, they are reminded to do so when they click on an image, that is, before they are redirected.

    How would I begin with that, please?

    Thanks.

    Steve

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here you are:-

    Code:
    <img src = "one.gif" onclick = "redirect(1)">
    <img src = "two.gif" onclick = "redirect(2)">
    <img src = "three.gif" onclick = "redirect(3)">
    <img src = "four.gif" onclick = "redirect(4)">
    <br><br>
    <input type = "checkbox" name = "chk1" id = "chk1">
    <br><br>
    
    <script type = "text/javascript">
    function redirect(val) {
    if (document.getElementById("chk1").checked == false) {
    alert ("You must check the checkbox before you proceed");
    return false;
    }
    if (val==1) {window.location = "http://www.google.com"}
    if (val==2) {window.location = "http://www.coding.forums.com"}
    if (val==3) {window.location = "http://www.javascriptkit.com"}
    if (val==4) {window.location = "http://www.ebay.com"}
    }
    
    </script>

    Quizmaster: Name the 4th state of the USA to join the Union. It was named after a British king.
    Contestant: Texas.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Posts
    1,404
    Thanks
    2
    Thanked 32 Times in 32 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>untitled</title>
    
    <script type="text/javascript">
    
    window.onload = function()
    {
       var link, links = document.getElementsByTagName('a');
       for (var l = links.length - 1; l >= 0; l--)
       {
          link = links[l];
          if (link.firstChild.className == 'req')
          {
             link.onclick = function()
             {
                var box = document.getElementById('required');
                if (!box.checked)
                {
                   alert('You must check the "Foo" box immediately!');
                   return false;
                }
                else return true;
              }
          }
       }
    }
    
    </script>
    <style type="text/css">	
    body {
    text-align: center;
    }
    div#container {
    height: 200px;
    width: 840px;
    margin-top: 100px;
    border: 1px gray dashed;
    }
    img {
    width: 200px;
    border-width: 0;
    }
    div#foo {
    margin-top: 50px;
    font: normal 16px "comic sans ms";
    color: darkred;
    }
    </style>
    <base href="http://www.seatingworld.co.uk/" />
    </head>
    <body>
    <div id="container">
    <a href="browse.tpl?action=show_chair&area=Plants&man=ASC&man_ref=Ficus%20Longifolia&range=Tree"><img class="req" 
    
    src="pictures/ficuslongifolialarge.jpg" /></a>
    <a href="browse.tpl?action=show_chair&area=Plants&man=ASC&man_ref=Kentia%20Palm&range=Tree"><img class="req" 
    
    src="pictures/kentiapalmlarge.jpg" /></a>
    <a href="browse.tpl?action=show_chair&area=Plants&man=ASC&man_ref=Pandanus%20Triple&range=Artificial"><img class="req" 
    
    src="pictures/pandanustriplelarge.jpg" /></a>
    <a href="browse.tpl?action=show_chair&area=Plants&man=ASC&man_ref=Parlour%20Palm&range=Tree"><img class="req" 
    
    src="pictures/parlourpalmlarge.jpg" /></a>
    </div>
    <div id="foo"><input id="required" type="checkbox" />Check the Foo!</div>
    </body>
    </html>
    Degrades nicely (links work with JS off).

  • #4
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Wow! Fantastic! Great scripts and both work! I am indebted to you both.

    Cheers

    Steve

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello

    Can I ask how I may customise this line:

    if (val==1) {window.location = "http://www.google.com"} so that it sees a file on my hard drive?

    I have tried this:

    if (val==1) {window.location = "newMac\imagemenu\page1.html"}

    but it will not work. The basic concept is great, but these files will never see a server.

    My original script, which works, is as follows:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    
    <style type="text/css">
    
    h5 {margin-top: 30px; font-family: tahoma}
    
    img { border: none;}
    
    a {
    text-decoration: none;
    }
    
    p {font-size: 12px; font-family: tahoma}
    
    td {padding-top: 1cm}
    
    .center {
    text-align: center;}
    
    
    .centerdiv{width:704px;margin:40px auto}
    
    </style>
    
    </head>
    
    <body>
    <h5 class="center">Please select your operating system</h5>
    <div class="centerdiv">
    
    <table border="0">
    <tr valign="top" align="center">
    <td width="175">
    <div style="border-right: 1px solid blue;">
    <a href="newXP\imagemenu\page1.html"><img src="WinXp_use.jpg" WIDTH=87 HEIGHT=54 title="XP logo" alt="XP"></a>
    <p><b>Windows XP</b></p>
    </div>
    </td>
    
    <td width="175">
    <div style="border-right: 1px solid blue;">
    <a href="newVista\imagemenu\page1.html"><img src="VistaLo.gif" WIDTH=55 HEIGHT=54 title="Vista logo" alt="Vista"></a>
    <p><b>Windows Vista</b></p>
    </div>
    
    </td>
    
    <td width="175">
    <div style="border-right: 1px solid blue;">
    <a href="win7\imagemenu\page1.html"><img src="7_logo.gif" WIDTH=87 HEIGHT=54 title="Windows 7 logo" alt="Windows 7"></a>
    <p><b>Windows 7</b></p>
    </div>
    </td>
    
    <td width="175">
    <div style="border-right: 1px solid blue;">
    <a href="newMac\imagemenu\page1.html"><img src="logo_Apple1_Red54.jpg" WIDTH=57 HEIGHT=54 title="Apple Mac logo" alt="Apple Mac"></a>
    <p><b>Apple Mac</b></p>
    </div>
    </td>
    
    </tr>
    </table> 
    </div>
    
    <center><p>If you are not sure which version of Windows you have, click on the Windows<br> logo and Pause/Break keys 
    simultaneously. The dialogue box shows your version</p></center>
    
    
    </body>
    </html>

  • #6
    New to the CF scene
    Join Date
    May 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Given that you have added the script to the page you are going to use, the path to the file you need is correct. It should get the file given you have used the onClick attribute in your link to call the function you are going to use.

    <a href="file.html" onClick="functionName(); return false;">Link</a>

    OR

    <img src="imagefile.jpg" onClick="functionName(); return false;" />

    You can also use open("file.html") or window.open("file.html") instead.

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello /-\ncl`/

    OK, thanks for that.

    I'll work on it and post back.

    Cheers again.

    Steve


  •  

    Posting Permissions

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