Tag Archives: geometry

Our last visit to our series of HTML map element tutorials, today, building on yesterday’s ESL Vocabulary Getting Warmer Game Tutorial as shown below, concentrates back on the HTML img element that the HTML map element relies on. The reason for this, is that, today, we allow for the “scene” of the ESL Vocabulary lesson to change, and we need to resize things, but not to do with any HTML map element dimensions, but rather the underlying HTML img element’s Javascript DOM … document.getElementById([imgId]).width document.getElementById([imgId]).height … at which point you might be saying … doh! … and you might be right “doh”ing in such a Willy Nilly way … but in lots of other applications it is document.getElementById([imgId]).style.width and document.getElementById([imgId]).style.height you deal with. All this begs the question: “How did you create the HTML map elements in the first place?” … especially as the “first place” was “Under the Stairs” … and there’s not much room there? … very minor and lame chortle, chortle. Well, this tutorial wants to introduce (or reintroduce) you to a wonderful service run by mobilefish to help you out … all together now … thanks MOBILEFISH … take a look here … can you see the possibilities?! We, personally, revisited the wonderful Mobilefish website, to create a Where’s Wally “scene” (thanks to the Telegraph UK’s “Where’s Wally? celebrates 25th birthday” article’s image of this webpage) for you to try the second of the HTML map modes of use we have been raving about lately as per … a jigsaw “overlay” to the underlying image (in that we try to cover the whole area of the image with clickable HTML area “polygon” segments (the so called “Click and be Prompted” mode of use)) … but if the user selects a “Find Prompted Object” mode of use that same HTML map element is reworked to become like … a “Where’s Wally” scenario where the computer prompts the user for what they should click on, where the HTML map element has one defined HTML area tag plus one other default “nonhref” HTML area tag … and there … we hope you see how the “Getting Warmer” is very applicable as an idea. By the way, you will see out there in Open Source land places where you can get great Javascript libraries whose code would cover what you need here too. So think “overlay”, the HTML map tag

As we saw yesterday, the HTML map element can be used in a variety of ways, two of which we hone in on with today’s ESL Vocabulary Getting Warmer Game Tutorial, a variation on yesterday’s ESL Under The Stairs Game Overlay Primer Tutorial as shown below, where we add Javascript functionality to effectively find the shortest distance of a point to a polygon co-ordinate “set”, and a revisit of our previous English Learning – Vocabulary – Under The Stairs as shown way below. The HTML map element can be … a jigsaw “overlay” to the underlying image (in that we try to cover the whole area of the image with clickable HTML area “polygon” segments (the so called “Click and be Prompted” mode of use)) … but if the user selects a “Find Prompted Object” mode of use that same HTML map element is reworked to become like … a “Where’s Wally” scenario where the computer prompts the user for what they should click on, where the HTML map element has one defined HTML area tag plus one other default “nonhref” HTML area tag In that second mode of use today, we add a bit of fun by adding that “getting warmer” type of “bizzo” (sorry to get technical) to our game. To do this, as we’ve mentioned, we find the shortest distance of a point to a polygon co-ordinate “set” by … leave the HTML map to determine when a point is inside its first “polygon” section, and for all the rest, via that other “nohref” HTML area element’s onclick event, we arrange some Javascript that … breaks the problem into sets of 3 co-ordinate (x,y) arrangements for each polygon line segment (brought up to 3 by the point chosen by the user) … for each of these consider the three points as a triangle and use Heron’s Formula to calculate the triangle area function herons_formula_triangle_area(x1, y1, x2, y2, x3, y3) { var a=Math.sqrt((x1 – x2) * (x1 – x2) + (y1 – y2) * (y1 – y2)); var b=Math.sqrt((x3 – x2) * (x3 – x2) + (y3 – y2) * (y3 – y2)); var c=Math.sqrt((x3 – x1) * (x3 – x1) + (y3 – y1) * (y3 – y1)); var s=eval((a + b + c) / 2.0); return Math.sqrt(s * (s – a) * (s – b) * (s – c)); } … the base value in “area=base