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
    Jul 2009
    Location
    Colorado
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with nesting onclick image swap events and image mapping

    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.


    Code:
    <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>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,166
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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:
    Code:
    <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.

  • Users who have thanked Old Pedant for this post:

    anderson.fvgn (07-24-2009)

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Location
    Colorado
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

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