Javascript使搜索时出现对象

Question

我正在建立一个有校园地图的网站，其想法是用户点击某个特定建筑物，将他们带到一个新页面，然后提示他们进入房间。代码。我已经掌控了，但我不知道该怎么做就是在地图上的房间位置出现一个小标记（记住每栋建筑都有多个房间）。整个网页需要动态改变其大小（即地图本身是一个可变大小的图像），所以我不能简单地将标记放在图像的顶部。我怎样才能进入房间代码（例如他们输入＆＃39; 101＆＃39;）并在该房间的位置出现一个标记（例如图像）（见下图）。

修改

我目前正在使用以下来源。如您所见，我使用提示框来获取房间代码，我想要的是获取特定图像并将其放置在指定位置。

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

Answer 1

首先，为每个房间添加一个与每个房间的房间代码相对应的ID，并命名您的房间代码表格以存储用户输入：

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

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

对于每个房间，还有左边的像素数和顶部存储的像素数（称为房间坐标形式或其他，坐标存储为2个单独的值）。

然后，当用户在表单中输入房间代码（通过单击表单的按钮）时，使用javascript更改用户输入房间的显示：

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';
}