html中如何嵌入图像的实例分析

img元素允许我们在HTML文档里嵌入图像。

<a href="otherpage.html">
    <img src="img/example/img-map.jpg" ismap alt="Products Image" width="580" height="266" /></a>

<body>
<p>The X-coordinate is <b>
<span id="xco">??</span>
</b>
</p>
<p>The Y-coordinate is <b><span id="yco">??</span>
</b>
</p>
<script type="application/javascript">
    var coords = window.location.href.split('?')[1].split(',');
    document.getElementById("xco").innerHTML = coords[0];
    document.getElementById("yco").innerHTML = coords[1];</script></body>

<body>
    <img src="img/example/img-map.jpg" ismap alt="Products Image" usemap="#mymap" width="580" height="266" /><map name="mymap">
    <area href="javascript:show_page(1)" shape="rect" coords="'34,60,196,230" alt="product 1" />
    <area href="javascript:show_page(2)" shape="rect" coords="'210,60,370,230" alt="product 2" />
    <area href="javascript:show_page(3)" shape="rect" coords="'383,60,545,230" alt="product 3" /></map><script type="application/javascript">
     function show_page(num){         
     //通过对话框显示产品，表示对应的跳转页面         
     alert("This is product "+num);
     }</script></body>

显示效果是一样的，只是在点击对应的产品图片，会弹出对应的产品名称，表示跳转的产品页面。

以上就是html中如何嵌入图像的实例分析的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于html中如何嵌入图像的实例分析的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did72221

更新时间：2022-10-19 阅读：42次