扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
图片上面做热点：
建网站原本是网站策划师、网络程序员、网页设计师等，应用各种网络程序开发技术和网页设计技术配合操作的协同工作。创新互联专业提供网站设计制作、成都网站制作,网页设计,网站制作(企业站、响应式网站、电商门户网站)等服务,从网站深度策划、搜索引擎友好度优化到用户体验的提升,我们力求做到极致!
img src="images/head.jpg" width="1000" height="812" border="0" usemap="#Map" /
map name="Map" id="Map"
area shape="rect" coords="206,126,276,171"rel="xhty" href="images/head.jpg" /
/map
网上下载jquery.min.js、jquery.fancybox-1.3.4.pack插件包。
再加上一段：
script language="javascript"
$(document).ready(function() {
$("area[rel=xhty]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
}
});
});
/script
点击热点对应会出现大图
html中图片热点map标签用法详解:
html中的map标签的意思是制作热点图片.
可以在一张图片中定义一些热点,如在地图上点击进入查看详情.
下面的示例 定义了 一个矩形 和 圆形的 热点
map name="map"
area shape="rect" mce_shape="rect" coords="75,75,99,99" mce_coords="75,75,99,99" nohref="nohref"
area shape="circ" mce_shape="circ" coords="50,50,25" mce_coords="50,50,25" nohref="nohref"
/map
coords 属性
area 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等
下面是几种可能：
圆形：shape="circle"，coords="x,y,z"
这里的 x 和 y 定义了圆心的位置（"0,0" 是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。请注意，定义举行实际上是定义带有四个顶点的多边形的一种简化方法。
注意：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
问题描述不是很清晰，你是不是想实现鼠标划过控制元素的显示和隐藏功能？
说明：隐藏的元素本身是无法触发鼠标经过的事件的，所以我们默认元素是可见的，然后用jq把元素的透明度（opacity）设为0，这个时候虽然也看不见，但是元素实际是存在那个位置的，可触发鼠标事件的，然后鼠标经过时，透明度设为1，即可。
原创不易，求满意。。。
以下是完整的html代码，拷贝到任意的html文件即可调试：
style
.promptStyle {
width: 200px;
height: 150px;
background-color: white;
position: absolute;
border: 1px solid #ddd;
}
/style
script src=""/script
script
function ShowPrompt(objEvent) {
var divObj = document.getElementById("promptDiv");
divObj.style.visibility = "visible";
divObj.style.left = objEvent.clientX + 10;
divObj.style.top = objEvent.clientY + 10;
}
function HiddenPrompt() {
divObj = document.getElementById("promptDiv");
divObj.style.visibility = "hidden";
}
$(function(){
$('#promptDiv').css('opacity',0).hover(function(){
$(this).animate({'opacity':1});
},function(){
$(this).animate({'opacity':0});
});
});
/script
鼠标移到这行字的下面试试
div id="promptDiv" class="promptStyle" Loudly. /div
应该是那块热点没那么大，所以无法点击，只能点击带文字的部分。你可以拿样式调整一下
本篇文章主要是对Jquery的Tabs内容轮换效果的实现代码进行了介绍。几行代码轻松搞定
代码如下:
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
titleJquery的Tabs内容轮换效果实现代码,几行搞定/title
script
language="javascript"
type="text/javascript"
src="/Scripts/jquery-1.4.4.min.js"/script
style
type="text/css"
*
{
margin:0;
padding:0;}
body
{
font:12px
Verdana,
Geneva,
sans-serif;
color:#404040;}
.tabs
{
margin:10px
20px;
width:360px;
position:relative;
overflow:hidden;
height:1%;
height:160px;}
.tabs
span
{
z-index:2;
font-size:12px;
border:1px
solid
#d5d5d5;
width:95px;
height:25px;
line-height:25px;
text-align:center;
float:left;
margin-right:5px;
cursor:pointer;}
span.active
{
background-position:0
-25px;
background-color:#d5d5d5;}
#tab-01,
#tab-02,
#tab-03
{
position:absolute;
top:26px;
left:0;
width:338px;
padding:10px;
height:93px;
border:1px
solid
#d5d5d5;
z-index:1;}
#tab-02,
#tab-03
{
display:none;}
/style
script
type="text/javascript"
$(document).ready(function
()
{
$('.tabs
span').mouseover(function
()
{
//div隐藏
$('.tabs
div').hide();
//查找.tabs
span同辈元素span
后面紧邻的同辈元素div显示
$(this).siblings('span').removeClass('active').end().addClass('active').next('div').show();
});
});
/script
/head
body
div
class="tabs"
!--
默认第一个tab为激活状态
--
span
class="active"热点新闻/span
div
id="tab-01"news/div
span娱乐新闻/span
div
id="tab-02"enteriment/div
span就业形势/span
div
id="tab-03"jobs/div
/div
/body
/html
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网