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:
<div class="row"><nobr>
<img src="1.png"
/><img src="2.png"
/><img src="3.png id="sussman"
/><img src="4.png"
/><img src="5.png"/>
</nobr>
</div>
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:
<div class="nospace">
...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.