HTML编码以适应屏幕和图像映射

时间:2013-11-01 21:28:14

标签: html mapping screen resolution

我正在制作一个非常简单的网站,只是为了练习,因为我计划进入这个领域。 我有一个27英寸的桌面显示器,网站看起来很棒。当我在我兄弟的笔记本电脑上检查它时,19“,它看起来很糟糕,因为宽度不适合屏幕。所以我更改了代码并将width =“100%”。虽然每台计算机显示器上的页面看起来都很好,但链接无法点击。我认为这是由于我添加到代码中的图像映射。

由于我对HTML编码相当新,我希望能够从知道他们正在做什么的人那里得到一些关于这个网站的帮助。

我的问题:如何更改我的代码以适应所有屏幕尺寸以及不更改图像映射以使链接可点击。这是我的代码:

<center> 

<font face="verdana" size="1" color="black"> 

<img src="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/googlefrive.jpg" width="100%" usemap="#ImageMap1"> 


<div id="inlineframe" style="width:1274px; height:944px; position:absolute; left:289px; top:203px; z-index:1; overflow:auto;" usemap="#ImageMap1"> 
<iframe src="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/index.html" name="inlineframe" width=100% height=100% border="0" marginwidth=0 marginheight=0 frameborder=0 allowtransparency="true"></iframe> 

<map id="ImageMap1" name="ImageMap1">
<area shape="rect"  coords="54,216,261,338" href="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/info.html" target="inlineframe" />
<area shape="rect" coords="44,553,264,678" href="" target="inlineframe" />
<area shape="rect" coords="41,961,261,1084" href="https://dl.dropboxusercontent.com/u/49806835/freakinwhatever/specialmessage.html" target="inlineframe" />
</map>

</font> 
</center>

1 个答案:

答案 0 :(得分:0)

有响应jQuery plugin。在this question的答案中找到了链接。