Log in

View Full Version : 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">&nbsp;<!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:


<!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/side/files/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=ggl|wanted|Wanted_Movie|Wanted_MovieSpecific&sky=ggl|wanted|Wanted_Movie|Wanted_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.
techietim
07-02-2008, 12:51 PM
You have to split up your big image into several smaller ones, then update the names of them in each of the arrays.
forgetmenow
07-02-2008, 01:25 PM
Oh right i get it now, thanks hun x
Nile
07-02-2008, 01:40 PM
Here's a full exampled:
http://niler.net/examples/slicedimages/fan.html
forgetmenow
07-02-2008, 02:17 PM
done that, but for some reason it wont show them all in each box any ideas?
jscheuer1
07-02-2008, 03:50 PM
Please post a link to the page on your site that contains the problematic code so we can check it out.
forgetmenow
07-02-2008, 04:54 PM
I have managed to do it, but i cant put it on my front page because it keeps making the borders go off and nacking up my front page here is the finnished product but how can i put it on without my borders going all mad?
http://www.waggysfancydress.co.uk/page5.htm
thanks for the help