...

View Full Version : Check boxes and images



SteveH
05-06-2009, 04:25 PM
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

Philip M
05-06-2009, 07:07 PM
Here you are:-


<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.

adios
05-06-2009, 08:31 PM
<!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).

SteveH
05-07-2009, 02:02 PM
Wow! Fantastic! Great scripts and both work! I am indebted to you both.

Cheers

Steve

SteveH
05-07-2009, 02:41 PM
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:
<!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>

/-\ncl`/
05-07-2009, 06:16 PM
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.

SteveH
05-08-2009, 04:43 PM
Hello /-\ncl`/

OK, thanks for that.

I'll work on it and post back.

Cheers again.

Steve



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum