ESL Under The Stairs Game Overlay Primer Tutorial

ESL Under The Stairs Game Overlay Primer Tutorial

The HTML map element can be used in a variety of ways, two of which we hone in on with today’s ESL Vocabulary game “Under the Stairs”, a revisit of our previous English Learning – Vocabulary – Under The Stairs is shown below, where that same HTML map element used then, today, starts as …

  1. 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 …
  2. 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

Again, we are in the area of study of “overlay”, the HTML map tag being a well established overlay method linking image data with co-ordinate intelligence, still a useful idea we think.

HTML and Javascript codewise the original under_the_stairs.html is unchanged from the way it was below, but today, with our changed scenario, it is used within an HTML iframe element using our Client Pre-emptive Iframe techniques to glean HTML map information, and then reworked as necessary directly into that iframe, and the HTML and Javascript for this is pre_under_the_stairs.html channeling those oft-mentioned CSS techniques …

  1. position:absolute property
  2. z-index
  3. opacity

The “overlay” concept comes into play, too, for the user to control the mode of use of the web application (ie. its HTML map element’s mode of use) via an HTML select tag “overlayed” on top of an HTML iframe element which exists that way for 20 seconds allowing the user to choose that other mode of use should they be interested.

This could all become much clearer when you try a live run and we hope it leaves you with some ideas to try out yourself in a project you are working on.


Previous relevant English Learning – Vocabulary – Under The Stairs is shown below.

click map

English Learning - Vocabulary - Under The Stairs


Click to start class. How many things can you name?

If this was interesting you may be interested in this too.


If this was interesting you may be interested in this too.

This entry was posted in eLearning, ESL, Games, Tutorials and tagged , , , , , , , , , , , , . Bookmark the permalink.

33 Responses to ESL Under The Stairs Game Overlay Primer Tutorial

  1. I relish, cause I discovered exactly what I was taking a look for. You’ve ended my four day lengthy hunt! God Bless you man. Have a nice day. Bye

  2. It is in reality a nice and useful piece of info. I am glad that you shared this useful info with us. Please stay us informed like this. Thanks for sharing.

  3. image says:

    Simply a smiling visitor here to share the love (:, btw great style and design .

  4. class says:

    Great – I should definitely pronounce, impressed with your web site. I had no trouble navigating through all tabs as well as related info ended up being truly easy to do to access. I recently found what I hoped for before you know it in the least. Reasonably unusual. Is likely to appreciate it for those who add forums or something, web site theme . a tones way for your customer to communicate. Excellent task.

  5. go says:

    Thank you a lot for giving everyone a very splendid chance to check tips from this site. It really is so nice and full of a great time for me and my office co-workers to search the blog on the least thrice in 7 days to read the fresh issues you have got. And indeed, I’m also at all times fascinated considering the exceptional things you serve. Some 1 points in this posting are ultimately the finest I’ve ever had.

  6. Just want to say your article is as surprising. The clearness in your post is simply great and i can assume you’re an expert on this subject. Well with your permission allow me to grab your feed to keep updated with forthcoming post. Thanks a million and please continue the rewarding work.

  7. You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I will try to get the hang of it!

  8. hi!,I love your writing so much! share we keep up a correspondence more approximately your post on AOL? I require a specialist on this house to solve my problem. May be that is you! Taking a look forward to peer you.

  9. House & Home says:

    I truly wanted to make a quick word to be able to appreciate you for some of the great tricks you are showing on this website. My considerable internet lookup has at the end of the day been recognized with good facts and techniques to exchange with my visitors. I would say that we site visitors actually are truly endowed to exist in a fantastic community with very many marvellous professionals with valuable tips. I feel very happy to have seen your webpage and look forward to many more entertaining times reading here. Thanks a lot again for all the details.

  10. As a Newbie, I am constantly browsing online for articles that can aid me. Thank you

  11. I loved as much as you will receive carried out right here. The sketch is attractive, your authored subject matter stylish. nonetheless, you command get got an impatience over that you wish be delivering the following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this increase.

  12. Healthy Diet says:

    I‘¦ll immediately grab your rss as I can not find your email subscription hyperlink or e-newsletter service. Do you’ve any? Kindly allow me realize so that I may just subscribe. Thanks.

  13. Pet Carrier says:

    Good write-up, I‘¦m regular visitor of one‘¦s site, maintain up the excellent operate, and It’s going to be a regular visitor for a long time.

  14. I as well as my buddies happened to be reviewing the great hints found on the blog and then all of the sudden got a horrible feeling I had not expressed respect to the blog owner for those strategies. These young men are actually for this reason stimulated to study them and now have simply been taking pleasure in them. Thank you for being simply accommodating and for obtaining variety of good resources millions of individuals are really eager to be aware of. My honest apologies for not expressing gratitude to earlier.

  15. Dog Food says:

    hello!,I really like your writing very much! percentage we keep up a correspondence extra about your post on AOL? I require an expert on this area to unravel my problem. Maybe that’s you! Looking forward to see you.

  16. There is obviously a bunch to know about this. I believe you made various good points in features also.

  17. As I site possessor I believe the content material here is rattling magnificent , appreciate it for your hard work. You should keep it up forever! Good Luck.

  18. Sunday Danos says:

    What will be your next subject next week in your blog.*:*’-

    • admin says:

      Might be some Jenkins and Ansible, and maybe some more YouTube API, and there’s a Home Wireless network blog posting soon, and some HTML and Javascript games … planned … but things do change as they arise.

  19. Considerably, the actual publish is usually the finest about this deserving topic. I agree together with your outcomes and in addition may excitedly anticipate your potential updates. Basically just stating thank you may not merely you ought to be sufficient, for that amazing quality inside your writing. IÒ€ℒll proper away seize your rss feed to stay up-to-date with any kind of updates. Genuine perform and in addition much achievement inside your enterprise dealings!

  20. When installing Joomla on my computer in order to update a preexisting site, do I need my client to give me the Host Name, MySQL User Name, MySQL Password, MySQL Database NAme and MySQL Table Prefix? I already have their FTP information, and the Joomla admin control panel login information..

  21. Nice post. I learn some thing tougher on distinct blogs everyday. Most commonly it truly is stimulating to learn to read content from other writers and exercise a specific thing there. IÒ€ℒd would rather use some together with the content in my weblog no matter whether you donÒ€ℒt mind. Natually IÒ€ℒll provide you with a link within your internet weblog. Numerous thanks for sharing.

  22. Grady Arcizo says:

    I will invite all my good friends for your website, you truly got a great weblog.~β€β€˜-,

  23. Brilliant post and useful information and facts. I assume this is what I read somewhere but I dont know together with your experience

  24. HOME ADVISOR says:

    hey great web site i will definaely come back and see again.

  25. You can surely see your skills in the function you write. The world hopes for a lot more passionate writers like you who arenÒ€ℒt afraid to say how they believe. At all times follow your heart

  26. Fascinating, but not ideal. Are you going to write much more?

  27. Thank you for your quite good information and feedback from you. car dealers in san jose

  28. Good article and straight to the point. I don’t know if this is actually the best place to ask but do you folks have any ideea where to hire some professional writers? Thx :)

  29. But wanna remark that you have a very nice internet site , I the style and design it actually stands out.

  30. Leia Paris says:

    Some really good blog posts on this internet site , thanks for contribution.

  31. People, I just downloaded some amazing freebies from http://scarab13.com. There are some very cool graphic and web design templates, all done exclusivelly by one of the Elite Envato Authors for goodness of mankind.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>