Dropdown Image Idea Primer Tutorial

Posted on by
Dropdown Image Idea Primer Tutorial

Dropdown Image Idea Primer Tutorial

We’ve long mused about the idea that an HTML select (ie. dropdown) element can have images as a background. Well, we’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 …

… and the recent Ffmpeg and Pandoc and ImageMagick and Pdfimages Dropdown Linear Gradient Tutorial got us interested in …

  • dropdown background transparency … combined with …
  • underlaid, precisely, div z-index smaller

… and what’s to stop us setting a multiple background image arrangement for the div element above? Anyone? Anyone? Yes, Aristotle, it is clearly self-evident that an earthquake might stop us, yes, or an anti-clockwise hurricane, perhaps, yes … but you do realize our class is taking place in the Blue Mountains, near Sydney, Australia?!

Anyway, we decided to turn this idea, similar to one we explored a lot with the Just Javascript Card Game iPhone Debugging Tutorial thread of blog postings of reasonably recent times, into a Bird Quiz, the imagery inspiration thanks to … Aristotle? Aristotle? … clearly and self evidently, Wikipedia, thanks.

The Wikipedia imagery being an image map you might be interested to see the setting up of all this …


<html>
<head>
<title>Dropdown Thumbnail Image Choices - RJM Programming - June, 2023</title>
<style>
option::before {
content: '\00200d'; /* '\0026aa'; */
font-size: 70px;
}
</style>
<script type=text/javascript>
var tw=300, lw=100;
var th=420, lh=70;
var sofar=',';
var elem=null, context=null;
var wikiblurbthanks='<div class="center"><div class="noresize" style="height: 418px; width: 300px; "><map name="ImageMap_fbc6cc846e0ab4e8"><area href="/wiki/Red-crested_turaco" shape="rect" coords="0,0,100,70" alt="Red-crested turaco" title="Red-crested turaco" /><area href="/wiki/Steller%27s_sea_eagle" shape="rect" coords="0,70,100,141" alt="Steller' + "'" + 's sea eagle" title="Steller' + "'" + 's sea eagle" /><area href="/wiki/Rock_dove" shape="rect" coords="0,209,100,141" alt="Rock dove" title="Rock dove" /><area href="/wiki/Southern_cassowary" shape="rect" coords="0,279,100,210" alt="Southern cassowary" title="Southern cassowary" /><area href="/wiki/Gentoo_penguin" shape="rect" coords="0,348,100,279" alt="Gentoo penguin" title="Gentoo penguin" /><area href="/wiki/Bar-throated_minla" shape="rect" coords="0,418,100,348" alt="Bar-throated minla" title="Bar-throated minla" /><area href="/wiki/Shoebill" shape="rect" coords="200,0,100,70" alt="Shoebill" title="Shoebill" /><area href="/wiki/Grey_crowned_crane" shape="rect" coords="200,70,100,141" alt="Grey crowned crane" title="Grey crowned crane" /><area href="/wiki/Anna%27s_hummingbird" shape="rect" coords="200,209,100,141" alt="Anna' + "'" + 's hummingbird" title="Anna' + "'" + 's hummingbird" /><area href="/wiki/Rainbow_lorikeet" shape="rect" coords="200,279,100,210" alt="Rainbow lorikeet" title="Rainbow lorikeet" /><area href="/wiki/Grey_heron" shape="rect" coords="200,348,100,279" alt="Grey heron" title="Grey heron" /><area href="/wiki/Eurasian_eagle-owl" shape="rect" coords="200,418,100,348" alt="Eurasian eagle-owl" title="Eurasian eagle-owl" /><area href="/wiki/White-tailed_tropicbird" shape="rect" coords="300,0,200,70" alt="White-tailed tropicbird" title="White-tailed tropicbird" /><area href="/wiki/Indian_peafowl" shape="rect" coords="300,70,200,141" alt="Indian peafowl" title="Indian peafowl" /><area href="/wiki/Atlantic_puffin" shape="rect" coords="300,209,200,141" alt="Atlantic puffin" title="Atlantic puffin" /><area href="/wiki/American_flamingo" shape="rect" coords="300,279,200,210" alt="American flamingo" title="American flamingo" /><area href="/wiki/Blue-footed_booby" shape="rect" coords="300,348,200,279" alt="Blue-footed booby" title="Blue-footed booby" /><area href="/wiki/Keel-billed_toucan" shape="rect" coords="300,418,200,348" alt="Keel-billed toucan" title="Keel-billed toucan" /></map>';
var imguris=[];
var blurbs=[];
var randlist=[];
var answer='', score=0, goes='', rans='';
var yfirst=false;

function overlay() {
var iii=0;
var optsare=document.getElementsByTagName('option');
for (var ii=0; ii<eval('' + optsare.length); ii++) {
iii=Math.floor(Math.random() * blurbs.length);
while (sofar.indexOf(',' + iii + ',') != -1) {
iii=Math.floor(Math.random() * blurbs.length);
}
sofar+='' + iii + ',';
console.log('iii=' + iii);
optsare[ii].value='' + blurbs[iii];
optsare[ii].innerText='';
optsare[ii].setAttribute('data-answer', blurbs[iii]);
randlist.push(iii);
}
if (eval('' + optsare.length) > 0) {
document.getElementById('schoices').size=eval('' + optsare.length);
document.getElementById('schoices').selectedIndex = '-1';
}
setTimeout(postoverlay, 2000);
}

function postoverlay() {
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),';
var delim='', topp=0, hinc=0;;
var proposeds='<style> #tf { background-image: ; background-position: ; background-size: ; background-repeat: ; } </style>';
var rect=document.getElementById('schoices').getBoundingClientRect();
var optsare=document.getElementsByTagName('option');
//var rectrtd=document.getElementById('rtd').getBoundingClientRect();


if (eval('' + rect.height) > 100 || 1 == 1) {

document.getElementById('schoices').style.backgroundColor='transparent';
document.getElementById('tf').style.position='absolute';
document.getElementById('tf').style.left='' + rect.left + 'px';
document.getElementById('tf').style.top='' + rect.top + 'px';
document.getElementById('tf').style.width='' + rect.width + 'px';
document.getElementById('tf').style.height='' + rect.height + 'px';

document.getElementById('schoices').style.position='absolute';
document.getElementById('schoices').style.left='' + rect.left + 'px';
document.getElementById('schoices').style.top='' + rect.top + 'px';
document.getElementById('schoices').style.width='' + rect.width + 'px';
document.getElementById('schoices').style.height='' + rect.height + 'px';


//document.getElementById('rtd').style.position='absolute';
//document.getElementById('rtd').style.left='' + rectrtd.left + 'px';
//document.getElementById('rtd').style.top='' + rectrtd.top + 'px';
//document.getElementById('rtd').style.width='' + rectrtd.width + 'px';
//document.getElementById('rtd').style.height='' + rectrtd.height + 'px';

// Thanks to https://stackoverflow.com/questions/49660659/css-gradients-inside-gradients
//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
document.getElementById('tf').style.zIndex='-1';
topp=rect.top;
//alert('rect.height=' + rect.height);
lgbegin='';
// <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">


for (var ii=0; ii<eval('' + document.getElementById('schoices').size); ii++) {
hinc=eval('' + optsare[ii].style.height);
proposeds=proposeds.replace(' ;', delim + lgbegin + "url('" + imguris[randlist[ii]] + "')" + ' ;');
proposeds=proposeds.replace(' ;', delim + rect.left + 'px ' + topp + 'px' + ' ;');
if (1 == 11) {
proposeds=proposeds.replace(' ;', delim + rect.width + 'px ' + hinc + 'px' + ' ;');
} else if (1 == 1) {
proposeds=proposeds.replace(' ;', delim + 'contain' + ' ;');
} else {
proposeds=proposeds.replace(' ;', delim + rect.width + 'px ' + Math.round(eval(rect.height / eval('' + document.getElementById('schoices').size))) + 'px' + ' ;');
}
proposeds=proposeds.replace(' ;', delim + 'no-repeat' + ' ;');
delim=',';
if (1 == 11) {
topp+=hinc;
} else {
topp+=eval(rect.height / eval('' + document.getElementById('schoices').size));
}
}

document.getElementById('dstyle').innerHTML=proposeds.replace("</stXyle>", " option::before { content: '' !important; } </style>");

}

}

function process(tv, tvo) {
if (answer == ' ' && tv == '') {
answer='';
} else {
if (answer == '') {
while (answer == '') {
answer=prompt('What is your bird type guess?', '');
if (answer == null) { answer=''; }
}
}
goes++;
var val=document.getElementById('schoices');
var ival=val.selectedIndex;
rans=('' + val.options[val.selectedIndex].getAttribute('data-answer'));
document.getElementById('schoices').selectedIndex = '-1';
if (answer.trim().toLowerCase() == rans.trim().toLowerCase()) {
score++;
} else {
setTimeout(explain, 200);
}
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes;
answer=' ';
document.getElementById('ians').value='';
setTimeout(noans, 400);
}
}

function noans() {
answer='';
}

function explain() {
if (confirm('Sorry, not the answer. Do you want to know what that bird is called?')) {
alert(rans);
}
}

function canvasize() {
document.getElementById('schoices').title='Quiz';
elem=document.getElementById('mycanvas');
context = elem.getContext('2d');
var cs=wikiblurbthanks.split(' coords="');
var bs=wikiblurbthanks.split(' alt="');
for (var kk=1; kk<bs.length; kk++) {
blurbs.push(bs[kk].split('"')[0]);
if (kk == 1) {
if (cs[1].indexOf('0,') == 0 && cs[2].indexOf('0,') == 0) {
yfirst=true;
}
}
}
console.log(blurbs);
//alert('blurbs length=' + blurbs.length);
var cimg=new Image();
cimg.onload = function(){
var ourlw=eval(cimg.width / 3);
var ourlh=eval(cimg.height / 6);
if (yfirst) {
for (var ii=0; ii<3; ii++) { for (var jj=0; jj<6; jj++) { context.clearRect(0,0,elem.width,elem.height); context.drawImage(cimg,eval(ii * ourlw),eval(jj * ourlh),ourlw,ourlh,0,0,elem.width,elem.height); imguris.push(elem.toDataURL('image/png')); console.log('here'); } } } else { for (var jj=0; jj<6; jj++) { for (var ii=0; ii<3; ii++) { context.clearRect(0,0,elem.width,elem.height); context.drawImage(cimg,eval(ii * ourlw),eval(jj * ourlh),ourlw,ourlh,0,0,elem.width,elem.height); imguris.push(elem.toDataURL('image/png')); console.log('here'); } } } overlay(); }; cimg.src='<?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')) ?>'; }
</script>
</head>
<body onload='canvasize();'>
<!--table><tr><td style=width:25%;-->
<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><option class=nonwhite style=text-align:center; id=mydefopt title='Add Voiceover Audio to Video' value=''></option><option value='Add Voiceover Audio to Video'> Add Voiceover Audio to Video </option><option id=oimagemagick style='text-align:center;' value='Images to PDF'> Images to PDF</option><option id=opdfimages style='text-align:right;' value='PDF to Images'> PDF to Images</option><option value='Burn subtitles'> Burn subtitles</option><option value='Concat demuxer'> Concat demuxer</option><option value='Rotate a video'> Rotate a video</option><option id=opandoc style=text-align:center; value='Text to HTML'> Text to HTML</option><option class='nonwhite' style=text-align:center; id=mydefopttwo title='pandoc' value=''></option></select>
<!--/td><td style=width:75%; id=rtd>
<h1 style=float:right;>  Dropdown Thumbnail Image Choices</h1><br>
<h3 style=float:right;>  RJM Programming - June, 2023</h3>
</td></tr></table-->
<div id=tf contenteditable=true></div>
<div id=dstyle style=display:none;></div>
<h1 style='position:absolute;left:calc(50% - 600px);top:0px;'>Dropdown Thumbnail Image Choices</h1><br>
<h3 style='position:absolute;left:calc(50% - 600px);top:100px;'>RJM Programming - June, 2023</h3>
<h4 style='position:absolute;left:calc(50% - 600px);top:200px;'>Bird Quiz ... thanks to <a target=_blank title='Bird' href='https://en.wikipedia.org/wiki/Bird'>Wikipedia</a></h3>
<p id=score style='position:absolute;left:calc(50% - 600px);top:300px;'>Score: 0/0</p>
<div style='position:absolute;left:calc(50% - 600px);top:400px;'>
<input id=ians onblur='answer=this.value;' placeholder='Your guess, then click the relevant bird image' value='' style='width:300px;'></input>
</div>
<canvas id=mycanvas width=100 height=70 style=display:none;></canvas>
</body>
</html>

… in our “proof of concept” dropdown_thumbnail_image_choices.php Bird Quiz web application you should feel free to try for yourself.

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

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

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