使用没有JQuery的响应式图像映射

时间：2015-01-31 22:12:27

标签： javascript jquery html image imagemap

我一直想知道如何制作响应式图像地图。听起来不可能，但我确实找到了办法http://home.comcast.net/~urbanjost/IMG/resizeimg.html

如果查看来源，您可以看到所有内容。这没有附加的JQuery或Ruby，或者人们推荐的任何插件。

然而，当我尝试在我的代码中实现这个JS时，它只是没有用。我一直在日夜搜索，但找不到东西。

以下是原始代码：

JS：

GLOBAL_COUNT = 0;
GLOBAL_AREAS = new Array();
GLOBAL_WIDTH = 1;

function scaleXY(elementid, scale) {
  // avoid problems with 0 scales and image becoming so small it does not change size 
  // I think something breaks in firefox(1) when you shrink so much that all values in an coords= become 0
  // I think something breaks in iexplore(1) when you shrink so much that all values in an coords= become 0

  myscale = Math.max(0, scale);
  oldwidth = document.getElementById(elementid).width
  oldheight = document.getElementById(elementid).height
  newwidth = Math.round(Math.max(oldwidth * myscale, 1));
  newheight = Math.round(Math.max(oldheight * myscale, 1));

  if(oldwidth == newwidth) newwidth =+ 1;
  if(oldheight == newheight) newheight =+ 1;

  document.getElementById(elementid).width = newwidth;
  document.getElementById(elementid).height = newheight;
  scaleArea();
}

//     Assuming one image map in document.
//     Assuming coordinates are comma-delimited in AREA COORDS= string.
//     Assuming the same zoom factor for the height as for the width of the image.

function getglobal() { // place original AREA coordinate strings into a global array, called at load
  var arrayAreas = document.body.getElementsByTagName("AREA");
  GLOBAL_WIDTH = document.getElementById("myimage").width; // get original width
  for(var i = 0; i < arrayAreas.length; i++) {
    GLOBAL_AREAS[i]= arrayAreas[i].coords;
  }
  GLOBAL_COUNT++;
}

function scaleArea() {   // using values stored at load, recalculate new values for the current size
  var arrayAreas = document.body.getElementsByTagName("AREA");
  for(var i = 0; i < arrayAreas.length; i++) {
    ii = i+1;
    rescale = document.getElementById("myimage").width/GLOBAL_WIDTH ;
    sarray = GLOBAL_AREAS[i].split(","); // convert coordinates to a numeric array assuming comma-delimited values
    var rarray =new Array();
    for(var j = 0; j < sarray.length; j++) {
      rarray[j] = parseInt(sarray[j])*rescale; // rescale the values
      rarray[j] = Math.round(rarray[j]);
    } //alert( "GLOBAL " + GLOBAL_AREAS[i] + ":" + sarray.length + " SPLIT=" + sarray +rarray.length);  
    arrayAreas[i].coords = rarray.join(","); // put the values back into a string
  }
  showArea();
}

HTML：

<body onload="getglobal();" >
  <form>
    <input type="button" onclick="scaleXY('myimage',1.0/1.13);" value="scaled smaller" />
    <input type="button" onclick="scaleXY('myimage',1.13);" value="scaled bigger" />
  </form>
  <div>
    <img id="myimage" src="hcopy.gif" alt="Round buttons" usemap="#circles" height="839" width="586" />
    <map id="circles" name="circles" >
      <area target="_blank" title="CYAN AREA" alt="CYAN" shape="circle" coords="50,50,20" href="#CYAN" />
      <area target="_blank" title="BLUE AREA" alt="BLUE" shape="circle" coords="25,25,20" href="#BLUE" />
      <area target="_blank" title="RED AREA" alt="RED" shape="circle" coords="25,75,20" href="#RED" />
      <area target="_blank" title="MAGENTA AREA" alt="MAGENTA" shape="circle" coords="75,25,20" href="#MAGENTA" />
      <area target="_blank" title="GREEN AREA" alt="GREEN" shape="circle" coords="75,75,20" href="#GREEN" />
      <area target="_blank" title="YELLOW AREA" alt="YELLOW" shape="rect" coords="0,0,100,100" href="#YELLOW" />
     </map>
   </div>
<body>

同样，我没有制作这段代码。我无法理解它。但是，当我尝试将此代码应用于我的图像时，最大的问题就出现了，然后，它就会停止工作。

代码：

HTML：

<form onload="getglobal()">
   <input type="button" onclick="scaleImageDown()" value="scaled smaller" />
   <input type="button" onclick="scaleImageUp()" value="scaled bigger" />
</form>
  <div>
    <img src="http://www.astro-galaxy.com/sys_files/sys_view/CL1296246121697.jpg" usemap="#circles" id="myimage" width="839" height"586" >
    <map name="circles" id="circles">
    <area shape="circle" coords="-264,320,442" href="" title="Sun">
    <area shape="circle" coords="244,79,13" href="" title="Mercury">
    <area shape="circle" coords="307,122,24" href="" title="Venus">
    <area shape="circle" coords="382,187,29" href="" title="Earth">
    <area shape="circle" coords="414,149,14" href="" title="The Moon">
    <area shape="circle" coords="432,232,16" href="" title="Mars">
    <area shape="circle" coords="408,249,8" href="" title="Deimos">
    <area shape="circle" coords="456,217,8" href="" title="Phobos">
    <area shape="rect" coords="413,261,486,292" href="" title="Asteroids">
    <area shape="circle" coords="563,337,85" href="" title="Jupiter">
    <area shape="circle" coords="430,421,14" href="" title="Europa">
    <area shape="circle" coords="463,395,18" href="" title="Ganymede">
    <area shape="circle" coords="653,245,17" href="" title="Callisto">
    <area shape="circle" coords="690,220,13" href="" title="Io">
    <area shape="circle" coords="668,431,41" href="" title="Saturn">
    <area shape="circle" coords="727,397,11" href="" title="Titan">
    <area shape="circle" coords="734,487,21" href="" title="Uranus">
    <area shape="circle" coords="684,525,10" href="" title="Umbriel">
    <area shape="circle" coords="702,512,10" href="" title="Miranda">
    <area shape="circle" coords="769,460,10" href="" title="Ariel">
    <area shape="circle" coords="785,445,10" href="" title="Titania">
    <area shape="circle" coords="802,430,10" href="" title="Oberon">
    <area shape="circle" coords="784,536,27" href="" title="Neptune">
    <area shape="circle" coords="757,565,10" href="" title="Triton">
    <area shape="circle" coords="816,574,10" href="" title="Pluto">
  </map>
</div>

JS：

GLOBAL_COUNT = 0;
GLOBAL_AREAS = new Array();
GLOBAL_WIDTH = 1;
eid = "myimage";

function scaleImageDown() {
  // avoid problems with 0 scales and image becoming so small it does not change size 
  // I think something breaks in firefox(1) when you shrink so much that all values in an coords= become 0
  // I think something breaks in iexplore(1) when you shrink so much that all values in an coords= become 0
  var myscale = 0.5;
  var oldwidth = document.getElementById(eid).width;
  var oldheight = document.getElementById(eid).height;
  var newwidth = oldwidth * myscale;
  var newheight = oldheight * myscale;

  if(oldwidth == newwidth) {
    newwidth =+ 1
  }

  if(oldheight == newheight) {
    newheight =+ 1
  }

  document.getElementById(eid).width = newwidth;
  document.getElementById(eid).height = newheight;
  scaleArea();
}

function scaleImageUp() {
  var myscale = 2;
  var oldwidth = document.getElementById(eid).width;
  var oldheight = document.getElementById(eid).height;
  var newwidth = oldwidth * myscale;
  var newheight = oldheight * myscale;

  if(oldwidth == newwidth) {
    newwidth =+ 1
  }

  if(oldheight == newheight) {
    newheight =+ 1
  }

  document.getElementById(eid).width = newwidth;
  document.getElementById(eid).height = newheight;
  scaleArea();
}

//     Assuming one image map in document.
//     Assuming coordinates are comma-delimited in AREA COORDS= string.
//     Assuming the same zoom factor for the height as for the width of the image.

function getglobal(){ // place original AREA coordinate strings into a global array, called at load
  var arrayAreas = document.body.getElementsByTagName("area");
  GLOBAL_WIDTH = document.getElementById(eid).width; // get original width
  for(var i = 0; i < arrayAreas.length; i++) {
    GLOBAL_AREAS[i]= arrayAreas[i].coords;
  }
  GLOBAL_COUNT++;
}

function scaleArea() { // using values stored at load, recalculate new values for the current size
  var arrayAreas = document.body.getElementsByTagName("area");
  for(var i = 0; i < arrayAreas.length; i++) {
    var ii = i + 1;
    var rescale = document.getElementById(eid).width/GLOBAL_WIDTH ;
    var sarray = GLOBAL_AREAS[i].split(","); // convert coordinates to a numeric array assuming comma-delimited values
    var rarray = new Array();
    for(var j = 0; j < sarray.length; j++) {
      rarray[j] = parseInt(sarray[j]) * rescale; // rescale the values
      rarray[j] = Math.round(rarray[j]);
    } //alert( "GLOBAL " + GLOBAL_AREAS[i] + ":" + sarray.length + " SPLIT=" + sarray +rarray.length);  
    arrayAreas[i].coords=rarray.join(","); // put the values back into a string
  }
  showArea();
}

正如你所看到的，它们几乎是一样的。唯一的区别是顶部onw工作，而底部不工作。请帮忙。并感谢您解释它的工作原理（当然除了基础知识）。感谢名单！

1 个答案:

答案 0 :(得分：1)

<form>元素没有自然发生的负载＆＃39;因此，在您的代码版本中不会调用getglobal()。

尝试恢复<body onload="getglobal();">

或者，找一些其他方法来调用getglobal() - 例如，响应某些用户事件。

代码如何运作？

首先，HTML会导致DOM填充：

  • 包含两个按钮的<form>元素
  • <img>元素
  • 包含多个区域的<map>元素

文档的<body>元素附加了getglobal()作为其onload处理程序，这会导致设置几个全局变量：

  • GLOBAL_WIDTH：<img>元素的初始宽度。
  • GLOBAL_AREAS：图像地图的初始区域坐标数组，＆＃34; -264,320,442＆＃34;等
  • GLOBAL_COUNT：已设置但未使用。

通过设置一次这些全局变量，每次重新调整图像及其地图时，都可以做的事情少得多。

两个表单按钮分别给出了一个“点击”按钮。附加onclick处理程序的操作：

  • ＆＃34;缩小规模＆＃34; - onclick =＆＃34; scaleImageDown（）＆＃34;
  • ＆＃34;规模更大＆＃34; - onclick =＆＃34; scaleImageUp（）＆＃34;

两个函数scaleImageDown()和scaleImageUp()：

  • 将图像重新缩放0.5或2倍。
  • 循环遍历GLOBAL_AREAS数组并操纵区域节点＆＃39; coords属性，使每个坐标被划分或乘以2.这具有重新调整整个地图的预期效果。

效用函数scaleArea()的存在是为了避免重复scaleImageDown()和scaleImageUp()中的代码。

相关问题
最新问题