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

jasonelmore · 02-02-2010, 09:54 AM

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

Dormilich · 02-02-2010, 10:08 AM

basicly all you need to do is change the src attribute of the large picture, according to the thumbnail image clicked.

hey · 02-02-2010, 11:26 AM

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

jasonelmore · 02-02-2010, 07:18 PM

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.

Old Pedant · 02-02-2010, 08:14 PM

Just change onmousover to onclick

Presto.

jasonelmore · 02-03-2010, 09:22 AM

alright, how do I specify the event to go to a specific div? Again, i'm really a beginner when it comes to this.

Dormilich · 02-03-2010, 10:27 AM

put an id to the <div> and use document.getElementById()