<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Image map</title>

<style>
.fiXt {
max-width: 99%;
max-height: 99%;
}

div {
text-shadow: -1px 1px 1px #ff2d95;
}
</style>
<script type=text/javascript>
var conceptis=null;
var zf=99;
//alert('' + navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i));
var ismob=false;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
ismob=true;
}
var thisso=(('' + ismob) == 'false' ? '' : ('' + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type))); //"portrait";

function tdr(what) {
var warr=what.split(','), thislineis='', newbitis='';
if (eval('' + warr.length) == 3) {
warr=[];
warr.push(what.split(',')[0] + '=' + what.split('=')[1].split(',')[0]);
warr.push(what.split(',')[1].split('=')[0] + '=' + what.split('=')[1].split(',')[1]);
}
for (var iq=0; iq<warr.length; iq++) {
if (document.getElementById('results').innerHTML.indexOf(warr[iq]) == -1) {
if (document.getElementById('results').innerHTML.indexOf(warr[iq].split('=')[0] + '=') == -1) {
document.getElementById('results').innerHTML+=warr[iq] + '<br>';
} else {
thislineis=warr[iq].split('=')[0] + '=' + document.getElementById('results').innerHTML.split(warr[iq].split('=')[0] + '=')[1].split('<br')[0];
newbitis=warr[iq].split('=')[0] + '=' + '<strike>' + document.getElementById('results').innerHTML.split(warr[iq].split('=')[0] + '=')[1].split('<br')[0] + '</strike>';
document.getElementById('results').innerHTML=document.getElementById('results').innerHTML.replace(thislineis, newbitis + warr[iq].split('=')[1]);
}
}
}
if (what.indexOf('.clientWidth') != -1) {
if (document.body.innerHTML.indexOf('horizborder') == -1) {
var tdrect=document.getElementById('tdright').getBoundingClientRect();
document.body.innerHTML+='<div id=horizborder id=myh class="hseparator" data-style="position:absolute;left:0px;top:0px;z-index:99;transform:rotate(0deg);transform-origin:0 0;">document.documentElement.clientWidth=' + document.documentElement.clientWidth + '</div>';
}
} else if (what.indexOf('.clientHeight') != -1) {
if (document.body.innerHTML.indexOf('vertborder') == -1) {
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.body.innerHTML+='<div id=vertborder data-class="hseparator" style="position:absolute;left:91%;top:50%;z-index:99;transform:rotate(90deg);">document.documentElement.clientHeight=' + document.documentElement.clientHeight + '</div>';
} else {
document.body.innerHTML+='<div id=vertborder data-class="hseparator" style="position:absolute;left:94.25%;top:50%;z-index:99;transform:rotate(90deg);">document.documentElement.clientHeight=' + document.documentElement.clientHeight + '</div>';
}
} else {
document.getElementById('vertborder').style.color='black';
document.getElementById('vertborder').style.textShadow='-1px 1px 1px #ff2d95';
document.getElementById('vertborder').style.visibility='visible';
}
}
return what;
}

function omo(areao) {
if (areao.alt == '#screen.orientation') {
conceptis=('' + (screen.msOrientation || screen.mozOrientation || (screen.orientation || {}).type));
//alert(conceptis);
console.log(tdr(areao.alt.replace(/^\#/g,'') + '=' + conceptis));
} else if (areao.alt == '#screen') {
console.log(tdr('screen.width,screen.height=' + screen.width + ',' + screen.height));
} else {
conceptis='' + eval(areao.alt.replace(/^\#/g,''));
console.log(tdr(areao.alt.replace(/^\#/g,'') + '=' + conceptis));
}
}

function omc(areao) {
if (areao.alt == '#screen') {
alert(tdr('screen.width,screen.height=' + screen.width + ',' + screen.height));
} else {
conceptis='' + eval(areao.alt.replace(/^\#/g,''));
alert(tdr(areao.alt.replace(/^\#/g,'') + '=' + conceptis));
}
}

function zoomit() {
var iw=1280;
var ih=1280;
var startw='' + eval(1.0 * eval(window.outerWidth));
var starth='' + eval(1.0 * eval(window.outerHeight));
if (window.parent) {
if (window.self != window.parent) {
startw='' + eval(0.8 * eval(document.documentElement.clientWidth));
starth='' + eval(0.8 * eval(document.documentElement.clientHeight));
}
}
//startw='' + eval(screen.width);
//starth='' + eval(screen.height);
while (eval(iw * zf / 100.0) > eval(startw) || eval(ih * zf / 100.0) > eval(starth)) {
zf--;
}
document.getElementById('dstyle').innerHTML='<style> body { zoom: ' + eval(zf * 0.8 / 100) + '; } </style>';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
document.body.innerHTML+='<span id=vertborder data-class="hseparator" style="color:transparent;position:absolute;left:91%;top:50%;z-index:99;transform:rotate(90deg);">document.documentElement.clientHeight=' + document.documentElement.clientHeight + '</span>';
} else {
document.body.innerHTML+='<span id=vertborder data-class="hseparator" style="color:transparent;position:absolute;left:94.25%;top:50%;z-index:99;transform:rotate(90deg);">document.documentElement.clientHeight=' + document.documentElement.clientHeight + '</span>';
}
if (thisso != '') {
omo(document.getElementById('mynoimg'))
}
}

if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
if (8 == 8) {
setInterval(function(){ omo(document.getElementById('mynoimg')); }, 5000);
} else {
// Listen for the deviceorientation event and handle the raw data
window.addEventListener('deviceorientation', function(eventData) {
omo(document.getElementById('mynoimg'));
});
}
}

</script>
<style>
.hseparator { /* thanks to https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-horizontal-rule */
display: flex;
align-items: center;
text-align: center;
}

.hseparator::before,
.hseparator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}

.hseparator:not(:empty)::before {
margin-right: .25em;
}

.hseparator:not(:empty)::after {
margin-left: .25em;
}
</style>
</head>
<body data-style="zoom:0.5;" onload="zoomit();" style="border-right:1px solid black;border-left:1px solid black;">
<table style="padding:0 0 0 0; margin:0 0 0 0;"><tr><td>

<img class=fit src="/window_stuff_thanks_to_moo_you_tistory_com_882.png" usemap="#ir94750" width="1280" height="1280" alt="click map" border="0" />
<map id="ir94750" name="ir94750">

<area shape="rect" alt="#window.outerWidth" coords="473,164,915,206" data-href="#window.outerWidth" target="_blank" onMouseOver="omo(this);" onclick="omc(this);" />

<area shape="rect" alt="#window.innerWidth" title="#window.innerWidth" coords="447,964,890,987" data-href="#window.innerWidth" target="_blank" onMouseOver="omo(this);" onclick="omc(this);" />

<area shape="rect" alt="#document.documentElement.clientWidth" coords="244,1108,1081,1148" data-href="#document.documentElement.clientWidth" target="_blank" onMouseOver="omo(this);" onclick="omc(this);" />

<area shape="rect" alt="#document.documentElement.clientHeight" coords="38,162,82,989" data-href="#document.documentElement.clientHeight" target="_blank" onMouseOver="omo(this);" onclick="omc(this);" />

<area shape="rect" alt="#window.outerHeight" title="#window.outerHeight" coords="1194,370,2357,783" data-href="#window.outerHeight" target="_blank" onMouseOver="omo(this);" onclick="omc(this);" />

<area shape="rect" alt="#window.innerHeight" title="#window.innerHeight" coords="145,364,269,800" data-href="#window.innerHeight" target="_blank" onMouseOver="omo(this);" onclick="omc(this);" />
<area shape="default" nohref alt="#screen" onMouseOver="omo(this);" onclick="omc(this);" />
</map>
</td><td style=vertical-align:top;padding-left:5px; id=tdright>
<h1>Window Object DOM Concepts</h1>
<h3>RJM Programming - June, 2025</h3>
<h4>Thanks to https://moo-you.tistory.com/882 and <br>https://www.mobilefish.com/services/image_map/image_map.php</h4>
<br><br>
<div id=results style=font-size:24px;></div>
</td>
</tr>
</table>

<div id=dstyle></div>
<img alt="#screen.orientation" id=mynoimg style='display:none;'></img>
</body>
</html>