Any ideas on this guys and girls?

**forgetmenow** · 07-02-2008, 09:03 AM

I have put this up on the site to show you all http://www.waggysfancydress.co.uk/new_page_4.htm
but the cose seems to be a bit out some how and cant figger it out on how to get the mose over to show one full picture instead of all little ones, any ideas? here is the code.

<p align="center"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fan JS</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<script type="text/javascript">
var theElements = new Array('element1', 'element2', 'element3', 'element4', 'element5');
var defaultElements = new Array('main_1.png', 'main_2.png', 'main_3.png', 'main_4.png', 'main_5.png');
var Elements_1 = new Array('main_1.png', 'main_1.png', 'main_1.png', 'main_1.png', 'main_1.png');
var Elements_2 = new Array('main_2.png', 'main_2.png', 'main_2.png', 'main_2.png', 'main_2.png');
var Elements_3 = new Array('main_3.png', 'main_3.png', 'main_3.png', 'main_3.png', 'main_3.png');
var Elements_4 = new Array('main_4.png', 'main_4.png', 'main_4.png', 'main_4.png', 'main_4.png');
var Elements_5 = new Array('main_5.png', 'main_5.png', 'main_5.png', 'main_5.png', 'main_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>
</head>
<body>
<div id="fan">
<a href="#" onmouseover="highlightfan(theElements, Elements_1)" onmouseout="highlightfan(theElements, defaultElements)"><img src="Javascript/main_1.png" id="element1" width="80" height="300" alt="" /></a>
<a href="#" onmouseover="highlightfan(theElements, Elements_2)" onmouseout="highlightfan(theElements, defaultElements)"><img src="Javascript/main_2.png" id="element2" width="80" height="300" alt="" /></a>
<a href="#" onmouseover="highlightfan(theElements, Elements_3)" onmouseout="highlightfan(theElements, defaultElements)"><img src="Javascript/main_3.png" id="element3" width="80" height="300" alt="" /></a>
<a href="#" onmouseover="highlightfan(theElements, Elements_4)" onmouseout="highlightfan(theElements, defaultElements)"><img src="Javascript/main_4.png" id="element4" width="80" height="300" alt="" /></a>
<a href="#" onmouseover="highlightfan(theElements, Elements_5)" onmouseout="highlightfan(theElements, defaultElements)"><img src="Javascript/main_5.png" id="element5" width="80" height="300" alt="" /></a>
</div>
</body>
</html></td>
</tr>
</table>

any help on this one would be great, thanks all

**rangana** · 07-02-2008, 09:40 AM

You might find this code useful:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function reset()
{
var img1='http://h1.ripway.com/rangana/images/Picture1.png',
img2='http://h1.ripway.com/rangana/images/Picture2.jpg',
img3='http://h1.ripway.com/rangana/images/Picture3.jpg',
img4='http://h1.ripway.com/rangana/images/Picture4.jpg',
img5='http://h1.ripway.com/rangana/images/Picture5.jpg',
img6='http://h1.ripway.com/rangana/images/Picture6.jpg',
img7='http://h1.ripway.com/rangana/images/Picture7.jpg',
img8='http://h1.ripway.com/rangana/images/Picture8.jpg',
img9='http://h1.ripway.com/rangana/images/Picture9.jpg';
// Set all the source of your image element here
var imgarr=[img1,img2,img3,img4,img5,img6,img7,img8,img9], // Set them in this array
img=document.getElementById('rangWrap').getElementsByTagName('img');
for(var i=0;i<imgarr.length;i++)
	{img[i].src=imgarr[i];}}
function change(val)
{
var img=document.getElementById('rangWrap').getElementsByTagName('img');
for(var i=0;i<img.length;i++)
	{img[i].src=val;}}
	
window.onload=function()
{
/********* Script by Raymond Angana ************
* First seen in dynamicdrive.com/forum
* username: rangana
* Date Created: July 2, 2008
* This notice must stay intact
/***************** End of notice *******************/
/////////////////// Do not edit beyond this part ///////////////////////
var img=document.getElementById('rangWrap').getElementsByTagName('img');
for(var i=0;i<img.length;i++)
	{img[i].onmouseover=function()
	{change(this.src);}
	img[i].onmouseout=function()
	{reset();}}}
</script>
<style type="text/css">
*{margin:0px;padding:0px;}
#rangWrap{
width:610px;
border:3px double #2d2d2d;
padding:10px;
margin:20px auto;
}
img{
width:200px;
height:150px;
}
</style>
</head>
<body>
<div id="rangWrap">
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="myimage">
<img src="http://h1.ripway.com/rangana/images/Picture2.jpg" alt="myimage">
<img src="http://h1.ripway.com/rangana/images/Picture3.jpg" alt="myimage">
<img src="http://h1.ripway.com/rangana/images/Picture4.jpg" alt="myimage">
<img src="http://h1.ripway.com/rangana/images/Picture5.jpg" alt="myimage">
<img src="http://h1.ripway.com/rangana/images/Picture6.jpg" alt="myimage">
<img src="http://h1.ripway.com/rangana/images/Picture7.jpg" alt="myimage">
<img src="http://h1.ripway.com/rangana/images/Picture8.jpg" alt="myimage">
<img src="http://h1.ripway.com/rangana/images/Picture9.jpg" alt="myimage">
</div>
</body>
</html>

**forgetmenow** · 07-02-2008, 09:55 AM

cant seem to get it to work! i have changed the file names to mine but its not doing anything just showing lots of pictures in a box of the same? this is how i have done it
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function reset()
{
var img1='http://www.waggysfancydress.co.uk/Javascript/main_1.png',
img2='http://www.waggysfancydress.co.uk/Javascript/main_1.png',
img3='http://www.waggysfancydress.co.uk/Javascript/main_2.png',
img4='http://www.waggysfancydress.co.uk/Javascript/main_3.png',
img5='http://www.waggysfancydress.co.uk/Javascript/main_4.png',
img6='http://www.waggysfancydress.co.uk/Javascript/main_5.png',
// Set all the source of your image element here
var imgarr=[Javascript/main_1.png,Javascript/main_2.png,Javascript/main_3.png,Javascript/main_4.png,Javascript/main_5.png,], // Set them in this array
img=document.getElementById('rangWrap').getElementsByTagName('img');
for(var i=0;i<imgarr.length;i++)
{img[i].src=imgarr[i];}}
function change(val)
{
var img=document.getElementById('rangWrap').getElementsByTagName('img');
for(var i=0;i<img.length;i++)
{img[i].src=val;}}

window.onload=function()
{
/********* Script by Raymond Angana ************
* First seen in dynamicdrive.com/forum
* username: rangana
* Date Created: July 2, 2008
* This notice must stay intact
/***************** End of notice *******************/
/////////////////// Do not edit beyond this part ///////////////////////
var img=document.getElementById('rangWrap').getElementsByTagName('img');
for(var i=0;i<img.length;i++)
{img[i].onmouseover=function()
{change(this.src);}
img[i].onmouseout=function()
{reset();}}}
</script>
<style type="text/css">
*{margin:0px;padding:0px;}
#rangWrap{
width:610px;
border:3px double #2d2d2d;
padding:10px;
margin:20px auto;
}
img{
width:200px;
height:150px;
}
</style>
</head>
<body>
<div id="rangWrap">
<img src="http://www.waggysfancydress.co.uk/Javascript/main_1.png" alt="myimage">
<img src="http://www.waggysfancydress.co.uk/Javascript/main_1.png" alt="myimage">
<img src="http://www.waggysfancydress.co.uk/Javascript/main_1.png" alt="myimage">
<img src="http://www.waggysfancydress.co.uk/Javascript/main_1.png" alt="myimage">
<img src="http://www.waggysfancydress.co.uk/Javascript/main_1.png" alt="myimage">
</div>
</body>
</html>

**jscheuer1** · 07-02-2008, 10:52 AM

The original script works here for me:

http://home.comcast.net/~jscheuer1/s.../im_chng_h.htm

I just made sure that the paths were consistent, and made a few minor revisions. Even without the revisions, the script worked fine. Making the paths consistent was very important though.

**forgetmenow** · 07-02-2008, 11:12 AM

thank you for your help, i got that and yes that works fine like that for me, but i wanted the roll over to make one big picture not all little ones in a row if you know what i mean, here is a link to the one i am after.
http://www.wantedmovie.com/?__source..._MovieSpecific
if you see on that the roll over makes each one go into one big pick on all the separate links.
hope to hear back from you soon from debs.