Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Location
    Richmond, Virginia, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question band site image switch

    I barely know any javascript and I really need some help. I copied a script off Draac.com but it doesn't quite apply to my situtation. What I need is a script that changes one image to another when you mouse over a different image. Along the left side of my page I will have headshots of each bandmember, and when you mouse over each person's picture, their bio should come up on the right. At least...that's what I want. There are six people in my band, including me. If possible I'd also like to have an image that's there when you don't have your mouse over a "trigger picture", as I've been calling it. Each bio is saved as one image, not text. I've gotten that far but I really only know HTML and I don't think that covers this. Anyway, if someone could please please please help me out, I'd be eternally grateful. If you need more information please post!

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts

    Welcome to CF!

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function preloadBio(){
      var arrBio = new Array("member1_bio.gif","member2_bio.gif","member3_bio.gif");//add as many images
      var preload = new Array();
      for (var i=0;arrBio.length;i++){
         preload[i] = new Image();
         preload[i].src = arrBio[i];
      }
    }
    
    function displayBio(name){
      document.images['bio'].src=name+"_bio.gif";
    }
    </script>
    </head>
    <body onload="preloadBio()">
    <img src="member1.gif" onmouseover="displayBio('member1')" />
    <img src="member2.gif" onmouseover="displayBio('member2')" />
    <img src="member3.gif" onmouseover="displayBio('member3')" />
    ...
    <p>
    <img name="bio" src="member1_bio.gif" />
    </p>
    </body>
    </html>
    As you notice in the code, you should follow a naming convention to associate a band member image to his corresponding bio image.
    If a member's image is member1.gif, his bio image should be named member1_bio.gif.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Location
    Richmond, Virginia, USA
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much! It worked perfectly...now I just need to get everyone else to submit their bios and pictures and it'll be finished.
    Last edited by SEPringo; 06-17-2004 at 04:49 AM.


  •  

    Posting Permissions

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