Swap Image Across Frames Using Checkbox

I'm trying to swap an image in one frame by using a check box in another frame. The following GIF animation simulates how this would look. It seems like there's only one image but in a working document there are two -- one is of an apple and the other is blank and fully transparent.

<snip>

The following link shows how the actual page works right now. I'm using a square containing the words "transparent image" as a temporary (and visable) place holder for the fully transparent one.

<snip>

On this test page you can try the check box -- it makes the apple appear but in the same frame as the check box. The appearance of the apple in this frame will be removed later but the code is in place for it to appear in the other frame too, but doesn't work.

The code for the frameset document is:
-------------------------------------------------------------------

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 DRAFT//EN">

<HTML>
  
 <HEAD>
  <TITLE>BROOKLYN</TITLE>
 </HEAD>

<FRAMESET cols="200px, *">
 <FRAME src="First_Frame_Source.html">
 <FRAME src="Second_Frame_Source.html" name="Second_Frame">
 </FRAMESET>

</HTML>

-------------------------------------------------------------------
One requirement for targeting the output of a form to another frame is that the target frame must be named, which I've done so -- as in [name="Second_Frame"].

The code for the frame containing the check box looks like this:
-------------------------------------------------------------------

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 DRAFT//EN">

<HTML>
 <HEAD>
  <TITLE>First Frame Source</TITLE>

  <base target="Second_Frame"> 
</head>

<BODY bgcolor="#a1adc0" text="#000000" LINK="#8F8FFC" VLINK="#B67AF6" ALINK="#FFFFFF">
 <font face="Arial, Helvetique, sans-serif" SIZE=2>
  
<p>
<form style='display:inline;' name="form-001" method="post" action="" target="Second_Frame">
<script type="text/javascript">
function processCheckbox(checkbox) {
if (checkbox.checked) {
image.src = "apple.png";
image.onclick = enabledClick;
} else {
image.src = "transparent_image.png";
image.onclick = null;
}
}
function enabledClick() {
alert("enabled!");
}
</script>

<input type="checkbox" onclick="processCheckbox(this);" target="Second_Frame">
</form>
&nbsp;
<img src="transparent_image.png" id="image">&nbsp;

</font>
</BODY>
</HTML>

-------------------------------------------------------------------
Various HTML help resources have suggested three different places where I could put a targeting statement to direct the output of the check box. I put such a statement in all three places for good measure; one between the HEAD tags (which is supposed to direct the output of ANY form in the document to the desired target), one in the form itself, and one for the 'input type' (the checkbox) but nothing works.

The code for the 'Second Frame' looks like this:
-------------------------------------------------------------------

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 DRAFT//EN">

<HTML>

 <HEAD>      
  <TITLE>Second Frame Source</TITLE>
</head>

<BODY bgcolor="#505050" text="#c0c0c0" LINK="#8F8FFC">
<font face="Arial, Helvetique, sans-serif" SIZE=3>

<div class="row"><img src="transparent_image.png" id="image"/></div> 
 
</font>
</BODY>    
</HTML>

-------------------------------------------------------------------
Why the 'div' tags? -- that's because the final page will contain not one large image like this test page but over a hundred tiny 17 X 17 pixel images which must all sit ajacent to each other in a grid pattern with no spaces between them. Without 'div' tags, my browser puts a 1-pixel space around each image -- I left this in the test page to remind myself to keep it in the final document.

[edited by: incrediBILL at 6:27 am (utc) on Aug 15, 2013]
[edit reason] URls removed. Please see forum charter and TOS [/edit]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 DRAFT//EN"> <HTML> <HEAD> <TITLE>BROOKLYN</TITLE> </HEAD> <FRAMESET cols="200px, *"> <FRAME src="client_list.html" RESIZE SCROLLING=yes> <FRAME src="BK-Map.html" name="BK-Map"> </FRAMESET> </HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 DRAFT//EN"> <HTML> <HEAD> <TITLE>Client List</TITLE> <link rel="stylesheet" type="text/css" href="sheet2.css"> <base target="BK-Map"> </head> <BODY bgcolor="#a1adc0" text="#000000" LINK="#8F8FFC" VLINK="#B67AF6" ALINK="#FFFFFF"> <font face="Arial, Helvetique, sans-serif" SIZE=2> <p> <form style='display:inline;' name="form-001" method="post" action="" target="BK-Map"> <script type="text/javascript"> function processCheckbox(checkbox) { if (checkbox.checked) { image.src = "white_dot.png"; image.onclick = enabledClick; } else { image.src = "sussman.png"; image.onclick = null; } } function enabledClick() { alert("enabled!"); } </script> <input type="checkbox" onclick="processCheckbox(this);" target="BK-Map"> </form>   <img src="sussman.png" id="image">  <font color="#2b3f80"> <b>Sussman</b></font><br>               1 Hanson Place </font> </BODY> </HTML>

/><img src="blank.png" title="AY-007" /><img src="blank.png" title="AY-008" /><img src="blank.png" title="AY-009" /><img src="blank.png" title="AY-010" /><img src="sussman.png" id="image" title="Sussman - 1 Hanson Pl" /><img src="blank.png" title="AY-012" /><img src="blank.png" title="AY-013" /><img src="blank.png" title="AY-014" /><img src="blank.png" title="AY-015"

<head> <script type="text/javascript"> function processCheckbox(checkbox) { if (checkbox.checked) { image.src = "ICONS/Z-red.png"; image.onclick = enabledClick; } else { image.src = "ICONS/Z-red-ghosted.png"; image.onclick = null; } } function enabledClick() { alert("enabled!"); } </script> </head> <body> <form style='display:inline;' name="form-001" method="post" action=""> <input type="checkbox" onclick="processCheckbox(this);"> </form> <img src="ICONS/Z-red-ghosted.png" id="image"> </body>

Swap Image Across Frames Using Checkbox

icon_kid

rainborick

icon_kid

icon_kid

icon_kid

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week