Multi Picture viewer

[forgetmenow]

1) CODE TITLE: Window Multi Viewer Pictures

2) AUTHOR NAME/NOTES: Deborah Johnson

3) DESCRIPTION: Roll over effect picture viewer, each segment of the picture shows a glimse of what the full picture is then when you put your mouse over each one the full picture comes up.
you have to split each pic up into 5 segments and name all seperate and place them into the cose in the right way to view the full pick.
any questions email me at info@waggysfancydress.co.uk

4) URL TO CODE: http://www.waggysfancydress.co.uk

or, ATTACHED BELOW (see #3 in guidelines below):

<td width="244" align="center">
&nbsp;<script type="text/javascript">
var theElements = new Array('element1', 'element2', 'element3', 'element4', 'element5');
var defaultElements = new Array('Javascript/main_1_3.png', 'Javascript/main_2_3.png', 'Javascript/main_3_3.png', 'Javascript/main_4_2.png', 'Javascript/main_5_3.png');
var Elements_1 = new Array('Javascript/main_1_1.png', 'Javascript/main_1_2.png', 'Javascript/main_1_3.png', 'Javascript/main_1_4.png', 'Javascript/main_1_5.png');
var Elements_2 = new Array('Javascript/main_2_1.png', 'Javascript/main_2_2.png', 'Javascript/main_2_3.png', 'Javascript/main_2_4.png', 'Javascript/main_2_5.png');
var Elements_3 = new Array('Javascript/main_3_1.png', 'Javascript/main_3_2.png', 'Javascript/main_3_3.png', 'Javascript/main_3_4.png', 'Javascript/main_3_5.png');
var Elements_4 = new Array('Javascript/main_4_1.png', 'Javascript/main_4_2.png', 'Javascript/main_4_3.png', 'Javascript/main_4_4.png', 'Javascript/main_4_5.png');
var Elements_5 = new Array('Javascript/main_5_1.png', 'Javascript/main_5_2.png', 'Javascript/main_5_3.png', 'Javascript/main_5_4.png', 'Javascript/main_5_5.png');
function highlightfan(qelements, images){
for(i = 0; i <= qelements.length - 1; i++)
document.getElementById(qelements[i]).src = (images instanceof Array) ? images[i]:images;
}
</script>
<style type="text/css">
a img{
border: none;
}
</style>

<div id="fan">
<a href="http://www.waggysfancydress.co.uk/Star_Wars.htm#" onmouseover="highlightfan(theElements, Elements_1)" onmouseout="highlightfan(theElements, defaultElements)">
<img src="Javascript/main_1_3.png" id="element1" width="35" height="200" alt="Star Wars" /></a>
<a href="http://www.waggysfancydress.co.uk/bananaman.htm#" onmouseover="highlightfan(theElements, Elements_2)" onmouseout="highlightfan(theElements, defaultElements)">
<img src="Javascript/main_2_3.png" id="element2" width="35" height="200" alt="Bananaman" /></a>
<a href="http://www.waggysfancydress.co.uk/Girls_Halloween2.htm#" onmouseover="highlightfan(theElements, Elements_3)" onmouseout="highlightfan(theElements, defaultElements)">
<img src="Javascript/main_3_3.png" id="element3" width="35" height="200" alt="Girls Halloween" /></a>
<a href="http://www.waggysfancydress.co.uk/Doctor_Who.htm#" onmouseover="highlightfan(theElements, Elements_4)" onmouseout="highlightfan(theElements, defaultElements)">
<img src="Javascript/main_4_2.png" id="element4" width="35" height="200" alt="Dr Who" /></a>
<a href="http://www.waggysfancydress.co.uk/Danger_Mouse.htm#" onmouseover="highlightfan(theElements, Elements_5)" onmouseout="highlightfan(theElements, defaultElements)">
<img src="Javascript/main_5_3.png" id="element5" width="35" height="200" alt="Danger Mouse" /></a>
<p>Hover over each image and click</div></td>
<td width="5">
&nbsp;</td>
</tr>
</table>
<p align="center">

[forgetmenow]

this is a better link to see it in action
http://www.waggysfancydress.co.uk/page5.htm