87,996
社区成员
发帖
与我相关
我的任务
分享JS获取id值失败
是一个web手机端网站，底部导航用的图片，根据图片宽高切割热点区域，但是js有时候获取不到图片的Height值，这样就点不动底部导航了。求指点下。
<div class="bottom" style="width:100%;margin:0 auto" id="aaa">
<img src="wode/img/dh4.png" width="100%" border="0" usemap="#planetmap" alt="Planets">
</div>
<map name="planetmap" id="planetmap">
<script>
var w = document.getElementById("aaa").clientWidth;
var h = document.getElementById("aaa").clientHeight;
var mw=w/4;
document.write("<area shape=\"rect\" coords=\"0,"+h+","+mw+",0\" href =\"index.php\"/>");
document.write("<area shape=\"rect\" coords=\""+mw+","+h+","+mw*2+",0\" href =\"fenlei.php\"/>");
document.write("<area shape=\"rect\" coords=\""+mw*2+","+h+","+mw*3+",0\" href =\"fuwu.php\"/>");
document.write("<area shape=\"rect\" coords=\""+mw*3+","+h+","+w+",0\" href =\"#\"/>");
</script>
</map>
...全文
请发表友善的回复…
发表回复
kymotz 2019-11-17
- 打赏
- 举报
使用css设置背景会预加载解析
「已注销」 2019-11-16
- 打赏
- 举报
还有个问题，其中有个页面是分类信息，在谷歌显示正常，但在手机上面图片不显示，点击分类商品也不会根据分类id上下调动，有php代码动态加载数据库的数据、
<?php
//ini_set( "error_reporting", "E_ALL & ~E_NOTICE");
header( "Access-Control-Allow-Origin: *"); //跨域
include( "./fenlei/php/getsj.php");
$flsj=Get_fenlei(); //获取分类数据
function fenlei_as($arr){
$strtr="";
for($e=0;$e<10;$e++){
if($arr[$e][0]["ok"]==1){
$strtr=$strtr."<div class=\"menuItem\" category=\"".$arr[$e][0]["title"]."\" statisticEvent=\"click\" statistic=\'{\"data\":{\"uu\":\"\",\"uc\":\"0\"},\"route\":\"click\"}\'>".$arr[$e][0]["title"]."</div>";
}
}
return $strtr;
}
function fenlei_bs($arr){
$strtr="";
$dx=0;
for($e=0;$e<10;$e++){
if($arr[$e][0]["ok"]==1){
$strtr=$strtr."<div class=\"categoryList\" category=\"".$arr[$e][0]["title"]."\"><div class=\"title\">".$arr[$e][0]["title"]."</div>";
$dx=count($arr[$e]);
if($dx>1){
for($y=1;$y<$dx;$y++){
$strtr=$strtr."<div class=\"categoryItem\" onclick=\"window.open('./spxqy.php?id=".$arr[$e][$y]["id"]."')\" data-url=\"/category/detail/0\" data-seccategory=\"-1\">";
$strtr=$strtr."<div class=\"categoryIcon lazyLoad\" data-original=\"".$arr[$e][$y]["imgurl"]."\"></div><div class=\"cursorArea\"></div>";
$strtr=$strtr."<span class=\"text\">".$arr[$e][$y]["title"]."</span><span class=\"text\" color=\"#FF0000\">￥".$arr[$e][$y]["jiage"]."</span></div>";
}
}
$strtr=$strtr."</div>";
}
}
return $strtr;
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<link href="fenlei/css/flaa.css" type="text/css" rel="stylesheet" />
<title>分类</title>
<style type="text/css">
body {
font-size: 12px;
margin: 0;
padding: 0;
font-family: Microsoft Yahei, Arial, Simsun, Helvetica, Segoe UI, sans-serif;
}
</style>
<script type="text/javascript" src="fenlei/js/zepto.js"></script>
<script type="text/javascript" src="fenlei/js/aax.js"></script>
<script type="text/javascript" src="fenlei/js/zepto.picLazyLoad.min.js"></script>
</head>
<body>
<div id="contentbox">
<div class="menu">
<?php
echo fenlei_as($flsj);
?>
</div>
<div class="categoryBox">
<div class="categoryContent">
<?php
echo fenlei_bs($flsj);
?>
</div>
</div>
</div>
<div class="bottom" style="width:100%;margin:0 auto" id="aaa"><img src="fenlei/img/dh2.png" width="100%" border="0" usemap="#planetmap" alt="Planets"></div>
<map name="planetmap" id="planetmap">
</map>
<script>
window.onload = function () {
var w = document.getElementById("aaa").clientWidth;
var h = document.getElementById("aaa").clientHeight;
var mw=w/4;
var str = "<area shape=\"rect\" coords=\"0,"+h+","+mw+",0\" href =\"index.php\"/>"
+ "<area shape=\"rect\" coords=\""+mw+","+h+","+mw*2+",0\" href =\"#\"/>"
+ "<area shape=\"rect\" coords=\""+mw*2+","+h+","+mw*3+",0\" href =\"fuwu.php\"/>"
+ "<area shape=\"rect\" coords=\""+mw*3+","+h+","+w+",0\" href =\"wode.php\"/>";
document.getElementById("planetmap").innerHTML = str;
}
</script>
</body>
</html>
天际的海浪 2019-11-16
- 打赏
- 举报
你的必须要等图片加载完成才能获取其高度啊
<div class="bottom" style="width:100%;margin:0 auto" id="aaa">
<img src="wode/img/dh4.png" width="100%" border="0" usemap="#planetmap" alt="Planets">
</div>
<map name="planetmap" id="planetmap">
</map>
<script>
window.onload = function () {
var w = document.getElementById("aaa").clientWidth;
var h = document.getElementById("aaa").clientHeight;
var mw=w/4;
var str = "<area shape=\"rect\" coords=\"0,"+h+","+mw+",0\" href =\"index.php\"/>"
+ "<area shape=\"rect\" coords=\""+mw+","+h+","+mw*2+",0\" href =\"fenlei.php\"/>"
+ "<area shape=\"rect\" coords=\""+mw*2+","+h+","+mw*3+",0\" href =\"fuwu.php\"/>"
+ "<area shape=\"rect\" coords=\""+mw*3+","+h+","+w+",0\" href =\"#\"/>";
document.getElementById("planetmap").innerHTML = str;
}
</script>
