Fatal编程技术网
  • javascript/
  • Javascript 可变大小的图像映射不起作用

Javascript 可变大小的图像映射不起作用

javascript html

Javascript 可变大小的图像映射不起作用,javascript,html,Javascript,Html,我有一个网页下面的代码，映射不太正确（字面上-参考点似乎太偏右，随着图像大小的变化而变化，尽管我复制并定制了代码，从中可以完美地工作）。在这个文件夹中，我有两个文件：“jquery.min.js”和“imageMapResizer.min.js”都是从一个重新链接的网站上获取的。任何帮助都将不胜感激 <HTML> <HEAD> <TITLE>TODO: Enter title</TITLE> <Styl

我有一个网页下面的代码，映射不太正确（字面上-参考点似乎太偏右，随着图像大小的变化而变化，尽管我复制并定制了代码，从中可以完美地工作）。在这个文件夹中，我有两个文件：“jquery.min.js”和“imageMapResizer.min.js”都是从一个重新链接的网站上获取的。任何帮助都将不胜感激

        <HTML>
<HEAD>
    <TITLE>TODO: Enter title</TITLE>
        <Style type="text/css">
            img {width:100%; height: auto; }
            img {max-width: 500px}
            </style>

</HEAD>
<Body bgcolor="black">
<CENTER>
    <!--This table controls the upper bar section-->
<P><TABLE BORDER=0 CELLSPACING=10 CELLPADDING=10>
<TR>
<TD>

    <P><a href="www.google.com">;
                    <img src="image1.png"></a>
<TD>
<P><IMG SRC="Logo.png">
<TD>
<P><a href="www.ebay.com">;
                    <img src="image2.png"></a>

</TABLE>
        <P><img src="top bar under.png">
       <p>

    <img width= "100%" border="0" usemap="#map1" src="map.png" name="map1"></img>

</p>
        <map name="map1">


    <area title="B" href="http://en.wikipedia.org/wiki/Alabama" coords="30,67,129,332" shape="rect"></area>
    <area title="K" href="http://en.wikipedia.org/wiki/Alabama" coords="142,67,195,151" shape="rect"></area>
    <area title="C" href="http://en.wikipedia.org/wiki/Alabama" coords="202,68,265,166" shape="rect"></area>
    <area title="D" href="http://en.wikipedia.org/wiki/Alabama" coords="389,34,415,32,419,21,520,21,521,65,537,64,541,110,519,109,522,221,480,221,481,234,437,232,434,187,425,185,421,143,407,145,409,57,414,57,414,44,390,44,389,42,389,42" shape="poly"></area>
    <area title="R" href="http://en.wikipedia.org/wiki/Alabama" coords="206,195,256,312" shape="rect"></area>
    <area title="X" href="http://en.wikipedia.org/wiki/Alabama" coords="168,314,299,355" shape="rect"></area>
    <area title="KC" href="http://en.wikipedia.org/wiki/Alabama" coords="296,188,294,286,332,287,333,274,367,277,367,244,335,215,319,210,320,189" shape="poly"></area>
    <area title="PD" href="http://en.wikipedia.org/wiki/Alabama" coords="575,19,620,125" shape="rect"></area>
    <area title="DR" href="http://en.wikipedia.org/wiki/Alabama" coords="589,283,624,423" shape="rect"></area>
    <area title="M" href="http://en.wikipedia.org/wiki/Alabama" coords="447,293,573,427" shape="rect"></area>
</map>





</center>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="imageMapResizer.min.js"></script> 
<script>$('map1').imageMapResize();</script>
</BODY>
</HTML>


TODO:输入标题
img{宽度：100%；高度：自动；}
img{最大宽度：500px}













$（'map1'）.imageMapResize（）；
我相信您的错误在于这一行：

<script>$('map1').imageMapResize();</script>

$（'map1'）。imageMapResize（）；
应该是哪一个

<script>$('map').imageMapResize();</script>

$（'map'）.imageMapResize（）；
BTW-我正在使用Firefox，如果有什么帮助的话，请你发一把小提琴好吗？无论如何，快速查看-尝试根据演示链接将
width=600px
替换为
width=“100%”
。@Varinder-抱歉：什么是“小提琴”？此外，更改为width=“100%”会使情况变得更糟：它从稍微偏离标记变为完全偏离标记。他们在示例中使用了脚本
imageMapResizer.min.js
，该脚本处理图像相对于图像贴图的自动调整大小。您需要在页面中包含此脚本，然后运行
$（'map'）.imageMapResize（）在包含该脚本以使用它之后的某个时刻。@aarontam-如果复制和粘贴网页的代码不包含该脚本，则不包含该脚本。我将如何执行该操作？