CODEWITHSUNDEEP
javascripthtmlimage
Often Right
Often Right

Reputation: 425

Javascript make objects appear when searched for

I'm making a website that has a map of a campus on it and the idea is that the user clicks on a particular building, bringing them to a new page which then prompts them to enter the room's code. That I've got under control, but what I don't know how to do is to have a little marker appear on the location of the room on the map (bearing in mind that each building has multiple rooms). The entire webpage needs to dynamically alter its size (ie the map itself is a variable-sized image), so I can't simply put markers on top of the image. How can I make it so they enter the room code (eg they enter '101') and a marker (say an image) will appear at the location of that room (see images below).

enter image description here

Edit

I am currently using the source below. As you can see, I use a prompt box to get the room code, and what I want is to get a particular image and position it at a specified position.

    <script language="Javascript">
        var roomCode = prompt("Please enter the room code", "Enter room code here");
        if(roomCode==='101')
        {
            /*Put image in particular location*/
        }
        else if(roomCode==='102')
        {
            /*Put image in particular locationr*/
        }
        else
        {
            alert("That room does not exist.  Please refresh the page and try again.");
        }
    </script>

Upvotes: 0

Views: 118

Answers (1)

The One and Only ChemistryBlob
The One and Only ChemistryBlob

Reputation: 7884

For starters, add an ID to each room that corresponds to the room code for each room and name your room code form to store the user input:

<img id="MarkerForRoom101" style="display:none">

<form id="EnterRoomCodeForm"><input type="text" name="roomcode"><button type="button" 
onclick="ShowRoomCodeImage()">Click</button></form>

For each room, also have the number of pixels from the left and number of pixels from top stored in a form (call it room coordinates form or whatever, coordinates stored as 2 separate values).

Then, when a user enters a room code number in the form (by clicking your form's button), you use javascript to change the display of the user inputted room:

function ShowRoomCodeImage() {
    var roomcode = document.forms.EnterRoomCodeForm.roomcode.value.trim();
    var leftcoordinate = document.forms[RoomCoordinateForm][roomcode + 'left'].value;
    var topcoordinate = document.forms[RoomCoordinateForm][roomcode + 'top'].value;
    document.getElementById('MarkerForRoom' + roomcode).style.marginLeft = 
    leftcoordinate + 'px';
    document.getElementById('MarkerForRoom' + roomcode).style.marginTop = 
    topcoordinate + 'px';
    document.getElementById('MarkerForRoom' + roomcode).style.display = 'block';
}

Upvotes: 1

Related Questions