{"id":45906,"date":"2019-08-07T03:01:02","date_gmt":"2019-08-06T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=45906"},"modified":"2019-08-06T09:54:40","modified_gmt":"2019-08-05T23:54:40","slug":"image-map-with-overlay-svg-glowing-polygon-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-map-with-overlay-svg-glowing-polygon-tutorial\/","title":{"rendered":"Image Map with Overlay SVG Glowing Polygon Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Image Map with Overlay SVG Glowing Polygon Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/aboriginal_language_regions_drop_shadow.jpg\" title=\"Image Map with Overlay SVG Glowing Polygon Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Image Map with Overlay SVG Glowing Polygon Tutorial<\/p><\/div>\n<p>In the &#8220;glowing&#8221; CSS styling work we&#8217;ve been talking about recently, as with yesterday&#8217;s <a title='Multiple Choice Quiz with Glowing Box Tutorial' href='#mcqgbt'>Multiple Choice Quiz with Glowing Box Tutorial<\/a> &#8220;Glowing Box&#8221;, today we have for you &#8230;<\/p>\n<ul>\n<li>HTML image <a target=_blank title='HTML map element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_map.asp'>map<\/a> element &#8230; with &#8230;<\/li>\n<li><a target=_blank title='HTML area information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_area.asp'>area<\/a> shape=&#8221;poly&#8221; (polygon) elements (that represent approximate coverage for Australian Indigenous Language areas in Australia) &#8230; overlaid by &#8230;<\/li>\n<li><a target=_blank title='SVG information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_intro.asp'>SVG<\/a> <a target=_blank title='HTML svg polygon information from w3schools' href='http:\/\/www.w3schools.com\/svg\/svg_polygon.asp'>polygon<\/a> elements (that come into play when an area element is clicked\/touched &#8230; all old news you can read from <a target=_blank title='Australian Indigenous Language SVG Overlay Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/australian-indigenous-language-svg-overlay-tutorial\/'>Australian Indigenous Language SVG Overlay Tutorial<\/a> &#8230; but new today we add &#8230;<\/li>\n<li>&#8220;Glowing Polygon&#8221; animated <a target=_blank title='SVG drop shadow information from w3schools' href='https:\/\/www.w3schools.com\/graphics\/svg_feoffset.asp'>drop shadow<\/a> (and thanks to <a target=_blank title='Great link' href='https:\/\/stackoverflow.com\/questions\/52264094\/add-drop-shadow-to-svg-polygon'>this great link<\/a> for help here) for that SVG polygon as per the new CSS styling &#8230;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\n\/* Thanks to https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text *\/<br \/>\n<br \/>\nsvg {<br \/>\n  font-size: 16px;<br \/>\n  color: #fff;<br \/>\n  text-align: center;<br \/>\n  -webkit-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  -moz-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  animation: glow 1s ease-in-out infinite alternate;<br \/>\n  color: black;<br \/>\n  <i>-webkit-filter: drop-shadow(0 0 5px red);<br \/>\n  filter: drop-shadow(0 0 5px red);<\/i><br \/>\n}<br \/>\n<br \/>\n@-webkit-keyframes glow {<br \/>\n    <i>0% { -webkit-filter: drop-shadow(0 0 5px red); filter: drop-shadow(0 0 5px red); }<br \/>\n    100% { -webkit-filter: drop-shadow(0 0 8px blue); filter: drop-shadow(0 0 8px blue); }<\/i><br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; an effect quite eye-catching as you click\/touch in a language region to find out more.<\/p>\n<p>Perhaps you want to use this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html--------GETME\">changed HTML and Javascript and CSS<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html--------GETME\">aboriginal_language_regions.html<\/a> image map <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/\">live run<\/a> link to see how this plays out in actuality, or to explore a little into the oldest continuous culture on this planet?<\/p>\n<hr>\n<p id='mcqgbt'>Previous relevant <a target=_blank title='Multiple Choice Quiz with Glowing Box Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/multiple-choice-quiz-with-glowing-box-tutorial\/'>Multiple Choice Quiz with Glowing Box Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Multiple Choice Quiz with Glowing Box Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz_gbox.jpg\" title=\"Multiple Choice Quiz with Glowing Box Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Multiple Choice Quiz with Glowing Box Tutorial<\/p><\/div>\n<p>We&#8217;re going from &#8220;Glowing Text&#8221; ideas below, with <a title='HTML5 Mark Tag with Glowing Text Tutorial' href='#html5mtgtt'>HTML5 Mark Tag with Glowing Text Tutorial<\/a>, to &#8220;Glowing Box&#8221; ideas, starting today, that we apply in the context of a Multiple Choice Quiz.<\/p>\n<p>As far as online quizzes go, don&#8217;t know if you agree, but we think our best chance to remember our learning is, particularly regarding incorrect (quiz) answers, to either &#8230;<\/p>\n<ul>\n<li>trap the user with a correct answer with a Javascript popup (eg. alert) window, awaiting the press of a button &#8230; and\/or &#8230;<\/li>\n<li>really &#8220;in your face&#8221; highlighting of the correct answer (particularly in the case of a multiple choice scenario) with attention grabbing (CSS) styling<\/li>\n<\/ul>\n<p> &#8230; and so, for the latter, we queue the new &#8220;Glowing Box&#8221; (CSS) styling, which (to us) is the same as the (brilliant CSS W3schools <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>glowing text idea<\/a>) &#8220;Glowing Text&#8221; styling except where you had &#8220;text-shadow&#8221; in the keyframes section (for &#8220;Glowing Text&#8221;) we use &#8220;box-shadow&#8221;  in that same keyframes section (for &#8220;Glowing Box&#8221;).  We add this onto our previous efforts with <a href='https:\/\/www.rjmprogramming.com.au\/ITblog\/htmljavascript-multiple-choice-quiz-reveal-tutorial\/' title='HTML\/Javascript Multiple Choice Quiz Reveal Tutorial'>HTML\/Javascript Multiple Choice Quiz Reveal Tutorial<\/a>.<\/p>\n<p>With <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html----GETME\" title=\"multiple_choice_quiz.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html----GETME\" title=\"multiple_choice_quiz.html\">multiple_choice_quiz.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/multiple_choice_quiz.html\" title=\"Click picture\">live run<\/a> link, you can try out the new CSS &#8220;Glowing Box&#8221;, <b>as per<\/b> &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\n\/* Thanks to https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text *\/<br \/>\n<br \/>\n.glow {<br \/>\n  font-size: 16px;<br \/>\n  color: #fff;<br \/>\n  text-align: center;<br \/>\n  -webkit-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  -moz-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  animation: glow 1s ease-in-out infinite alternate;<br \/>\n  color: black;<br \/>\n}<br \/>\n<br \/>\n@-webkit-keyframes glow {<br \/>\n  from {<br \/>\n    <b>box-shadow<\/b>: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    <b>box-shadow<\/b>: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;<br \/>\n  }<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; overlaying correct Multiple Choice (set) answers with a very compelling (div &#8220;box&#8221; 3D looking) display.<\/p>\n<hr>\n<p id='html5mtgtt'>Previous relevant <a target=_blank title='HTML5 Mark Tag with Glowing Text Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-with-glowing-text-tutorial\/'>HTML5 Mark Tag with Glowing Text Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML5 Mark Tag with Glowing Text Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit_glow.jpg\" title=\"HTML5 Mark Tag with Glowing Text Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Mark Tag with Glowing Text Tutorial<\/p><\/div>\n<p>To get the background to our attention seeking &#8220;mark&#8221; tag &#8220;glowing text&#8221; application please read &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML5 Mark Tag Div Contenteditable Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-mark-tag-div-contenteditable-tutorial\/'>HTML5 Mark Tag Div Contenteditable Tutorial<\/a> &#8230; along with &#8230;<\/li>\n<li><a title='Glowing Text Validation Primer Tutorial' href='#gtvpt'>Glowing Text Validation Primer Tutorial<\/a>&#8216;s thread of blog postings below inspired by the CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a><\/li>\n<\/ul>\n<p> &#8230; today&#8217;s use quite apt for this &#8220;mark&#8221; tag&#8217;s text highlighting talent.  It&#8217;s default highlighting is a strong yellow background colour, but you can apply this &#8220;glowing text&#8221; CSS class to achieve a more &#8220;in your face result&#8221;, which you can try (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html-GETME\">markit.html<\/a>&#8216;s) <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html\">live run<\/a> link &#8230; or below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/markit.html\" style=\"width:100%;height:450px;\"><\/iframe><\/p>\n<p> &#8230; yourself, to see what the effect is of &#8220;mark highlighting&#8221; and &#8220;glowing text&#8221;.<\/p>\n<hr>\n<p id='gtvpt'>Previous relevant <a target=_blank title='Glowing Text Validation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/glowing-text-validation-primer-tutorial\/'>Glowing Text Validation Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/glowing_text_validation.jpg\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Glowing Text Validation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/glowing_text_validation.jpg\" title=\"Glowing Text Validation Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Glowing Text Validation Primer Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s application of the use of CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a> with <a title='Shooting Star Game Primer Tutorial' href='#ssgpt'>Shooting Star Game Primer Tutorial<\/a> was just one idea regarding the use of glowing text.  What about using it with form validation?<\/p>\n<p>Yes, that&#8217;s &#8220;a goer&#8221; <font size=1>&#8230; see, even the pamplettes are nodding<\/font>.  The reason, of course, is that glowing text is a mechanism whereby you can grab the attention of even the most blas\u00e9 of online users.  And especially if the field you are &#8220;form validating&#8221; is mission critical, this could be a good ploy.<\/p>\n<p>See how we apply this (by making mistakes filling in the forms) with &#8230;<\/p>\n<ul>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html--GETME\" title=\"\/HTMLCSS\/html5_form_constraint_validation.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html--GETME\" title=\"\/HTMLCSS\/html5_form_constraint_validation.html\">html5_form_constraint_validation.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/html5_form_constraint_validation.html\" title=\"Click picture\">live run<\/a> as featured on <a target=_blank title='HTML5 Form API Validation Revisit Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-form-api-validation-revisit-tutorial\/'>HTML5 Form API Validation Revisit Tutorial<\/a><\/li>\n<li><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html-GETME\">oninvalid.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/oninvalid.html\" title=\"Click picture\">live run<\/a> as featured on <a target=_blank title='\"HTML Oninvalid Event Form Validation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-oninvalid-event-form-validation-primer-tutorial\/'>HTML Oninvalid Event Form Validation Primer Tutorial<\/a><\/li>\n<\/ul>\n<hr>\n<p id='ssgpt'>Previous relevant <a target=_blank title='Shooting Star Game Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/shooting-star-game-primer-tutorial\/'>Shooting Star Game Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Shooting Star Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.jpg\" title=\"Shooting Star Game Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Shooting Star Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve got one of those pretty simple &#8220;click &#8217;em up&#8221; games for you today, inspired by the CSS brilliance of <a target=_blank title='W3schools glowing text information' href='https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text'>W3School&#8217;s glowing text idea<\/a>, thanks.<\/p>\n<p>That set us to thinking of Emojis we could apply (in front of the great background ideas derived from this advice) and looked up <a target=_blank title='Emojipedia' href='http:\/\/www.emojipedia.org'>Emojipedia<\/a> (is good for looking up Emoji names or concepts in words) and onto <a target=_blank title='FileFormation Information website' href='http:\/\/www.fileformat.info'>FileFormat Information<\/a> (is great for HTML Entity determinations for your less complex Emojis) and even <a target=_blank title='Iemoji website' href='http:\/\/www.iemoji.com'>Iemoji<\/a> (is great for HTML Entity determinations for Emojis of all complexities) to determine some components to our game, those being &#8230;<\/p>\n<ul>\n<li>&#127775; &#8230; star<\/li>\n<li>&#9732;&#65039; &#8230; comet<\/li>\n<li>&#127765; &#8230; moon<\/li>\n<\/ul>\n<p> &#8230; which, in turn, led to thoughts regarding a game &#8230;<\/p>\n<ul>\n<li>for one player<\/li>\n<li>that rewards fast reflexes &#8230; and &#8230;<\/li>\n<li>scores via onclick event logic on each component<\/li>\n<li>according to levels of difficulty &#8230; and &#8230;<\/li>\n<li>lessens the score for &#8220;blazing away&#8221; clicks (or touches) &#8230; for that, if a player score is (made up of) <i>score\/goes<\/i> then &#8220;goes&#8221; is incremented by any document.body onclick event during the game<\/li>\n<\/ul>\n<p>Levels of difficulty &#8230; pour quoi?  Well, we can change the &#8230;<\/p>\n<ul>\n<li>Emoji font-size &#8230; and\/or &#8230;<\/li>\n<li>Movement potential of emoji (in pixels) in any &#8220;setTimeout(movecomponents, 100);&#8221; <sup>1<\/sup>\/<sub>10<\/sub>th of a second call cycle<\/li>\n<\/ul>\n<p>Have a go of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.html_GETME\">shooting_star_game.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/shooting_star_game.html\" title=\"Click picture\">game<\/a> if you like, to see this in action.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45778' onclick='var dv=document.getElementById(\"d45778\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45778' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45813' onclick='var dv=document.getElementById(\"d45813\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/validation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45813' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45850' onclick='var dv=document.getElementById(\"d45850\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mark\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45850' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45895' onclick='var dv=document.getElementById(\"d45895\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/quiz\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45895' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d45906' onclick='var dv=document.getElementById(\"d45906\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/svg\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d45906' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In the &#8220;glowing&#8221; CSS styling work we&#8217;ve been talking about recently, as with yesterday&#8217;s Multiple Choice Quiz with Glowing Box Tutorial &#8220;Glowing Box&#8221;, today we have for you &#8230; HTML image map element &#8230; with &#8230; area shape=&#8221;poly&#8221; (polygon) elements &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/image-map-with-overlay-svg-glowing-polygon-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[46,2566,281,342,1833,3030,3029,2349,576,592,745,1717,997,1022,1209,1212,1226,2567,1319],"class_list":["post-45906","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-3d","tag-box-shadow","tag-css","tag-div","tag-drop-shadow","tag-glow","tag-glowing-box","tag-highlight","tag-html","tag-image-map","tag-map","tag-multiple-choice","tag-programming","tag-quiz","tag-style","tag-styling","tag-svg","tag-text-shadow","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45906"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=45906"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45906\/revisions"}],"predecessor-version":[{"id":45910,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/45906\/revisions\/45910"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=45906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=45906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=45906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}