Multiple Image Swaps From Checkboxes

This site is best viewed in a modern browser with JavaScript enabled.

iconkid

I have a script that will swap a pair of images based on the status of a check box, but what I need is to adapt it to handle multiple pairs of images. I've tried numerous variations of the code to no avail. Below is the URL to a demonstration of the code. When you click the check box for the 'Red Pair' the ghosted red dot turns into a deep red dot. The 'Green Pair' is a fake -- everything inside the dotted line is merely a singe image I placed there just for illustration.

http://www.jeffs-icons.com/BROOKLYN/flip_test-1.html

The code for the image swap looks like this:

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

</body>

How do I adapt this code for both the 'Red Pair' and the 'Green Pair' of images?

rtrethewey

To accomplish this, the JavaScript function needs four pieces of information:

(1) the checkbox object
(2) the corresponding <img> element id
(3) the URL for the default image for the <img>
(4) the URL for the swap image for the <img>

There are several ways to write such a function, but I'm not inclined to create a complete example for you. If there was a specific issue you had trouble understanding, I'd try to explain it and correct your code, but your example page looks like you're just trying to copy and paste stuff you find on the web. You really need to spend some time learning basic HTML, CSS, and JavaScript or you're just going to keep running into problems trying to get various pieces of code to work together. Good luck!

tenacity1984

@ iconkid, this tutorial may help http://www.webmasterworld.com/javascript/4133918.htm
rtrethewey is right about learning the code

iconkid

Thanks, tenacity1984 (for the link) but I've already tried the script in that thread at WMW before you mentioned it but there was a problem with that too. I'm aware of the four basic elements needed for a script to work.

"...your example page looks like you're just trying to copy and paste stuff you find..."

That's correct, except that I do understand what elements are needed for a script to work -- it's just that I'm not trying to be a student of Javascript. I've been able to have an icon Web site on the Internet since 2002 having written all the HTML code myself -- but not the CSS and Javascript stuff because I never buckled down to learning the syntax of them. I'm not trying to be a dedicated student of Javascrip or CSS. There is no shame in discovering something that works, and using it.

I actually found a better technique for acheiving the effect I wanted -- instead of swapping a visable image with an invisible one (a transparent one), why not just use a code to tell the browser to NOT render an image or DO render it (show/hide script) using a checkbox as a toggle for this. This code works, but it is also accompanied by a new problem:

The problem is that images behave as inline elements (typically so) when they are toggled to 'hide,' but when an image is toggled to 'display' it takes on the characteristic of a block element -- moving to the beginning of a new line alone. There must be the right CSS or HTML code to force images to always stay inline.

I tried adding "display:inline" to my CSS like this:

p {margin-left: 0px; margin-right: 0px; display:inline;}

...but that didn't work.

A simplified example of what's in the BODY is this:

The layout of these five images looks like this (with all images hidden):

[1] [2] [3] [4] [5]

...but if I toggle image no. 3 to 'display,' the layout changes to this:

[1] [2]
[3]
[4] [5]

The third image has an 'id' for the Javascript to link it to the correct toggle input for that particular image -- the inputs are checkboxes.

The [div class="row"] is there because it was the only thing I could find that would make images fit end-to-end with no space between them, which the type of project I'm working on requires. Lately, I came across this:

...which was another answer to the question of how to eliminate empty space around images. Even though "row" did the job, I tried "nospace" out of curiosity -- and "nospace" didn't work -- go figure.

I don't see a need, at this point, to show the Javascript for the 'show/hide' function -- the problem should be solvable within HTML or CSS -- or so I believe.

iconkid

I found some code that works for swapping one image pair (for my testing purposes it is a blue dot that turns into a red dot when a checkbox is checked. Below is the code,

...and here is a link to this test page so you can see that it works:

http://www.jeffs-icons.com/BROOKLYN/test-1.html

However, I need to have multiple checkboxes with their own image pairs to swap. Forms, checkboxes and images all need to be linked together with NAMES and/or IDs for each checkbox to trigger flips for its designated pairs of images. The following code for doing that was offered to me but if it works for multiple pairs it should work for one, which it does not. This is the code:

http://www.jeffs-icons.com/BROOKLYN/test-2.html

Does anyone see why?