{"id":59638,"date":"2023-06-07T03:01:23","date_gmt":"2023-06-06T17:01:23","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=59638"},"modified":"2023-06-06T14:11:10","modified_gmt":"2023-06-06T04:11:10","slug":"dropdown-image-no-map-ideas-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/dropdown-image-no-map-ideas-tutorial\/","title":{"rendered":"Dropdown Image No Map Ideas Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dropdown Image No Map Ideas Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices_no_map.jpg\" title=\"Dropdown Image No Map Ideas Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Dropdown Image No Map Ideas Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Dropdown Image Dimensions Idea Tutorial' href='#didit'>Dropdown Image Dimensions Idea Tutorial<\/a> continued the trend of our &#8230;<\/p>\n<ul>\n<li>dropdown image backgrounder uses image map data from <a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> &#8230; and today we extend that data scope to &#8230;<\/li>\n<li>dropdown image backgrounder uses image data not involving image maps from <a target=_blank title='Wikipedia ... thanks' href='http:\/\/wikipedia.org'>Wikipedia<\/a> &#8230; in two scenarios, so far, that we have identified &#8230;\n<ol>\n<li>one image with one caption within a specific table class (eg. <a target=_blank title='Wikipedia ... thanks' href='http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php?noun=Amphibian'>Amphibian<\/a>)<\/li>\n<li>one image for clockwise captions within a specific table class (eg. <a target=_blank title='Wikipedia ... thanks' href='http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php?noun=Marsupial'>Marsupial<\/a>)<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php---GETME\">dropdown_thumbnail_image_choices.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php\">biology Quiz<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/dropdown-image-no-map-ideas-tutorial\/'>Dropdown Image No Map Ideas Tutorial<\/a>.<\/p-->\n<hr>\n<p id='didit'>Previous relevant <a target=_blank title='Dropdown Image Dimensions Idea Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/dropdown-image-dimensions-idea-tutorial\/'>Dropdown Image Dimensions Idea Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dropdown Image Idea Map Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices_resize.jpg\" title=\"Dropdown Image Dimensions Idea Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Dropdown Image Dimensions Idea Tutorial<\/p><\/div>\n<p>Thumbnail images are all well and good, but for web applications, such as our quiz one, that might benefit from scrutiny of images, in the recent <a title='Dropdown Image Idea Map Genericization Tutorial' href='#diimgt'>Dropdown Image Idea Map Genericization Tutorial<\/a>, it would be good to offer the user some control over the size of the images in their biology themed Quiz.<\/p>\n<p>We want to funnel this <i>ask<\/i> through a Javascript window.prompt scenario, given it is optional functionality, and we think it is over the top to dedicate one or two textboxes to the asking of &#8230;<\/p>\n<ul>\n<li>image display width &#8230; and &#8230;<\/li>\n<li>image display height<\/li>\n<\/ul>\n<p> &#8230; dimensions.  And then, as far as the arrangements go to make use of these collected user settings go, we just start using GET URL arguments for <i>width<\/i><sub>=<\/sub> and <i>height<\/i><sub>=<\/sub> respectively &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  $three=\"3\"; \/\/ number of image map columns<br \/>\n  $six=\"6\"; \/\/ number of image map rows<br \/>\n  $restl=\"calc(50% - 600px)\";<br \/>\n  $onehundred=\"100\";<br \/>\n  $seventy=\"70\";<br \/>\n  if (isset($_GET['width'])) {<br \/>\n    $onehundred=str_replace('+','_',urldecode($_GET['width']));<br \/>\n    $restl=\"\" . (20 + $onehundred) . \"px\";<br \/>\n  } else if (isset($_POST['width'])) {<br \/>\n    $onehundred=str_replace('+','_',urldecode($_POST['width']));<br \/>\n    $restl=\"\" . (20 + $onehundred) . \"px\";<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; in the pure PHP initializations.  Then up the top of the PHP written Javascript we now have &#8230;<\/p>\n<p><code><br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n  var tw=&lt;?php echo ($onehundred * $three); ?&gt;, lw=&lt;?php echo $onehundred; ?&gt;;<br \/>\n  var th=&lt;?php echo ($seventy * $six); ?&gt;, lh=&lt;?php echo $seventy; ?&gt;;<br \/>\n\/\/<br \/>\n<\/code><\/p>\n<p> &#8230; and then establishing the size of the HTML canvas element &#8230;<\/p>\n<p><code><br \/>\n&lt;canvas id=mycanvas width=&lt;?php echo $onehundred; ?&gt; height=&lt;?php echo $seventy; ?&gt; style=display:none;&gt;&lt;\/canvas&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and referenced a lot in the document.body onload event &#8220;postoverlay&#8221; Javascript function below &#8230;<\/p>\n<p><code><br \/>\n  function postoverlay() {<br \/>\n   var lgbegin='linear-gradient(0deg, #ffffff 10%, rgba(255,255,0,0.6) 20%, rgba(192,192,192,0.6) 31%, rgba(255,215,0,0.6) 42%, rgba(211,211,211,0.6) 53%, rgba(255,165,0,0.6) 63%, rgba(224,255,255,0.6) 74%, rgba(254,254,254,0.6) 85%, #CC7722 100%),linear-gradient(to right,yellow,pink),';<br \/>\n   var delim='', topp=0, hinc=0;;<br \/>\n   var proposeds='&lt;style&gt; #tf { background-image:  ; background-position:   ; background-size:    ; background-repeat:     ; } &lt;\/style&gt;';<br \/>\n   var rect=document.getElementById('schoices').getBoundingClientRect();<br \/>\n   var optsare=document.getElementsByTagName('option');<br \/>\n   \/\/var rectrtd=document.getElementById('rtd').getBoundingClientRect();<br \/>\n<br \/> <br \/>\n   if (eval('' + rect.height) &gt; 100 || 1 == 1) {<br \/>\n<br \/> <br \/>\n   document.getElementById('schoices').style.backgroundColor='transparent';<br \/>\n   document.getElementById('tf').style.position='absolute';<br \/>\n   document.getElementById('tf').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('tf').style.top='' + rect.top + 'px';<br \/>\n<br \/>\n   document.getElementById('tf').style.width='' + rect.width + 'px';<br \/>\n   if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n   \/\/document.getElementById('tf').style.width='' + tw + 'px';<br \/>\n   document.getElementById('tf').style.height='' + th + 'px';<br \/>\n   } else {<br \/>\n   document.getElementById('tf').style.height='' + rect.height + 'px';<br \/>\n   }<br \/>\n<br \/>\n   document.getElementById('schoices').style.position='absolute';<br \/>\n   document.getElementById('schoices').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('schoices').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('schoices').style.width='' + rect.width + 'px';<br \/>\n   if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n   document.getElementById('schoices').style.height='' + th + 'px';<br \/>\n   document.getElementById('schoices').style.display='none';<br \/>\n   } else {<br \/>\n   document.getElementById('schoices').style.height='' + rect.height + 'px';<br \/>\n   }<br \/>\n<br \/> <br \/>\n   \/\/document.getElementById('rtd').style.position='absolute';<br \/>\n   \/\/document.getElementById('rtd').style.left='' + rectrtd.left + 'px';<br \/>\n   \/\/document.getElementById('rtd').style.top='' + rectrtd.top + 'px';<br \/>\n   \/\/document.getElementById('rtd').style.width='' + rectrtd.width + 'px';<br \/>\n   \/\/document.getElementById('rtd').style.height='' + rectrtd.height + 'px';<br \/>\n<br \/>\n   \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/49660659\/css-gradients-inside-gradients<br \/>\n   \/\/document.getElementById('tf').style.background='linear-gradient(0deg, #ffffff 10%, rgba(255,255,0,0.6) 20%, rgba(192,192,192,0.6) 31%, rgba(255,215,0,0.6) 42%, rgba(211,211,211,0.6) 53%, rgba(255,165,0,0.6) 63%, rgba(224,255,255,0.6) 74%, rgba(254,254,254,0.6) 85%, #CC7722 100%), linear-gradient( to right, yellow, pink )'; \/\/ #fcfafc #f9f6f8 #f8f1f3<br \/>\n   document.getElementById('tf').style.zIndex='-1';<br \/>\n   topp=rect.top;<br \/>\n   \/\/alert('rect.height=' + rect.height);<br \/>\n   lgbegin='';<br \/>\n<br \/>\n   for (var ii=0; ii&lt;eval('' + document.getElementById('schoices').size); ii++) {<br \/>\n    if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n     document.getElementById('tf').style.zIndex='88';<br \/>\n     document.getElementById('tf').setAttribute('contenteditable',false);<br \/>\n     hinc=Math.round(eval(rect.height \/ eval('' + document.getElementById('schoices').size)));<br \/>\n     document.getElementById('tf').innerHTML+='&lt;img style=\"position:absolute;z-index:89;left:' + rect.left + 'px;top:' + topp + 'px;width:' + rect.width + 'px;height:' + Math.round(eval(rect.height \/ eval('' + document.getElementById('schoices').size))) + 'px;\" src=\"' + imguris[randlist[ii]] + '\" data-answer=\"' + \"\" + blurbs[randlist[ii]] + \"\" + '\" onclick=\" process(' + \"'\" + blurbs[randlist[ii]] + \"',this)\" + '; \"&gt;&lt;\/img&gt;';<br \/>\n     if (1 == 11) {<br \/>\n     topp+=hinc;<br \/>\n     } else {<br \/>\n     topp+=eval(rect.height \/ eval('' + document.getElementById('schoices').size));<br \/>\n     }<br \/>\n    } else {<br \/>\n     hinc=eval('' + optsare[ii].style.height);<br \/>\n     proposeds=proposeds.replace('  ;', delim + lgbegin + \"url('\" + imguris[randlist[ii]] + \"')\" + '  ;');<br \/>\n     proposeds=proposeds.replace('   ;', delim + rect.left + 'px ' + topp + 'px'  + '   ;');<br \/>\n     if (1 == 11) {<br \/>\n     proposeds=proposeds.replace('    ;', delim + rect.width + 'px ' + hinc + 'px' + '    ;');<br \/>\n     } else if (1 == 1) {<br \/>\n     proposeds=proposeds.replace('    ;', delim + '&lt;?php echo $onehundred; ?&gt;' + 'px    ;'); \/\/ contain<br \/>\n     } else {<br \/>\n     proposeds=proposeds.replace('    ;', delim + rect.width + 'px ' + Math.round(eval(rect.height \/ eval('' + document.getElementById('schoices').size))) + 'px' + '    ;');<br \/>\n     }<br \/>\n     proposeds=proposeds.replace('     ;', delim + 'no-repeat' + '     ;');<br \/>\n     delim=',';<br \/>\n     if (1 == 11) {<br \/>\n     topp+=hinc;<br \/>\n     } else {<br \/>\n     topp+=eval(rect.height \/ eval('' + document.getElementById('schoices').size));<br \/>\n     }<br \/>\n    }<br \/>\n   }<br \/>\n<br \/>\n   document.getElementById('dstyle').innerHTML=proposeds.replace(\"&lt;\/stXyle&gt;\", \" option::before { content: '' !important; } &lt;\/style&gt;\");<br \/>\n<br \/>\n   }<br \/>\n<br \/> <br \/>\n  }<br \/>\n<\/code> <\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php--GETME\">dropdown_thumbnail_image_choices.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php\">biology Quiz<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/dropdown-image-dimensions-idea-tutorial\/'>Dropdown Image Dimensions Idea Tutorial<\/a>.<\/p-->\n<hr>\n<p id='diimgt'>Previous relevant <a target=_blank title='Dropdown Image Idea Map Genericization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/dropdown-image-idea-map-genericization-tutorial\/'>Dropdown Image Idea Map Genericization Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dropdown Image Idea Map Genericization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices_genericize.jpg\" title=\"Dropdown Image Idea Map Genericization Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Dropdown Image Idea Map Genericization Tutorial<\/p><\/div>\n<p>There is a <i>certain level<\/i> of genericization we can apply to yesterday&#8217;s <a title='Dropdown Image Idea Primer Tutorial' href='#diipt'>Dropdown Image Idea Primer Tutorial<\/a>&#8216;s Bird Quiz &#8220;proof of concept&#8221; start, to begin to extend its functionality, today.<\/p>\n<p>We say &#8220;<i>certain level<\/i>&#8221; because Wikipedia content is written by a myriad of expert Wiki Page Writers out there, thanks one and all.  There are <a target=_blank title=' ... though ... some' href='https:\/\/en.wikipedia.org\/wiki\/Wikipedia:How_to_create_a_page'>not hard and fast rules<\/a> about how that content is formed, any more than the content here, in this <a target=_blank title='WordPress blog' href='\/\/wordpress.org'>WordPress<\/a> blog, is presented, and appears as a webpage before your very <font size=1>(yes, very)<\/font> eyes!  But, there can be patterns, and in this biology field of content, we&#8217;ve noticed, our biology images can often be presented in the form &#8230;<\/p>\n<ul>\n<li>HTML image map element contains the answer data we need for our current (biology) quiz project &#8230; and &#8230;<\/li>\n<li>HTML img element accompanying that image map element can contain the base graphics we need<\/li>\n<\/ul>\n<p> &#8230; to derive data URI image thumbnails via an inhouse canvas element&#8217;s talents regarding &#8230;<\/p>\n<p><code><br \/>\n  function canvasize() {<br \/>\n   document.getElementById('schoices').title='Quiz';<br \/>\n   if (document.getElementById('snoun').outerHTML.indexOf('&gt;' + '&lt;?php echo $suffix; ?&gt;' + '&lt;') == -1) {<br \/>\n     document.getElementById('snoun').innerHTML+='&lt;option value=\"&lt;?php echo $suffix; ?&gt;  \"&gt;&lt;?php echo $suffix; ?&gt;&lt;\/option&gt;';<br \/>\n   }<br \/>\n   document.getElementById('snoun').value='&lt;?php echo $suffix; ?&gt;  ';<br \/>\n   elem=document.getElementById('mycanvas');<br \/>\n   context = elem.getContext('2d');<br \/>\n   var cs=wikiblurbthanks.split(' coords=\"');<br \/>\n   var bs=wikiblurbthanks.split(' alt=\"');<br \/>\n   for (var kk=1; kk&lt;bs.length; kk++) {<br \/>\n     blurbs.push(bs[kk].split('\"')[0]);<br \/>\n     if (kk == 1) {<br \/>\n       if (cs[1].indexOf('0,') == 0 && cs[2].indexOf('0,') == 0) {<br \/>\n          yfirst=true;<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   console.log(blurbs);<br \/>\n   \/\/alert('blurbs length=' + blurbs.length);<br \/>\n   var cimg=new Image();<br \/>\n   cimg.onload = function(){<br \/>\n   var ourlw=eval(cimg.width \/ &lt;?php echo $three; ?&gt;);<br \/>\n   var ourlh=eval(cimg.height \/ &lt;?php echo $six; ?&gt;);<br \/>\n   if (yfirst) {<br \/>\n   for (var ii=0; ii&lt;&lt;?php echo $three; ?&gt;; ii++) {<br \/>\n   for (var jj=0; jj&lt;&lt;?php echo $six; ?&gt;; jj++) {<br \/>\n     context.clearRect(0,0,elem.width,elem.height);<br \/>\n     context.drawImage(cimg,eval(ii * ourlw),eval(jj * ourlh),ourlw,ourlh,0,0,elem.width,elem.height);<br \/>\n     imguris.push(elem.toDataURL('image\/png'));<br \/>\n     console.log('here');<br \/>\n   }<br \/>\n   }<br \/>\n   } else {<br \/>\n   for (var jj=0; jj&lt;&lt;?php echo $six; ?&gt;; jj++) {<br \/>\n   for (var ii=0; ii&lt;&lt;?php echo $three; ?&gt;; ii++) {<br \/>\n     context.clearRect(0,0,elem.width,elem.height);<br \/>\n     context.drawImage(cimg,eval(ii * ourlw),eval(jj * ourlh),ourlw,ourlh,0,0,elem.width,elem.height);<br \/>\n     imguris.push(elem.toDataURL('image\/png'));<br \/>\n     console.log('here');<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n   overlay();<br \/>\n   };<br \/>\n   cimg.src='&lt;?php echo 'data:image\/' . str_replace('jpg','jpeg',strtolower(explode('.', explode('#', explode('?', $wurl)[0])[0])[-1 + sizeof(explode('.', explode('#', explode('?', $wurl)[0])[0]))])) . ';base64,' . base64_encode(file_get_contents($wurl)) ?&gt;';<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; slicing and dicing of imagery.  If <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php-GETME\">you&#8217;d have looked yesterday at this Javascript function<\/a> you&#8217;d have seen much less PHP interventional code, and this increased &#8220;intervention&#8221; forms the basis for our &#8220;genericization drive&#8221; today, where we identify tasks that PHP can help with in that initial phase &#8230; <\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  $three=\"3\";<br \/>\n  $six=\"6\";<br \/>\n  $wurl='http:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/b\/bf\/Bird_Diversity_2013.png\/300px-Bird_Diversity_2013.png';<br \/>\n  $suffix=\"Bird\";<br \/>\n  $mapdata='&lt;map name=\"ImageMap_fbc6cc846e0ab4e8\"&gt;&lt;area href=\"\/wiki\/Red-crested_turaco\" shape=\"rect\" coords=\"0,0,100,70\" alt=\"Red-crested turaco\" title=\"Red-crested turaco\" \/&gt;&lt;area href=\"\/wiki\/Steller%27s_sea_eagle\" shape=\"rect\" coords=\"0,70,100,141\" alt=\"Steller' . \"'\" . 's sea eagle\" title=\"Steller' . \"'\" . 's sea eagle\" \/&gt;&lt;area href=\"\/wiki\/Rock_dove\" shape=\"rect\" coords=\"0,209,100,141\" alt=\"Rock dove\" title=\"Rock dove\" \/&gt;&lt;area href=\"\/wiki\/Southern_cassowary\" shape=\"rect\" coords=\"0,279,100,210\" alt=\"Southern cassowary\" title=\"Southern cassowary\" \/&gt;&lt;area href=\"\/wiki\/Gentoo_penguin\" shape=\"rect\" coords=\"0,348,100,279\" alt=\"Gentoo penguin\" title=\"Gentoo penguin\" \/&gt;&lt;area href=\"\/wiki\/Bar-throated_minla\" shape=\"rect\" coords=\"0,418,100,348\" alt=\"Bar-throated minla\" title=\"Bar-throated minla\" \/&gt;&lt;area href=\"\/wiki\/Shoebill\" shape=\"rect\" coords=\"200,0,100,70\" alt=\"Shoebill\" title=\"Shoebill\" \/&gt;&lt;area href=\"\/wiki\/Grey_crowned_crane\" shape=\"rect\" coords=\"200,70,100,141\" alt=\"Grey crowned crane\" title=\"Grey crowned crane\" \/&gt;&lt;area href=\"\/wiki\/Anna%27s_hummingbird\" shape=\"rect\" coords=\"200,209,100,141\" alt=\"Anna' . \"'\" . 's hummingbird\" title=\"Anna' . \"'\" . 's hummingbird\" \/&gt;&lt;area href=\"\/wiki\/Rainbow_lorikeet\" shape=\"rect\" coords=\"200,279,100,210\" alt=\"Rainbow lorikeet\" title=\"Rainbow lorikeet\" \/&gt;&lt;area href=\"\/wiki\/Grey_heron\" shape=\"rect\" coords=\"200,348,100,279\" alt=\"Grey heron\" title=\"Grey heron\" \/&gt;&lt;area href=\"\/wiki\/Eurasian_eagle-owl\" shape=\"rect\" coords=\"200,418,100,348\" alt=\"Eurasian eagle-owl\" title=\"Eurasian eagle-owl\" \/&gt;&lt;area href=\"\/wiki\/White-tailed_tropicbird\" shape=\"rect\" coords=\"300,0,200,70\" alt=\"White-tailed tropicbird\" title=\"White-tailed tropicbird\" \/&gt;&lt;area href=\"\/wiki\/Indian_peafowl\" shape=\"rect\" coords=\"300,70,200,141\" alt=\"Indian peafowl\" title=\"Indian peafowl\" \/&gt;&lt;area href=\"\/wiki\/Atlantic_puffin\" shape=\"rect\" coords=\"300,209,200,141\" alt=\"Atlantic puffin\" title=\"Atlantic puffin\" \/&gt;&lt;area href=\"\/wiki\/American_flamingo\" shape=\"rect\" coords=\"300,279,200,210\" alt=\"American flamingo\" title=\"American flamingo\" \/&gt;&lt;area href=\"\/wiki\/Blue-footed_booby\" shape=\"rect\" coords=\"300,348,200,279\" alt=\"Blue-footed booby\" title=\"Blue-footed booby\" \/&gt;&lt;area href=\"\/wiki\/Keel-billed_toucan\" shape=\"rect\" coords=\"300,418,200,348\" alt=\"Keel-billed toucan\" title=\"Keel-billed toucan\" \/&gt;&lt;\/map&gt;';<br \/>\n  if (isset($_GET['noun'])) {<br \/>\n    $suffix=str_replace('+','_',urldecode($_GET['noun']));<br \/>\n  } else if (isset($_POST['noun'])) {<br \/>\n    $suffix=str_replace('+','_',urldecode($_POST['noun']));<br \/>\n  }<br \/>\n  $content=file_get_contents('https:\/\/en.wikipedia.org\/wiki\/' . urlencode($suffix));<br \/>\n  $mapbits=explode('&lt;\/map&gt;', $content);<br \/>\n  if (sizeof($mapbits) &gt; 1) {<br \/>\n      $imgbits=explode('&lt;img ', $mapbits[1]);<br \/>\n      $mapdata=str_replace(\"'\", \"' + \\\"'\\\" + '\", '&lt;map ' . explode('&lt;map ', $mapbits[0])[1] . '&lt;\/map&gt;');<br \/>\n      $optcount=(-1 + sizeof(explode('&lt;area', $mapdata)));<br \/>\n      $six=floor($optcount \/ 3);<br \/>\n      if (sizeof($imgbits) &gt; 1) {<br \/>\n        if (strpos($imgbits[1], ' src=\"') !== false) {<br \/>\n           $wurl='http:\/\/' . explode('\/\/', explode('\"', explode(' src=\"', $imgbits[1])[1])[0])[1];<br \/>\n        }<br \/>\n      }<br \/>\n  } else {<br \/>\n      $suffix=\"Bird\";<br \/>\n      $mapdata='&lt;map name=\"ImageMap_fbc6cc846e0ab4e8\"&gt;&lt;area href=\"\/wiki\/Red-crested_turaco\" shape=\"rect\" coords=\"0,0,100,70\" alt=\"Red-crested turaco\" title=\"Red-crested turaco\" \/&gt;&lt;area href=\"\/wiki\/Steller%27s_sea_eagle\" shape=\"rect\" coords=\"0,70,100,141\" alt=\"Steller' . \"'\" . 's sea eagle\" title=\"Steller' . \"'\" . 's sea eagle\" \/&gt;&lt;area href=\"\/wiki\/Rock_dove\" shape=\"rect\" coords=\"0,209,100,141\" alt=\"Rock dove\" title=\"Rock dove\" \/&gt;&lt;area href=\"\/wiki\/Southern_cassowary\" shape=\"rect\" coords=\"0,279,100,210\" alt=\"Southern cassowary\" title=\"Southern cassowary\" \/&gt;&lt;area href=\"\/wiki\/Gentoo_penguin\" shape=\"rect\" coords=\"0,348,100,279\" alt=\"Gentoo penguin\" title=\"Gentoo penguin\" \/&gt;&lt;area href=\"\/wiki\/Bar-throated_minla\" shape=\"rect\" coords=\"0,418,100,348\" alt=\"Bar-throated minla\" title=\"Bar-throated minla\" \/&gt;&lt;area href=\"\/wiki\/Shoebill\" shape=\"rect\" coords=\"200,0,100,70\" alt=\"Shoebill\" title=\"Shoebill\" \/&gt;&lt;area href=\"\/wiki\/Grey_crowned_crane\" shape=\"rect\" coords=\"200,70,100,141\" alt=\"Grey crowned crane\" title=\"Grey crowned crane\" \/&gt;&lt;area href=\"\/wiki\/Anna%27s_hummingbird\" shape=\"rect\" coords=\"200,209,100,141\" alt=\"Anna' . \"'\" . 's hummingbird\" title=\"Anna' . \"'\" . 's hummingbird\" \/&gt;&lt;area href=\"\/wiki\/Rainbow_lorikeet\" shape=\"rect\" coords=\"200,279,100,210\" alt=\"Rainbow lorikeet\" title=\"Rainbow lorikeet\" \/&gt;&lt;area href=\"\/wiki\/Grey_heron\" shape=\"rect\" coords=\"200,348,100,279\" alt=\"Grey heron\" title=\"Grey heron\" \/&gt;&lt;area href=\"\/wiki\/Eurasian_eagle-owl\" shape=\"rect\" coords=\"200,418,100,348\" alt=\"Eurasian eagle-owl\" title=\"Eurasian eagle-owl\" \/&gt;&lt;area href=\"\/wiki\/White-tailed_tropicbird\" shape=\"rect\" coords=\"300,0,200,70\" alt=\"White-tailed tropicbird\" title=\"White-tailed tropicbird\" \/&gt;&lt;area href=\"\/wiki\/Indian_peafowl\" shape=\"rect\" coords=\"300,70,200,141\" alt=\"Indian peafowl\" title=\"Indian peafowl\" \/&gt;&lt;area href=\"\/wiki\/Atlantic_puffin\" shape=\"rect\" coords=\"300,209,200,141\" alt=\"Atlantic puffin\" title=\"Atlantic puffin\" \/&gt;&lt;area href=\"\/wiki\/American_flamingo\" shape=\"rect\" coords=\"300,279,200,210\" alt=\"American flamingo\" title=\"American flamingo\" \/&gt;&lt;area href=\"\/wiki\/Blue-footed_booby\" shape=\"rect\" coords=\"300,348,200,279\" alt=\"Blue-footed booby\" title=\"Blue-footed booby\" \/&gt;&lt;area href=\"\/wiki\/Keel-billed_toucan\" shape=\"rect\" coords=\"300,418,200,348\" alt=\"Keel-billed toucan\" title=\"Keel-billed toucan\" \/&gt;&lt;\/map&gt;';<br \/>\n  $content=file_get_contents('https:\/\/en.wikipedia.org\/wiki\/' . urlencode($suffix));<br \/>\n  $mapbits=explode('&lt;\/map&gt;', $content);<br \/>\n  if (sizeof($mapbits) &gt; 1) {<br \/>\n      $imgbits=explode('&lt;img ', $mapbits[1]);<br \/>\n      $mapdata=str_replace(\"'\", \"' + \\\"'\\\" + '\", '&lt;map ' . explode('&lt;map ', $mapbits[0])[1] . '&lt;\/map&gt;');<br \/>\n      $optcount=(-1 + sizeof(explode('&lt;area', $mapdata)));<br \/>\n      $six=floor($optcount \/ 3);<br \/>\n      if (sizeof($imgbits) &gt; 1) {<br \/>\n        if (strpos($imgbits[1], ' src=\"') !== false) {<br \/>\n           $wurl='http:\/\/' . explode('\/\/', explode('\"', explode(' src=\"', $imgbits[1])[1])[0])[1];<br \/>\n        }<br \/>\n      }<br \/>\n  }<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; and use them, rather than hardcodings, where we see those hardcodings that used to just involve our guinea pig project topic, &#8220;Birds&#8221;, in the context of a quiz, so we now offer dropdown selectable &#8230;<\/p>\n<ul>\n<li>Bird<\/li>\n<li>Mammal<\/li>\n<p><!--li>Reptile<\/li-->\n<li>Insect<\/li>\n<\/ul>\n<p> &#8230; (biology) quiz options with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php-GETME\">our new incarnation of dropdown_thumbnail_image_choices.php<\/a> you can still <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php\" title=\"Click picture\">try for yourself<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/dropdown-image-idea-map-genericization-tutorial\/'>Dropdown Image Idea Map Genericization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='diipt'>Previous relevant <a target=_blank title='Dropdown Image Idea Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/dropdown-image-idea-primer-tutorial\/'>Dropdown Image Idea 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\/PHP\/dropdown_thumbnail_image_choices.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Dropdown Image Idea Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.jpg\" title=\"Dropdown Image Idea Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Dropdown Image Idea Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve long mused about the idea that an HTML select (ie. dropdown) element can have images as a background.  Well, we&#8217;re here to tell you that a dropdown element on its own is not capable of this, it being an element associated with operating system functionality.  But we can &#8230;<\/p>\n<ul>\n<li>overlay &#8230; or &#8230;<\/li>\n<li>underlay &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=zOvyRjVQLjE'><font size=1>arriba! (sorry, folks!)<\/font><\/a><\/li>\n<\/ul>\n<p> &#8230; and the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-dropdown-linear-gradient-tutorial\/' title='https:\/\/www.rjmprogramming.com.au\/ITblog\/ffmpeg-and-pandoc-and-imagemagick-and-pdfimages-dropdown-linear-gradient-tutorial\/'>Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial<\/a> got us interested in &#8230;<\/p>\n<ul>\n<li>dropdown background transparency &#8230; combined with &#8230;<\/li>\n<li>underlaid, precisely, div z-index smaller<\/li>\n<\/ul>\n<p> &#8230; and what&#8217;s to stop us setting a multiple background image arrangement for the div element above?   <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Anyone? Anyone?<\/a> Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Aristotle'>Aristotle<\/a>, it is clearly self-evident that an earthquake might stop us, yes, or an anti-clockwise hurricane, perhaps, yes &#8230; but you do realize our class is taking place in the Blue Mountains, near Sydney, Australia<a target=_blank title='?' href='https:\/\/www.google.com\/search?q=are+tornados+clockwise+and+hurricans+anticlockwise&#038;rlz=1C5CHFA_enAU973AU973&#038;oq=are+tornados+clockwise+and+hurricans+anticlockwise&#038;aqs=chrome..69i57j33i10i160.15810j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>?<\/a>!<\/p>\n<p>Anyway, we decided to turn this idea, similar to one we explored a lot with the <a target=_blank title='Just Javascript Card Game iPhone Debugging Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-card-game-iphone-debugging-tutorial\/'>Just Javascript Card Game iPhone Debugging Tutorial<\/a> thread of blog postings of reasonably recent times, into a Bird Quiz, the imagery inspiration thanks to &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Aristotle? Aristotle?<\/a> &#8230; clearly and self evidently, <a target=_blank title='Bird' href='https:\/\/en.wikipedia.org\/wiki\/Bird'>Wikipedia<\/a>, thanks.<\/p>\n<p>The Wikipedia imagery being an image map you might be interested to see the setting up of all this &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Dropdown Thumbnail Image Choices - RJM Programming - June, 2023&lt;\/title&gt;<br \/>\n&lt;style&gt;<br \/>\n  option::before {<br \/>\n    content: '\\00200d'; \/* '\\0026aa'; *\/<br \/>\n    font-size: 70px;<br \/>\n  }<br \/>\n&lt;\/style&gt;<br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n  var tw=300, lw=100;<br \/>\n  var th=420, lh=70;<br \/>\n  var sofar=',';<br \/>\n  var elem=null, context=null;<br \/>\n  var wikiblurbthanks='&lt;div class=\"center\"&gt;&lt;div class=\"noresize\" style=\"height: 418px; width: 300px; \"&gt;&lt;map name=\"ImageMap_fbc6cc846e0ab4e8\"&gt;&lt;area href=\"\/wiki\/Red-crested_turaco\" shape=\"rect\" coords=\"0,0,100,70\" alt=\"Red-crested turaco\" title=\"Red-crested turaco\" \/&gt;&lt;area href=\"\/wiki\/Steller%27s_sea_eagle\" shape=\"rect\" coords=\"0,70,100,141\" alt=\"Steller' + \"'\" + 's sea eagle\" title=\"Steller' + \"'\" + 's sea eagle\" \/&gt;&lt;area href=\"\/wiki\/Rock_dove\" shape=\"rect\" coords=\"0,209,100,141\" alt=\"Rock dove\" title=\"Rock dove\" \/&gt;&lt;area href=\"\/wiki\/Southern_cassowary\" shape=\"rect\" coords=\"0,279,100,210\" alt=\"Southern cassowary\" title=\"Southern cassowary\" \/&gt;&lt;area href=\"\/wiki\/Gentoo_penguin\" shape=\"rect\" coords=\"0,348,100,279\" alt=\"Gentoo penguin\" title=\"Gentoo penguin\" \/&gt;&lt;area href=\"\/wiki\/Bar-throated_minla\" shape=\"rect\" coords=\"0,418,100,348\" alt=\"Bar-throated minla\" title=\"Bar-throated minla\" \/&gt;&lt;area href=\"\/wiki\/Shoebill\" shape=\"rect\" coords=\"200,0,100,70\" alt=\"Shoebill\" title=\"Shoebill\" \/&gt;&lt;area href=\"\/wiki\/Grey_crowned_crane\" shape=\"rect\" coords=\"200,70,100,141\" alt=\"Grey crowned crane\" title=\"Grey crowned crane\" \/&gt;&lt;area href=\"\/wiki\/Anna%27s_hummingbird\" shape=\"rect\" coords=\"200,209,100,141\" alt=\"Anna' + \"'\" + 's hummingbird\" title=\"Anna' + \"'\" + 's hummingbird\" \/&gt;&lt;area href=\"\/wiki\/Rainbow_lorikeet\" shape=\"rect\" coords=\"200,279,100,210\" alt=\"Rainbow lorikeet\" title=\"Rainbow lorikeet\" \/&gt;&lt;area href=\"\/wiki\/Grey_heron\" shape=\"rect\" coords=\"200,348,100,279\" alt=\"Grey heron\" title=\"Grey heron\" \/&gt;&lt;area href=\"\/wiki\/Eurasian_eagle-owl\" shape=\"rect\" coords=\"200,418,100,348\" alt=\"Eurasian eagle-owl\" title=\"Eurasian eagle-owl\" \/&gt;&lt;area href=\"\/wiki\/White-tailed_tropicbird\" shape=\"rect\" coords=\"300,0,200,70\" alt=\"White-tailed tropicbird\" title=\"White-tailed tropicbird\" \/&gt;&lt;area href=\"\/wiki\/Indian_peafowl\" shape=\"rect\" coords=\"300,70,200,141\" alt=\"Indian peafowl\" title=\"Indian peafowl\" \/&gt;&lt;area href=\"\/wiki\/Atlantic_puffin\" shape=\"rect\" coords=\"300,209,200,141\" alt=\"Atlantic puffin\" title=\"Atlantic puffin\" \/&gt;&lt;area href=\"\/wiki\/American_flamingo\" shape=\"rect\" coords=\"300,279,200,210\" alt=\"American flamingo\" title=\"American flamingo\" \/&gt;&lt;area href=\"\/wiki\/Blue-footed_booby\" shape=\"rect\" coords=\"300,348,200,279\" alt=\"Blue-footed booby\" title=\"Blue-footed booby\" \/&gt;&lt;area href=\"\/wiki\/Keel-billed_toucan\" shape=\"rect\" coords=\"300,418,200,348\" alt=\"Keel-billed toucan\" title=\"Keel-billed toucan\" \/&gt;&lt;\/map&gt;';<br \/>\n  var imguris=[];<br \/>\n  var blurbs=[];<br \/>\n  var randlist=[];<br \/>\n  var answer='', score=0, goes='', rans='';<br \/>\n  var yfirst=false;<br \/>\n<br \/>\n  function overlay() {<br \/>\n   var iii=0;<br \/>\n   var optsare=document.getElementsByTagName('option');<br \/>\n   for (var ii=0; ii&lt;eval('' + optsare.length); ii++) {<br \/>\n     iii=Math.floor(Math.random() * blurbs.length);<br \/>\n     while (sofar.indexOf(',' + iii + ',') != -1) {<br \/>\n       iii=Math.floor(Math.random() * blurbs.length);<br \/>\n     }<br \/>\n     sofar+='' + iii + ',';<br \/>\n     console.log('iii=' + iii);<br \/>\n     optsare[ii].value='' + blurbs[iii];<br \/>\n     optsare[ii].innerText='';<br \/>\n     optsare[ii].setAttribute('data-answer', blurbs[iii]);<br \/>\n     randlist.push(iii);<br \/>\n   }<br \/>\n   if (eval('' + optsare.length) &gt; 0) {<br \/>\n     document.getElementById('schoices').size=eval('' + optsare.length);<br \/>\n     document.getElementById('schoices').selectedIndex = '-1';<br \/>\n   }<br \/>\n   setTimeout(postoverlay, 2000);<br \/>\n  }<br \/>\n<br \/>\n  function postoverlay() {<br \/>\n   var lgbegin='linear-gradient(0deg, #ffffff 10%, rgba(255,255,0,0.6) 20%, rgba(192,192,192,0.6) 31%, rgba(255,215,0,0.6) 42%, rgba(211,211,211,0.6) 53%, rgba(255,165,0,0.6) 63%, rgba(224,255,255,0.6) 74%, rgba(254,254,254,0.6) 85%, #CC7722 100%),linear-gradient(to right,yellow,pink),';<br \/>\n   var delim='', topp=0, hinc=0;;<br \/>\n   var proposeds='&lt;style&gt; #tf { background-image:  ; background-position:   ; background-size:    ; background-repeat:     ; } &lt;\/style&gt;';<br \/>\n   var rect=document.getElementById('schoices').getBoundingClientRect();<br \/>\n   var optsare=document.getElementsByTagName('option');<br \/>\n   \/\/var rectrtd=document.getElementById('rtd').getBoundingClientRect();<br \/>\n<br \/> <br \/>\n   if (eval('' + rect.height) &gt; 100 || 1 == 1) {<br \/>\n<br \/>\n   document.getElementById('schoices').style.backgroundColor='transparent';<br \/>\n   document.getElementById('tf').style.position='absolute';<br \/>\n   document.getElementById('tf').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('tf').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('tf').style.width='' + rect.width + 'px';<br \/>\n   document.getElementById('tf').style.height='' + rect.height + 'px';<br \/>\n<br \/>\n   document.getElementById('schoices').style.position='absolute';<br \/>\n   document.getElementById('schoices').style.left='' + rect.left + 'px';<br \/>\n   document.getElementById('schoices').style.top='' + rect.top + 'px';<br \/>\n   document.getElementById('schoices').style.width='' + rect.width + 'px';<br \/>\n   document.getElementById('schoices').style.height='' + rect.height + 'px';<br \/>\n<br \/> <br \/>\n   \/\/document.getElementById('rtd').style.position='absolute';<br \/>\n   \/\/document.getElementById('rtd').style.left='' + rectrtd.left + 'px';<br \/>\n   \/\/document.getElementById('rtd').style.top='' + rectrtd.top + 'px';<br \/>\n   \/\/document.getElementById('rtd').style.width='' + rectrtd.width + 'px';<br \/>\n   \/\/document.getElementById('rtd').style.height='' + rectrtd.height + 'px';<br \/>\n<br \/>\n   \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/49660659\/css-gradients-inside-gradients<br \/>\n   \/\/document.getElementById('tf').style.background='linear-gradient(0deg, #ffffff 10%, rgba(255,255,0,0.6) 20%, rgba(192,192,192,0.6) 31%, rgba(255,215,0,0.6) 42%, rgba(211,211,211,0.6) 53%, rgba(255,165,0,0.6) 63%, rgba(224,255,255,0.6) 74%, rgba(254,254,254,0.6) 85%, #CC7722 100%), linear-gradient( to right, yellow, pink )'; \/\/ #fcfafc #f9f6f8 #f8f1f3<br \/>\n   document.getElementById('tf').style.zIndex='-1';<br \/>\n   topp=rect.top;<br \/>\n   \/\/alert('rect.height=' + rect.height);<br \/>\n   lgbegin='';<br \/>\n   \/\/ &lt;img alt=\"Bird Diversity 2013.png\" src=\"\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/b\/bf\/Bird_Diversity_2013.png\/300px-Bird_Diversity_2013.png\" decoding=\"async\" width=\"300\" height=\"418\" srcset=\"\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/b\/bf\/Bird_Diversity_2013.png\/450px-Bird_Diversity_2013.png 1.5x, \/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/b\/bf\/Bird_Diversity_2013.png\/600px-Bird_Diversity_2013.png 2x\" data-file-width=\"999\" data-file-height=\"1392\" usemap=\"#ImageMap_fbc6cc846e0ab4e8\"&gt;<br \/>\n<br \/> <br \/>\n   for (var ii=0; ii&lt;eval('' + document.getElementById('schoices').size); ii++) {<br \/>\n     hinc=eval('' + optsare[ii].style.height);<br \/>\n     proposeds=proposeds.replace('  ;', delim + lgbegin + \"url('\" + imguris[randlist[ii]] + \"')\" + '  ;');<br \/>\n     proposeds=proposeds.replace('   ;', delim + rect.left + 'px ' + topp + 'px'  + '   ;');<br \/>\n     if (1 == 11) {<br \/>\n     proposeds=proposeds.replace('    ;', delim + rect.width + 'px ' + hinc + 'px' + '    ;');<br \/>\n     } else if (1 == 1) {<br \/>\n     proposeds=proposeds.replace('    ;', delim + 'contain' + '    ;');<br \/>\n     } else {<br \/>\n     proposeds=proposeds.replace('    ;', delim + rect.width + 'px ' + Math.round(eval(rect.height \/ eval('' + document.getElementById('schoices').size))) + 'px' + '    ;');<br \/>\n     }<br \/>\n     proposeds=proposeds.replace('     ;', delim + 'no-repeat' + '     ;');<br \/>\n     delim=',';<br \/>\n     if (1 == 11) {<br \/>\n     topp+=hinc;<br \/>\n     } else {<br \/>\n     topp+=eval(rect.height \/ eval('' + document.getElementById('schoices').size));<br \/>\n     }<br \/>\n   }<br \/>\n<br \/>\n   document.getElementById('dstyle').innerHTML=proposeds.replace(\"&lt;\/stXyle&gt;\", \" option::before { content: '' !important; } &lt;\/style&gt;\");<br \/>\n<br \/>\n   }<br \/>\n<br \/>\n  }<br \/>\n<br \/>\n  function process(tv, tvo) {<br \/>\n     if (answer == ' ' && tv == '') {<br \/>\n     answer='';<br \/>\n     } else {<br \/>\n     if (answer == '') {<br \/>\n      while (answer == '') {<br \/>\n      answer=prompt('What is your bird type guess?', '');<br \/>\n      if (answer == null) { answer=''; }<br \/>\n      }<br \/>\n     }<br \/>\n     goes++;<br \/>\n     var val=document.getElementById('schoices');<br \/>\n     var ival=val.selectedIndex;<br \/>\n     rans=('' + val.options[val.selectedIndex].getAttribute('data-answer'));<br \/>\n     document.getElementById('schoices').selectedIndex = '-1';<br \/>\n     if (answer.trim().toLowerCase() == rans.trim().toLowerCase()) {<br \/>\n      score++;<br \/>\n     } else {<br \/>\n      setTimeout(explain, 200);<br \/>\n     }<br \/>\n     document.getElementById('score').innerHTML='Score: ' + score + '\/' + goes;<br \/>\n     answer=' ';<br \/>\n     document.getElementById('ians').value='';<br \/>\n     setTimeout(noans, 400);<br \/>\n     }<br \/>\n  }<br \/>\n <br \/>\n  function noans() {<br \/>\n    answer='';<br \/>\n  }<br \/>\n<br \/>\n  function explain() {<br \/>\n      if (confirm('Sorry, not the answer.  Do you want to know what that bird is called?')) {<br \/>\n         alert(rans);<br \/>\n      }<br \/>\n  }<br \/>\n<br \/>\n  function canvasize() {<br \/>\n   document.getElementById('schoices').title='Quiz';<br \/>\n   elem=document.getElementById('mycanvas');<br \/>\n   context = elem.getContext('2d');<br \/>\n   var cs=wikiblurbthanks.split(' coords=\"');<br \/>\n   var bs=wikiblurbthanks.split(' alt=\"');<br \/>\n   for (var kk=1; kk&lt;bs.length; kk++) {<br \/>\n     blurbs.push(bs[kk].split('\"')[0]);<br \/>\n     if (kk == 1) {<br \/>\n       if (cs[1].indexOf('0,') == 0 && cs[2].indexOf('0,') == 0) {<br \/>\n          yfirst=true;<br \/>\n       }<br \/>\n     }<br \/>\n   }<br \/>\n   console.log(blurbs);<br \/>\n   \/\/alert('blurbs length=' + blurbs.length);<br \/>\n   var cimg=new Image();<br \/>\n   cimg.onload = function(){<br \/>\n   var ourlw=eval(cimg.width \/ 3);<br \/>\n   var ourlh=eval(cimg.height \/ 6);<br \/>\n   if (yfirst) {<br \/>\n   for (var ii=0; ii<3; ii++) {\n   for (var jj=0; jj<6; jj++) {\n     context.clearRect(0,0,elem.width,elem.height);\n     context.drawImage(cimg,eval(ii * ourlw),eval(jj * ourlh),ourlw,ourlh,0,0,elem.width,elem.height);\n     imguris.push(elem.toDataURL('image\/png'));\n     console.log('here');\n   }\n   }\n   } else {\n   for (var jj=0; jj<6; jj++) {\n   for (var ii=0; ii<3; ii++) {\n     context.clearRect(0,0,elem.width,elem.height);\n     context.drawImage(cimg,eval(ii * ourlw),eval(jj * ourlh),ourlw,ourlh,0,0,elem.width,elem.height);\n     imguris.push(elem.toDataURL('image\/png'));\n     console.log('here');\n   }\n   }\n   }\n   overlay();\n   };\n   cimg.src='&lt;?php echo 'data:image\/png;base64,' . base64_encode(file_get_contents('http:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/b\/bf\/Bird_Diversity_2013.png\/300px-Bird_Diversity_2013.png')) ?&gt;';\n  }\n<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload='canvasize();'&gt;<br \/>\n&lt;!--table&gt;&lt;tr&gt;&lt;td style=width:25%;--&gt;<br \/>\n&lt;select data-size=9 onchange=process(this.value,this); style='display:block;background-color:#fefefe;overflow-y:auto;width:104px;border:2px dotted green;' title='Media and document action items ... please note you can hover swipe right or left, accurately, and with panache, regarding animated options to speed up transitions between option values' id=schoices&gt;&lt;option class=nonwhite style=text-align:center; id=mydefopt title='Add Voiceover Audio to Video' value=''&gt;&lt;\/option&gt;&lt;option value='Add Voiceover Audio to Video'&gt; Add Voiceover Audio to Video&nbsp;&lt;\/option&gt;&lt;option id=oimagemagick style='text-align:center;' value='Images to PDF'&gt;  Images to PDF&lt;\/option&gt;&lt;option id=opdfimages style='text-align:right;' value='PDF to Images'&gt;  PDF to Images&lt;\/option&gt;&lt;option value='Burn subtitles'&gt;  Burn subtitles&lt;\/option&gt;&lt;option value='Concat demuxer'&gt;  Concat demuxer&lt;\/option&gt;&lt;option value='Rotate a video'&gt;  Rotate a video&lt;\/option&gt;&lt;option id=opandoc style=text-align:center; value='Text to HTML'&gt;  Text to HTML&lt;\/option&gt;&lt;option class='nonwhite' style=text-align:center; id=mydefopttwo title='pandoc' value=''&gt;&lt;\/option&gt;&lt;\/select&gt;<br \/>\n&lt;!--\/td&gt;&lt;td style=width:75%; id=rtd&gt;<br \/>\n&lt;h1 style=float:right;&gt;&nbsp;&nbsp;Dropdown Thumbnail Image Choices&lt;\/h1&gt;&lt;br&gt;<br \/>\n&lt;h3 style=float:right;&gt;&nbsp;&nbsp;RJM Programming - June, 2023&lt;\/h3&gt;<br \/>\n&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table--&gt;<br \/>\n&lt;div id=tf contenteditable=true&gt;&lt;\/div&gt;<br \/>\n&lt;div id=dstyle style=display:none;&gt;&lt;\/div&gt;<br \/>\n&lt;h1 style='position:absolute;left:calc(50% - 600px);top:0px;'&gt;Dropdown Thumbnail Image Choices&lt;\/h1&gt;&lt;br&gt;<br \/>\n&lt;h3 style='position:absolute;left:calc(50% - 600px);top:100px;'&gt;RJM Programming - June, 2023&lt;\/h3&gt;<br \/>\n&lt;h4 style='position:absolute;left:calc(50% - 600px);top:200px;'&gt;Bird Quiz ... thanks to &lt;a target=_blank title='Bird' href='https:\/\/en.wikipedia.org\/wiki\/Bird'&gt;Wikipedia&lt;\/a&gt;&lt;\/h3&gt;<br \/>\n&lt;p id=score style='position:absolute;left:calc(50% - 600px);top:300px;'&gt;Score: 0\/0&lt;\/p&gt;<br \/>\n&lt;div style='position:absolute;left:calc(50% - 600px);top:400px;'&gt;<br \/>\n&lt;input id=ians onblur='answer=this.value;' placeholder='Your guess, then click the relevant bird image' value='' style='width:300px;'&gt;&lt;\/input&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;canvas id=mycanvas width=100 height=70 style=display:none;&gt;&lt;\/canvas&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; in our <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php_GETME\">&#8220;proof of concept&#8221; dropdown_thumbnail_image_choices.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/dropdown_thumbnail_image_choices.php\">Bird Quiz<\/a> web application you should feel free to try for yourself.<\/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='#d59578' onclick='var dv=document.getElementById(\"d59578\"); 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='d59578' 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='#d59585' onclick='var dv=document.getElementById(\"d59585\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59585' 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='#d59611' onclick='var dv=document.getElementById(\"d59611\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dimensions\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59611' 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='#d59638' onclick='var dv=document.getElementById(\"d59638\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/caption\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d59638' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Dropdown Image Dimensions Idea Tutorial continued the trend of our &#8230; dropdown image backgrounder uses image map data from Wikipedia &#8230; and today we extend that data scope to &#8230; dropdown image backgrounder uses image data not involving image &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/dropdown-image-no-map-ideas-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":[126,127,4103,184,2571,2507,2365,342,367,400,1839,2718,2258,576,590,599,745,2092,870,876,894,932,997,1022,1866,2996,1319,4351,2257,1431,1496],"class_list":["post-59638","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-background-image","tag-bird","tag-canvas","tag-caption","tag-dimension","tag-dimensions","tag-div","tag-dropdown","tag-event","tag-genericization","tag-genericize","tag-height","tag-html","tag-image","tag-img","tag-map","tag-multiple","tag-onload","tag-opacity","tag-overlay","tag-php","tag-programming","tag-quiz","tag-select","tag-transparent","tag-tutorial","tag-underlay","tag-width","tag-wikipedia","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59638"}],"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=59638"}],"version-history":[{"count":5,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59638\/revisions"}],"predecessor-version":[{"id":59643,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/59638\/revisions\/59643"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=59638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=59638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=59638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}