Interested in creating a HTA with specific functionality but can't seem to get things working/looking as they should. Is there a way to utilize either an ImageMap or DIVs containing images so that the mouse actions (hover/click/etc.) will work as they should? ImageMap is nice because I can just have a single image and the window recognizes the areas, but I can't get an image swap to occur on mouse actions. Is the image swap functionality not possible with ImageMap? I also tried utilizing pixel-exact dimensioning with DIVs, but there's always an issue with floats, clears, margins, etc., which makes it look like the images below. Is an HTA simply not capable of this functionality? If it's not, what would be the alternative?
Here's how it looks if I use an HTA...
Here's how it looks if I rename it to HTM...
<head>
<script type="text/javascript">
</script>
<script language="vbscript">
option explicit
dim width, height, idtimer
width=410
height=225
window.resizeto width, height
window.moveto screen.availwidth\2-width\2, screen.availheight\2-height\2
idtimer=window.settimeout("vbscript:window.close", 4000)
</script>
<style>
* { font:12px "segoe ui", sans-serif; margin:0; padding:0; }
div#container { height:225px; width:410px; }
div#title { background-color:blue; border-left:1px solid blue; border-top:1px solid blue; color:#fff; float:left; height:26px; padding-top:6px; width:376px; }
div#button { background-color:blue; border-top:1px solid blue; border-right:1px solid blue; color:#fff; float:left; height:32px; margin-left:377px; }
span#titletext { background-color:blue; color:#fff; padding-left:6px; width:360px; }
span#buttontext { background-color:blue; color:#fff; font-size:18px; padding-left:13px; width:32px; }
div#main { clear:both; height:125px; width:410px; }
div#graphic { background-color:#987; border-left:1px solid blue; float:left; height:125px; width:60px; }
div#content { background-color:#abc; border-right:1px solid blue; float:left; height:125px; width:348px; }
div#footer { background-color:#eee; border-left:1px solid blue; border-bottom:1px solid blue; border-right:1px solid blue; clear:both; height:40px; width:408px; }
</style>
</head>
<hta:application applicationname="Index" id="Index" border="none" borderstyle="normal" caption="no" commandline="" contextmenu="no" icon="" innerborder="no" maximizebutton="no" minimizebutton="no" navigable="no" scroll="no" scrollflat="no" selection="no" showintaskbar="no" singleinstance="yes" sysmenu="no" systemmenu="no" version="" windowstate="normal" />
<body>
<div id="container">
<div id="title"><span id="titletext">Index</span></div>
<div id="button"><span id="buttontext">x</span></div>
<div id="main">
<div id="graphic"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</body>
</html>```
