HTA格式功能实现问题求助：ImageMap图片切换与DIV布局异常

嘿，我来帮你拆解下你遇到的HTA问题，其实这些功能都是可以实现的，只是可能没找对方法～

一、ImageMap实现图片切换的问题 #

ImageMap本身是支持鼠标事件的，只是需要手动绑定脚本触发图片切换，并不是HTA不支持这个功能。你可以给<area>元素绑定onmouseover/onmouseout/onclick事件，来切换主图片的src属性。

举个简单的JavaScript实现例子：

<img src="default.png" usemap="#myAreaMap" id="mainImage">
<map name="myAreaMap">
  <!-- 假设是矩形区域，坐标根据你的图片调整 -->
  <area shape="rect" coords="10,10,100,100" 
        onmouseover="document.getElementById('mainImage').src='hover-state.png'"
        onmouseout="document.getElementById('mainImage').src='default.png'"
        onclick="document.getElementById('mainImage').src='clicked-state.png'">
</map>

如果习惯用VBScript，也可以写对应的事件处理：

Sub Area_MouseOver()
  document.getElementById("mainImage").src = "hover-state.png"
End Sub

Sub Area_MouseOut()
  document.getElementById("mainImage").src = "default.png"
End Sub

然后给<area>加上onmouseover="Area_MouseOver"这样的绑定即可。

二、DIV布局在HTA里异常的问题 #

你遇到的布局错乱，大概率是**HTA默认的IE渲染模式（quirks模式）**和普通HTM页面不同，加上CSS盒模型的计算方式导致的。可以通过以下几个调整解决：

1. 强制HTA使用现代IE渲染引擎
   在<head>最顶部加上这个meta标签，让HTA用IE最新的兼容模式渲染，布局表现会和普通HTM页面一致：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2. 修复CSS盒模型问题
   给全局选择器加上box-sizing: border-box，这样元素的边框和内边距会包含在你设置的宽高里，不会额外撑大元素，避免float布局错位：

* { 
  font:12px "segoe ui", sans-serif; 
  margin:0; 
  padding:0; 
  box-sizing: border-box; /* 关键修复 */
}

3. 调整你的布局CSS
   你原来的#button设置了margin-left:377px，这会导致它被挤到后面，其实只要让它和#title一起浮动即可，去掉多余的margin：

div#title { 
  background-color:blue; 
  border-left:1px solid blue; 
  border-top:1px solid blue; 
  color:#fff; 
  float:left; 
  height:32px; 
  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; 
  width:34px; /* 410-376=34，刚好填满容器 */
}

另外，你的HTML里<div id="container">没有闭合，记得在</body>前加上</div>，避免布局解析异常。

三、如果HTA还是满足不了需求，替代方案有哪些？ #

如果HTA的渲染限制实在让你头疼，可以考虑这些方向：

• Electron/NW.js：用HTML/CSS/JS开发跨平台桌面应用，完全基于现代浏览器引擎，没有IE的限制
• WPF/WinForms：微软的.NET桌面应用框架，适合需要更原生Windows交互的场景
• 普通桌面Web应用：如果不需要离线运行，直接做普通HTM页面，配合浏览器的桌面快捷方式（可以隐藏地址栏）

备注：内容来源于stack exchange，提问作者user3208239