<html>
<head>
<style>
* { padding: 5 5 5 5; }
</style>
<script type='text/javascript'>
var shapeopts='arc,semicircle,rectangle,square,pie,crescent,quadrant,line,octagon,circle,ellipse,bezier,triangle,rhombus';
var lastimagesuffix='bezier', lastiframesuffix='quadrant';
var ifw=334, ifh=334;
function drawvia(what) {
if (what.value != '') {
if (what.id.indexOf('frame') != -1) {
if (what.value == 'rhombus') {
document.getElementById('myiframe').style.width='' + eval(1.5 * ifw) + 'px';
document.getElementById('myiframe').style.height='' + eval(1.5 * ifh) + 'px';
} else {
document.getElementById('myiframe').style.width='' + ifw + 'px';
document.getElementById('myiframe').style.height='' + ifh + 'px';
}
document.getElementById('myiframe').src=document.getElementById('myiframe').src.replace(lastiframesuffix, what.value);
//document.body.innerHTML=document.body.innerHTML.replace(lastiframesuffix, what.value);
lastiframesuffix=what.value;
document.getElementById('thiframeopt').innerText='Iframe';
} else if (what.id.indexOf('mage') != -1) {
if (what.value == 'rhombus') {
document.getElementById('myimage').style.width='' + eval(1.5 * ifw) + 'px';
document.getElementById('myimage').style.height='' + eval(1.5 * ifh) + 'px';
} else {
document.getElementById('myimage').style.width='' + ifw + 'px';
document.getElementById('myimage').style.height='' + ifh + 'px';
}
document.getElementById('myimage').src=document.getElementById('myimage').src.replace(lastimagesuffix, what.value);
//document.body.innerHTML=document.body.innerHTML.replace(lastiframesuffix, what.value);
lastimagesuffix=what.value;
document.getElementById('thimageopt').innerText='Image';
}
}
}
function onl() {
var thimagesel='<select id=thimagesel onchange=drawvia(this);><option id=thimageopt value="">Image</option></select>';
var thiframesel=thimagesel.replace(/mage/g, 'frame');
thimagesel=thimagesel.replace('>Image<', '>Image ... showing bezier below<');
var arrs=shapeopts.split(',');
for (var i=0; i<arrs.length; i++) {
thimagesel=thimagesel.replace('</select>', '<option value=' + arrs[i] + '>' + arrs[i] + '</option></select>');
if (document.getElementById('myimage').src.indexOf(arrs[i]) != -1 && thimagesel.indexOf('>Image<') != -1) {
thimageesel=thimagesel.replace('>Image<', '>Image ... showing ' + arrs[i] + ' below<');
lastimagesuffix=arrs[i];
}
thiframesel=thiframesel.replace('</select>', '<option value=' + arrs[i] + '>' + arrs[i] + '</option></select>');
if (document.getElementById('myiframe').src.indexOf(arrs[i]) != -1 && thiframesel.indexOf('>Iframe<') != -1) {
thiframesel=thiframesel.replace('>Iframe<', '>Iframe ... showing ' + arrs[i] + ' below<');
lastiframesuffix=arrs[i];
}
}
document.getElementById('thimage').innerHTML=thimagesel;
document.getElementById('thiframe').innerHTML=thiframesel;
}
</script>
</head>
<body onload="onl();">
<h1>Show Some Shapes</h1>
<h3>RJM Programming - October, 2023</h3>
<table border=50 style=width:98%;>
<tr><th id=thimage style="width:50%;">Image</th><th id=thiframe>Iframe</th></tr>
<tr><td>
<img style='width:334px;height:334px;' id=myimage src='//www.rjmprogramming.com.au/ITblog/334/334/?svggreenbezier=y'></img>
</td>
<td>
<iframe style='width:334px;height:334px;' frameborder=0 id=myiframe src='//www.rjmprogramming.com.au/ITblog/334/334/?svgbluecircle=y'></iframe>
</td></tr>
</table>
</body>
</html>