Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Any ideas on this guys and girls?

  1. #1
    Join Date
    Apr 2007
    Location
    uk
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Any ideas on this guys and girls?

    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

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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>
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. The Following User Says Thank You to rangana For This Useful Post:

    forgetmenow (07-05-2008)

  4. #3
    Join Date
    Apr 2007
    Location
    uk
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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>

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. The Following User Says Thank You to jscheuer1 For This Useful Post:

    forgetmenow (07-05-2008)

  7. #5
    Join Date
    Apr 2007
    Location
    uk
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    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.

  8. #6
    Join Date
    Jul 2008
    Posts
    199
    Thanks
    6
    Thanked 58 Times in 57 Posts

    Default

    You have to split up your big image into several smaller ones, then update the names of them in each of the arrays.

  9. #7
    Join Date
    Apr 2007
    Location
    uk
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Oh right i get it now, thanks hun x

  10. #8
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

  11. The Following 2 Users Say Thank You to Nile For This Useful Post:

    forgetmenow (07-05-2008),techietim (07-02-2008)

  12. #9
    Join Date
    Apr 2007
    Location
    uk
    Posts
    35
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    done that, but for some reason it wont show them all in each box any ideas?

  13. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    Please post a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •