<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/themes/blue/bi/bi.ui.core.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/blue/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="${bipagecontext.skinPath }/bi/bi.ui.image.css">
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/jquery-ui.custom.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/widget/bi.core.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/widget/dialog/bi.ui.opendialog.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/jquery/widget/toppanel/bi.ui.toppanel.js"></script>
<title>点击图片</title>
<style type="text/css">
*{
margin :0;
padding:0;
border: 0;
}
html,body{
width: 100%;
height: 100%;
}
body{
background-color: #FFFFFF;/*背景颜色*/
}
a,img{
width: 100%;
height: 100%;
display: block;
}
/*去除点击边框*/
map area{ outline: red; }
</style>
<script type="text/javascript">
var oldPicW = 3840; //原始图片宽
var oldPicH = 2160; //原始图片高
$(function(){
/********************************计算area标签的位置比例系数************************************/
//获取map标签里的所有area标签
var $area = $("#planetmap").find("area");
$.each($area,function(index,data){
var shape = $(data).attr("shape"); //获取area标签的shape属性（矩形rect，圆形circle，多边形poly）
var coordsArray = $(data).attr("coords").replace(/\"/g,"").split(","); //将area标签的coords转换成数组
var class_ = $(data).attr("class"); //获取area标签的class属性
if(shape=="rect"){ //矩形rect
//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
var coords_Array = [],ratio_Array = []; //coords_Array用于存放根据coords计算出来的比例系数数组
for(var j=0,len=coordsArray.length;j<len;j++){
if(j % 2 === 0){ //X坐标值
coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
}else{ //Y坐标值
coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
}
}
//ratio_Array作为比例系数数组形参重新计算位置坐标
ratio_Array = coords_Array.concat(ratio_Array);
reCoords_(class_,ratio_Array,shape,0);
$(window).resize(function() {
reCoords_(class_,ratio_Array,shape,0);
});
}else if(shape=="poly"){ //多边形poly
//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
var coords_Array = [],ratio_Array = [];
for(var j=0,len=coordsArray.length;j<len;j++){
if(j % 2 === 0){ //X坐标值
coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
}else{ //Y坐标值
coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
}
}
ratio_Array = coords_Array.concat(ratio_Array);
reCoords_(class_,ratio_Array,shape,0);
$(window).resize(function() {
reCoords_(class_,ratio_Array,shape,0);
});
}else if(shape=="circle"){ //圆形circle
//根据每个area标签的位置坐标计算出在整张图片的位置比例系数
var coords_Array = [],ratio_Array = [];
for(var j=0;j<2;j++){ //圆只有两个坐标值和一个半径，半径以最大的比率去缩放
if(j % 2 === 0){ //X坐标值
coords_Array.push(decimal_common(coordsArray[j]/oldPicW,4));
}else{ //Y坐标值
coords_Array.push(decimal_common(coordsArray[j]/oldPicH,4));
}
}
coords_Array.push(coords_Array[0]>=coords_Array[1]?coords_Array[0]:coords_Array[1]);//设置半径的比率
ratio_Array = coords_Array.concat(ratio_Array);
reCoords_(class_,ratio_Array,shape,coordsArray[2]);
$(window).resize(function() {
reCoords_(class_,ratio_Array,shape,coordsArray[2]);
});
}
});
/********************************三个鼠标点击的区域方法************************************/
$(".img_map_area01").on('click',function(){
var href_ = $(this).attr("href_");
var class_ = $(this).attr("class");
var setting ={
id :class_,
url:href_,
width : 560,
height :360,
draggable : true
}
$.bi.ui.frameDialog2(setting);
});
$(".img_map_area02").on('click',function(){
var href_ = $(this).attr("href_");
var class_ = $(this).attr("class");
var setting ={
id :class_,
url:href_,
width : 560,
height :360,
draggable : true
}
$.bi.ui.frameDialog2(setting);
});
/********************************鼠标悬浮的区域方法************************************/
$(".img_map_area03").hover(
function(){//鼠标悬浮在元素范围内执行该函数
var href_ = $(this).attr("href_");
var class_ = $(this).attr("class");
var setting ={
id :class_,
url:href_,
width : 560,
height :360,
modal : false,
draggable : true,
position : {
my: "left+5 top+5",//左上位置
of: event,
collision: "fit"
}
}
$.bi.ui.frameDialog2(setting);
},
function(){//鼠标移出元素范围内执行该函数
$.bi.ui.closeDialog("img_map_area03");
}
);
$(".img_map_area04").hover(
function(){
var href_ = $(this).attr("href_");
var class_ = $(this).attr("class");
var setting ={
id :class_,
url:href_,
width : 560,
height :360,
modal : false,
draggable : true,
position : {
my: "left+5 top+5",//左上位置
of: event,
collision: "fit"
}
}
$.bi.ui.frameDialog2(setting);
},
function(){
$.bi.ui.closeDialog("img_map_area04");
}
);
});
/**
* [根据比例系数数组重新计算位置坐标coords]
* @param {[type]} class_ [area的class]
* @param {[type]} ratio_Array [area的比例系数数组]
* @param {[type]} shape [area的shape属性]
* @param {[type]} radius [area为circle时的半径]
* @return {[type]} [description]
*/
function reCoords_(class_,ratio_Array,shape,radius){
var picw = $("#pic").width(); //当前图片的宽度
var pich = $("#pic").height(); //当前图片的高度
if(shape=="rect"){
//根据每个area标签的位置比例系数计算出新的坐标位置
var xy_arr = ratio_Array.map(function(item,index){
if(index % 2 === 0){ //X坐标值
return parseInt(picw*item);
}else{ //Y坐标值
return parseInt(pich*item);
}
});
var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
$("."+class_).attr("coords",'"'+xy_str+'"');
}else if(shape=="poly"){
//根据每个area标签的位置比例系数计算出新的坐标位置
var xy_arr = ratio_Array.map(function(item,index){
if(index % 2 === 0){ //X坐标值
return parseInt(picw*item);
}else{ //Y坐标值
return parseInt(pich*item);
}
});
var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
$("."+class_).attr("coords",'"'+xy_str+'"');
}else if(shape=="circle"){
//根据每个area标签的位置比例系数计算出新的坐标位置
var xy_arr = ratio_Array.map(function(item,index){
if(index == 0){ //X坐标值
return parseInt(picw*item);
}else if(index == 1){ //Y坐标值
return parseInt(pich*item);
}else{
return parseInt(radius*item);
}
});
var xy_str = xy_arr.join(","); //拼接出新的坐标位置coords
$("."+class_).attr("coords",'"'+xy_str+'"');
}
}
/**
* 小数保留n位，四舍五入
* @param {[type]} decimal [十进制小数]
* @param {[type]} n [保留小数点后有效位]
* @return {[type]} [十进制保留小数点后n位]
*/
function decimal_common(decimal,n){
var pv = Math.pow(10,n);
return Math.round(decimal*pv)/pv;
}
/*
* 计算比例像素
*/
/* $(function(){
var k1 = 780,h1 = 280;
var k2 = 150,h2 = 414;
console.log("k1取值为："+k1/1735*3840);
console.log("h1取值为："+h1/976*2160);
console.log("k2取值为："+k2/1735*3840);
console.log("h2取值为："+h2/976*2160);
}) */
</script>
</head>
<body>
<img src="page_xbjc.png" id="pic" usemap="#planetmap">
<map name="planetmap" id="planetmap">
<!-- 三个鼠标点击的区域 -->
<area class="img_map_area01" shape="rect" coords="2421,1411,2724,1590" href_ ="image.jsp" alt="汉堡王"/>
<area class="img_map_area02" shape="rect" coords="2582,1064,2675,1199" href_ ="image.jsp" alt="维多利亚的秘密"/>
<!-- 鼠标悬浮的区域 -->
<area class="img_map_area03" shape="poly" coords="2755,1261,2755,1095,2917,1095,3246,765,3246,620,3375,620,3375,929,3038,1261" href_ ="image.jsp" alt="中国东方航空贵宾休息室"/>
<area class="img_map_area04" shape="circle" coords="660,1020,100" href_ ="image.jsp" alt="心如莲花"/>
</map>
</body>
</html>
文章中的点击事件函数和鼠标悬浮事件函数，可以自己定义，本人用的是公司封装之后的dialog弹出框，如有什么不懂的可以给我留言~
3299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
