JavaScript - Direction With Javasctipt - Help

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

I am using the jquery megamenu from the javascriptkit.com site, for multiple buttons, and I am having an issue where one menu on the right hand side of the page wants to start the menu at the left end of the button, heading right (which is the default), and ends up forcing a 3 column menu into a 2 column one when the resolution is set to 1024 wide, because it would disappear off the page otherwise.
I want instead for that one menu to END at the right hand side of the button so that the 3 columns remain intact.

I do not know enough about javascript to totally follow the logic of the code and my attempts to fix this issue have produced mixed results. Any one any suggstions?


[CODE]
alignmenu:function($, e, megamenu_pos){
var megamenu=this.megamenus[megamenu_pos]
var $anchor=megamenu.$anchorobj
var $menu=megamenu.$menuobj
var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu
//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight
var menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu
$menu.css({left:menuleft+"px", top:menutop+"px"})
this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})
},
[CODE]

Hi everyone, I'm curious if this is something simple. I'm working on a wordpress site using a plugin that is based off of the code from javascript kit called "highlighter scroller script". The plugin js is almost identical: http://javascriptkit.com/script/cut57.shtml

What is causing it to wipe from left to right? I'm racking my brains trying to figure it out (and googling unsuccessfully it seems). All I'm trying to do is make it wipe instead from right to left. I'm sure it's something simple, but I don't know which variable to change.

Can anyone point me in the right direction?

THANKS!

I'm developing a simple game that involves a system of interconnected nodes with unidirectional travel between nodes (similar to the circulation system!). The goal of the game is to get from a starting node to an ending node, which can be a variable number of nodes away.

The program picks a random starting point, then randomly chooses one of its connecting nodes (cNodes) and pushes it onto a pathArray. A cNode is randomly chosen from this new node and it is pushed onto the pathArray. This continues for a designated number of turns, thus generating a pathArray (invisible to the player). The last element in the pathArray is the endNode and the goal of the puzzle.

At each node the player is given two options of travel (though there may be more than two ways to go). One of these options MUST be the correct way if the player has not deviated from the path up until that point. If the player has deviated, this option can be any cNode. The other node is any cNode that does not lead to the endNode.

The following code contains a simplified list of nodes that represents the content in my game. The function, however, is taken word for word. In this snippet, the pathArray & startNode have already been generated and I am trying to resolve how to assign "nodeChoice" as either the correct direction of travel (for a player on the correct path) or any random cNode (for a player who has deviated from the path). Keep in mind that the pathArray and cNodes lengths can be any size.

Code:

<script>

//NODES:
var nodeA = {name:"A"};
var nodeB = {name:"B"};
var nodeC = {name:"C"};
var nodeD = {name:"D"};
var nodeE = {name:"E"};
var nodeF = {name:"F"};
var nodeG = {name:"G"};
var nodeH = {name:"H"};
var nodeI = {name:"I"};
var nodeJ = {name:"J"};
var nodeK = {name:"K"};
//An array of all nodes in the system:
var systemArray = [nodeA, nodeB, nodeC, nodeD, nodeE, nodeF, nodeG, nodeH, nodeI, nodeJ, nodeK];

//Connecting Nodes (cNodes):
//(uni-directional, but cyclical)
nodeA.cNodes = [nodeB, nodeC];
nodeB.cNodes = [nodeD, nodeE, nodeF];
nodeC.cNodes = [nodeF, nodeG];
nodeD.cNodes = [nodeI, nodeH];
nodeE.cNodes = [nodeJ];
nodeF.cNodes = [nodeK];
nodeG.cNodes = [nodeK];
nodeJ.cNodes = [nodeA];
nodeK.cNodes = [nodeA];
nodeI.cNodes = [nodeA];
nodeH.cNodes = [nodeA];

//The path chosen (generated from code not included here)
var pathArray = [nodeA, nodeB, nodeE, nodeJ];

//nodeChoice will represent a cNode from any given node
var nodeChoice;

//chooseNode is supposed to assign nodeChoice the next element in pathArray if the player on on the right path (if at nodeB, nodeChoice = nodeE).
//However, if the user has taken a different path, its cNodes will not be in pathArray in which case a random cNode is assigned to nodeChoice
function chooseNode(_node) {
	//check each cNode to see if any are in pathArray
	for (var j = 0; j < _node.cNodes.length; j++) {
		//if a cNode is in pathArray, then we know to assign it nodeChoice...
		if (_node.cNodes[j] in pathArray) {
			nodeChoice = _node.cNodes[j];
			console.log("choiceNode CORRECT: " + nodeChoice.name); //(for debugging purposes only)
		}
		//...otherwise don't do anything in this forLoop/ifStatement
	};
	//if by this point nodeChoice is still undefined, meaning none of the current node's cNodes are in pathArray, assign it any one of its cNodes.
	if (nodeChoice == undefined) {
		nodeChoice = _node.cNodes[Math.floor(Math.random()* _node.cNodes.length)];
			console.log("choiceNode INCORRECT: " + nodeChoice.name);//(for debugging purposes only)
	};	
};

//Runtime:

chooseNode(nodeB);
//Result should be only nodeE.name since nodeD is not in the pathArray...
console.log(nodeChoice.name);

</script>

...however, nodeChoice is assigned either D, E or F randomly and we are given the troubleshooting statement "choiceNode INCORRECT: D (or) E (or) F", indicating that the if-in statement is always ignored.

I know that the if-in statement doesn't work but am not sure how else to write it so that each cNode is compared the each element in pathArray, both of which can be of variable lengths...