Interactive map using client-side scripting

Question

I'm looking to start a simple web app project where the goal is to mark a specific spot on an image/map when a user types-in a specified number.

For example: assume there is USA map on the document, below that there is a text field form. When the user types-in (5) the state of California would be highlited.

I've seen similar techniques done with mouseover. But my skills in JS, JQ, CSS, HTML are at max 'recrational'. Is the scenario which I've just describe possible ? Any guiding points/tips/hints are much appreciated.

Thank you

Answer 1

Assuming that your map is created with Javascript and HTML, this is easy. You will need to validate the text form so each region is linked with what you expect the user to type. So for your example, if the user types in (5), you would want to link this to the id of the California region on your map (ie "california").

so make a hash with these expectations:

linkedArray = new Array(); linkedArray['5'] = "california";

etc. etc.

Then check your textbox value against that array, and have a CSS class that changes the background color of the wanted element in your map, and than just add that class to the element if its typed into the box.

for var i in linkedArray{ if linkedArray[i] == $("yourTextbox").val() { $('"' + linkedArray[i] + '"').addClass("highlighted"); } }

If you have just a straight up Jpeg map this gets much more complicated.