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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2010
    Location
    Campbellsville Ky
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need help, point me in the right direction. Image map/browser

    Someone please point me in the right direction. Basically what i'm trying to do is, Post up a nice image map up top of a page with several diff images (all same dimensions), and when the user clicks on one of the images, it loads down in a section below, without reloading the page.

    I have drawn a small diagram to show you guys what i'm talking about. So far, all I've found, are scripts that use some sort of lightbox that covers the entire page.

    I would like to try to stay away from flash if I can. The main browser, does'nt necessarily have to be one big image with a map, but it would make it look so much better if it looked matched the games menu. I'm trying to replicate a stats game menu, inside my webpage, so ppl can browse just like they do in game.

    Example:



    What I'm trying to replicate:



    When a weapon on this menu is clicked, it loads up on the right, and gives a brief description. I"m just trying to replicate the functionality of this menu really.

    So are there any kind of scripts out there that already exist, where I could accomplish this? or how would i go about this.

    just need someone to point me in the right direction. Thanks a million

  • #2
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,251
    Thanks
    12
    Thanked 340 Times in 336 Posts
    basicly all you need to do is change the src attribute of the large picture, according to the thumbnail image clicked.

  • #3
    hey
    hey is offline
    New Coder
    Join Date
    Jan 2010
    Posts
    38
    Thanks
    0
    Thanked 13 Times in 13 Posts
    You can do something like this:

    Code:
    <html>
      <head>
        <script type="text/javascript">
        function change(imgPath)
        {
          document.getElementById('largeImage').src = imgPath;
        }
        </script>
      </head>
      <body>
        <div>
          <img src="http://www.w3schools.com/jS/b_pink.gif" onmouseover="change('http://www.w3schools.com/jS/b_pink.gif')"/>
          <img src="http://www.w3schools.com/TAGS/planets.gif" onmouseover="change('http://www.w3schools.com/TAGS/planets.gif')" />
        </div>
        <div>
          <img src="http://www.w3schools.com/jS/b_pink.gif" width="300" height="300" id="largeImage" />
        </div>
      </body>
    </html>
    You can learn a bit more about the code here:

    http://www.w3schools.com/jS/tryit.as...ryjs_animation
    Last edited by hey; 02-02-2010 at 11:29 AM.

  • #4
    New to the CF scene
    Join Date
    Feb 2010
    Location
    Campbellsville Ky
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, that is for mouseover tho. Are there any small scripts that already exist that i can maybe modify?

    I'm not good at writing this stuff from square one.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    Just change onmousover to onclick

    Presto.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    Feb 2010
    Location
    Campbellsville Ky
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    alright, how do I specify the event to go to a specific div? Again, i'm really a beginner when it comes to this.

  • #7
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,251
    Thanks
    12
    Thanked 340 Times in 336 Posts
    put an id to the <div> and use document.getElementById()


  •  

    Tags for this Thread

    Posting Permissions

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