Help with nesting onclick image swap events and image mapping

anderson.fvgn

07-24-2009, 05:00 PM

I am having problems with some code I am trying to write. Let me explain what I am trying to do and then I will post the code.

I am trying to make a point and click javascript game. Basically what I want is to have one image displayed on screen at the start (room1.jpg). When you click on a door on that image, I have an onclick event to change the image to a new one that shows the door open (room1_a.jpg). What I want is that when you click the now open door, to display the next room in the game. The only solution I can think of is some sort of nested onclick event using several image maps, but I am fairly new to Javascript and I am not sure if that is possible. What it all comes down to is I want to display each incarnation of each room in the game in the same window without having to reload a new window for each room. I hope that makes sense, if not I can try and clarify. Below is the code I have so far. And as you can see all that does is display the open door when you click on the image. I have not done any of the image mapping yet.

Thank you in advance for any help anyone can provide.

<html>
<head>
<style type="text/css">
p {text-align:center}
</style>
<script type="text/javascript">
function room1()
{
document.getElementById("room1").src="room1_a.jpg";
alert("The door opens with a loud squeak."+'\n'+"You can feel a draft coming from the now open door.");
}
</script>
</head>
<body>
<p><img src="left.jpg" alt="Rules" /><img src="room1.jpg" alt="Entryway" id="room1" onClick="room1()";/><img src="bottom.jpg" alt="Messages" /></p>
</body>
</html>

Old Pedant

07-24-2009, 09:25 PM

So is there only one spot to click in each image???

That is, if your first image is showing a door and a window, do you want something different to happen if the door is clicked on vs. if the window is clicked on?

Or is clicking anywhere in the image sufficient?

In any case, I think I'd do this by having *ONE* image, only. And all you do is change the SRC= of the image (and, optionally, the ALT=). The onclick simply leads to a single function that checks the SRC property of the image and decides what to do based on that.

*Assuming* that clicking anywhere in the image is enough:

<script>
function room( p, n, a, d )
{
this.pic = p;
this.next = n;
this.alt = a;
this.description = d;
}

var rooms = new Array(
new room("DUMMY","room1","DUMMY","DUMMY for startup"),
new room("room1","room1A","Entryway","In the entry with the door closed"),
new room("room1A","room2","Entryway, door open","You feel a draft "),
new room("room2","room3","Living room","In the living room with door to dining"),
new room("room3","room3A","Dining room","The china cabinet is closed"),
... etc. ...
);

function findRoom( picname )
{
for ( var r = 0; r < rooms.length; ++r )
{
if ( rooms[r].pic == picname ) return rooms[r];
}
return null; // ???
}

function roomClick( )
{
var image = document.getElementById("theRoom");
var temp = image.src.split("/");
var pic = temp[temp.length-1]; // get only name
pic = pic.replace(".jpg",""); // strip off the extension
// look through all rooms to find this one
var curroom = findRoom( pic );
if ( curroom == null ) return; // impossible?
var nextpic = curroom.next;
var nextroom = findRoom( nextpic );
if ( nextroom == null ) return; // can't move from current room??
// okay, found room to move to, so do it:
image.src = nextroom.pic + ".jpg";
image.alt = nextroom.alt;
document.getElementById("description").innerHTML = nextroom.description;
}
</script>
...
<body onload="roomClick( );">
<img id="theRoom" src="DUMMY.jpg" alt="DUMMY" onclick="roomClick( );">
<div id="description">nothing to start</div>
...
...

But that will be an AWFULLY simplistic game, with only the need to click anyplace on the image to proceed to the next step.

If this is for homework, then I wrote too much code for you. If this really is for a game, then you need to think a lot about how to improve it.

anderson.fvgn

07-24-2009, 10:07 PM

Thanks! I was hoping to have more than one place to click on in each image such as 2 doorways or a door and a window, etc. And I can assure you this is not for homework. Just A) bored and trying to find projects to help expand my minimal knowledge of HTML and JavaScript and B) trying to build up my code portfolio for a possible job as a web developer. That is what I really want to do.

I know it is a pretty simplistic game right now...it is still very much a work in progress as I think of things to improve. I will definitely try incorporating the code you sent and I thank you again very much. Now I just need to try and find a way to possibly incorporate a basic inventory system...so if you have any ideas on that as well, would be greatly appreciated.