"double" image swap- onclick.

Hello! I'm in the process of putting together a portfolio of my past design work, and I'm running into a couple of problems getting my javascript to work.

Description:
The end code is supposed to allow me to have a large image on my page, with 3 small images below it. The three small images below the large image are going to be part of the "double rollover" effect, and when they are clicked the larger image above them will be replaced by a different 'view'. When the image that they correspond with is being shown in the DIV above them (the large image is replaced), these small buttons should show an 'active' state. (the 'active' state is going to be a filled-in bubble, the 'unactive' state is going to be an empty bubble)

So basically what I'm trying to say is that when you click the smaller buttons on the bottom, the large image will be replaced with a different view of the design, and the small buttons are replaced with a filled-in circle.

An example of how I'd like the effect to work:
http://www.unifusion.com/web-1.asp

An example of a somewhat similar effect: (This one uses a hover effect instead of an onclick effect)
http://www.a1javascripts.com/mouseover_scripts/doublemo/doublemo.html

I started out my attempts at this with that website I gave you above. I checked out their code and experimented a bit. However, I realized that they used Dreamweaver to do their dirty work, and that their code was a complete mess- and no doubt faulty in some way. I did manage to get it to work, but I'm not comfortable using Dreamweavers JS- as so many people say it's horrible (I wouldn't really know.)

The second script that I played around with worked wonderfully in FF. My large image was replaced smoothly and the active view for the smaller buttons was shown via the second image swap (smaller buttons below the large image changed to the 'filled in bubble' when appropriate). The problem was that I couldn't get the script to work in IE. Here is that script:

<div style="border:1px solid #cccccc; padding:0px;">

<img src="../../img/portfolio/qgs1.jpg" class="borderless" style="display:block;" alt="" id="swap" />

</div>

<div class="portfolionumbers" style="padding-bottom:3px;">
<div style="padding-top:2px; color:#8dabaa; float:right;">Change Website Image View</div>
<img src="../../img/portfolio/swapactive.jpg" alt="" id="swap1" onclick="document.swap.src='../../img/portfolio/qgs1.jpg'; document.swap1.src='../../img/portfolio/swapactive.jpg';

document.swap2.src='../../img/portfolio/swap.jpg'; document.swap3.src='../../img/portfolio/swap.jpg';" />

<img src="../../img/portfolio/swap.jpg" alt="" id="swap2" onclick="document.swap.src='../../img/portfolio/qgs2.jpg'; document.swap2.src='../../img/portfolio/swapactive.jpg';

document.swap1.src='../../img/portfolio/swap.jpg'; document.swap3.src='../../img/portfolio/swap.jpg';" />

<img src="../../img/portfolio/swap.jpg" alt="" id="swap3" onclick="document.swap.src='../../img/portfolio/qgs3.jpg'; document.swap3.src='../../img/portfolio/swapactive.jpg';

document.swap1.src='../../img/portfolio/swap.jpg'; document.swap2.src='../../img/portfolio/swap.jpg';" />
</div>


So after all that, I'd like to know if there is either some way to make my second script work in IE, or if there is some amazing script out there that someone could point me towards that does the same thing.

OR- even better- if someone wants to help me write this myself... and have it actually work... that would be very nice of them... as I'd like to learn a bit more about all of this.

Thanks much for your time! Sorry I'm such a lousy explainer.
-Kelsie

So, are you using the onclick event?

Hello! I'm in the process of putting together a portfolio of my past design work, and I'm running into a couple of problems getting my javascript to work.

Description:
The end code is supposed to allow me to have a large image on my page, with 3 small images below it. The three small images below the large image are going to be part of the "double rollover" effect, and when they are clicked the larger image above them will be replaced by a different 'view'. When the image that they correspond with is being shown in the DIV above them (the large image is replaced), these small buttons should show an 'active' state. (the 'active' state is going to be a filled-in bubble, the 'unactive' state is going to be an empty bubble)

So basically what I'm trying to say is that when you click the smaller buttons on the bottom, the large image will be replaced with a different view of the design, and the small buttons are replaced with a filled-in circle.
So what you need is a combination of a thumbnail-driven slideshow and a 'locking rollover' script. The link below demonstrates a thumbnail viewer operating in different modes. The final demonstration shows it combined with a 'locking rollover' script, to achieve what I think you're describing.
The two scripts are entirely independent, but are capable of working together without any modification.
Once the thumbnail viewer is working, install the rollover script and they magically combine. Click Here (http://www.hotspot.freeserve.co.uk/scripterlative?thumbsmart)

Yes kosstr12, I believe that's what I'd need to use.

Thanks Arty Effem, I'm going to check that page out right now!

Edit: Arty Effem, I checked out that page you gave me and it's really close to what I want. However, I don't want separate thumbnails for each larger image (its looking to me like that script generages smaller thumbnails for you). I'd just like to use the idea of a "filled in circle" for the current image, and a "empty circle" for inactive images.

Is there a way I can use that script for that?

Yes kosstr12, I believe that's what I'd need to use.

Thanks Arty Effem, I'm going to check that page out right now!

Edit: Arty Effem, I checked out that page you gave me and it's really close to what I want. However, I don't want separate thumbnails for each larger image (its looking to me like that script generages smaller thumbnails for you). I'd just like to use the idea of a "filled in circle" for the current image, and a "empty circle" for inactive images.

Is there a way I can use that script for that?Yes. Thumbnail image placeholders are not generated, they have to be present. First you set-up ThumbSmart in 'click' mode, using your empty circle image for all the thumbnails. Once it's working properly, i.e clicking a thumbnail displays a corresponding large image, you then set-up SmartRoll to work on the same thumbnails, specifying the filled circle image for all the hovered-state buttons.
Then any hovered thumbnail will switch to the filled circle, and if clicked will persist until another is clicked.