Jquery 向图像的小部分添加悬停状态
下面描述的是以常规html文件显示的楼层平面图。它只是一个大图像，在应用样式之前，应该将编号的元素块像素完美地放置在上面 编号框需要有一个悬停状态，使其背景颜色变为橙色，数字变为白色 我想知道是否有可能在不使用flash的情况下实现这一点。是吗Jquery 向图像的小部分添加悬停状态,jquery,html,css,Jquery,Html,Css,下面描述的是以常规html文件显示的楼层平面图。它只是一个大图像，在应用样式之前，应该将编号的元素块像素完美地放置在上面 编号框需要有一个悬停状态，使其背景颜色变为橙色，数字变为白色 我想知道是否有可能在不使用flash的情况下实现这一点。是吗 为所有带数字的框定义一个类名，并使用CSS伪类，如下所示 .classname:hover { background-color:color; font-
为所有带数字的框定义一个类名，并使用CSS伪类，如下所示
.classname:hover
{
background-color:color;
font-color:color;
}
这完全有可能。通常HTML中的元素定位在“流”中，但您可以使用
absolute顶部左侧底部右侧相对绝对固定#roomXXXX编辑：修改示例以允许在IE6中悬停，正如@Marcio所指出的。如果整个内容（包括框和数字）都是图像，则无法使用CSS使用悬停属性并尝试更改颜色来更改图像本身。您可以覆盖并使其显示在上方，也可以使用图像覆盖每个框的另一个版本。使用Photoshop/Image Ready，您可以对图像进行切片并创建悬停效果；将整个内容导出为可用的网页。我可以想出几种方法。但他们都依赖html5。我会在图片前面放一块透明的画布。我的自然倾向是用彩色矩形覆盖图像，尽管直接访问图像中的像素并创建悬停区域的精确“负片”并不太麻烦 根据一个关于在悬停上突出显示imgmap区域标记的问题，我提出了以下解决方案。可以单击以定义右侧图像上的点（对于有用的形状，最小值为3），单击“添加多边形”，然后将同一区域悬停在左侧图像上
请把它作为一个突出显示图像的一部分的例子，而不是如何做一个图像映射区域定义工具…..）p> 哦，在我忘记之前-你可以在开发者模式下查看页面来复制创建的区域标记-我真的应该将它们复制到一个文本区域以便复制粘贴
代码使用Chrome进行测试<!DOCTYPE html>
<html>
<head>
<script>
var canvas, hdc, markerImg;
var curPoints;
function byId(e){return document.getElementById(e);}
function canvasClick2(e)
{
e = e || event;
var x, y;
x = e.offsetX;
y = e.offsetY;
curPoints.push(x);
curPoints.push(y);
hdc.drawImage(markerImg, x- markerImg.width/2, y-markerImg.height/2);
n = curPoints.length;
var str = ''
for (i=0; i<n; i++)
{
if (i != 0)
str += ', ';
str += curPoints[i];
}
byId('coords').innerHTML = str;
}
function myInit()
{
curPoints = new Array();
canvas = byId('canvas1');
hdc = canvas.getContext('2d');
markerImg = new Image();
// just a 5x5 pixel +
markerImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2NkQID/QCYjiAsmoABFEMRBAThVYmgHAAhoBQWHhfyYAAAAAElFTkSuQmCC";
canvas.addEventListener('click', canvasClick2, false);
var img = byId('img1');
canvas.setAttribute('width', img.width);
canvas.setAttribute('height', img.height);
// canvas.style.backgroundImage = 'url(img/gladiators.png)';
canvas.style.backgroundImage = 'url(http://i.stack.imgur.com/Rw5pL.png)';
var x,y, w,h;
// get it's position and width+height
x = img.offsetLeft;
y = img.offsetTop;
w = img.clientWidth;
h = img.clientHeight;
// move the canvas, so it's contained by the same parent as the image
var imgParent = img.parentNode;
var can = byId('canvas2');
imgParent.appendChild(can);
// place the canvas in front of the image
can.style.zIndex = 1;
// position it over the image
can.style.left = x+'px';
can.style.top = y+'px';
// make same size as the image
can.setAttribute('width', w+'px');
can.setAttribute('height', h+'px');
var ctx = can.getContext('2d');
ctx.lineWidth = 3;
ctx.strokeStyle = 'red';
}
function myClear()
{
hdc.clearRect(0,0, canvas.width, canvas.height);
curPoints.length = 0;
byId('coords').innerHTML = '';
}
function myAddShapePoly()
{
var src, tgt = byId('imgMap1'), coordStr;
src = byId('coords');
coordStr = src.innerHTML;
var newArea = document.createElement('area');
newArea.setAttribute('shape', 'polygon');
newArea.setAttribute('coords', coordStr);
newArea.setAttribute('title', 'polygon');
newArea.setAttribute('onclick', 'alert("area clicked");');
newArea.onmouseout = myLeave;
newArea.onmouseover = function(){myHover2(this);};
tgt.appendChild(newArea);
myClear();
}
function myHover2(element)
{
var hoveredElement = element;
var coordStr = element.getAttribute('coords');
var areaType = element.getAttribute('shape');
switch (areaType)
{
case 'polygon':
case 'poly':
fillPoly(coordStr);
break;
case 'rect':
fillRect(coordStr);
}
// byId('img1').style.cursor = 'pointer';
}
function myLeave()
{
var canvas = byId('canvas2');
var hdc = canvas.getContext('2d');
hdc.clearRect(0, 0, canvas.width, canvas.height);
// byId('img1').style.cursor = '';
}
function fillRect(coOrdStr)
{
var canvas = byId('canvas2');
var hdc = canvas.getContext('2d');
var mCoords = coOrdStr.split(',');
var top, left, bot, right;
left = mCoords[0];
top = mCoords[1];
right = mCoords[2];
bot = mCoords[3];
var canvas = byId('myCanvas');
var tmp = hdc.fillStyle;
hdc.fillStyle = "rgba(255,0,0,0.3);";
hdc.fillRect(left,top,right-left,bot-top);
hdc.strokeRect(left,top,right-left,bot-top);
hdc.fillStyle = tmp;
}
// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function fillPoly(coOrdStr)
{
var mCoords = coOrdStr.split(',');
var i, n;
n = mCoords.length;
var canvas = byId('canvas2');
var hdc = canvas.getContext('2d');
hdc.beginPath();
hdc.moveTo(mCoords[0], mCoords[1]);
for (i=2; i<n; i+=2)
{
hdc.lineTo(mCoords[i], mCoords[i+1]);
}
hdc.lineTo(mCoords[0], mCoords[1]);
tmp=hdc.fillStyle;
hdc.fillStyle = "rgba(255,0,0,0.3);";
hdc.stroke();
hdc.fill();
hdc.fillStyle = tmp;
}
</script>
<style>
body
{
background-color: gray;
}
#canvas1
{
cursor: crosshair;
}
#canvas2
{
pointer-events: none; /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
position: absolute;
}
.heading
{
font-weight: bold;
font-size: 24px;
}
</style>
</head>
<body onload='myInit();'>
<div align='center'>
<img src='http://i.stack.imgur.com/Rw5pL.png' id='img1' usemap='#imgMap1'/>
<map name='imgMap1' id='imgMap1'>
</map>
<canvas id='canvas2'></canvas>
<canvas id='canvas1' width='200' height='200'></canvas>
<br>
<input type='button' onclick='myClear();' value='clear'/>
<input type='button' onclick='myAddShapePoly();' value='addPolygon'/>
<br>
<span id='coords'></span>
</div>
</body>
</html>
var画布、hdc、markerImg；
var凝乳点；
函数byId（e）{returndocument.getElementById（e）；}
功能画布点击2（e）
{
e=e | |事件；
变量x，y；
x=e.offsetX；
y=e.offsetY；
凝乳点。推（x）；
凝乳点。推（y）；
hdc.drawImage（markerImg，x-markerImg.width/2，y-markerImg.height/2）；
n=curPoints.length；
var str=''
对于（i=0；如果您将所有部分转换为单独的元素并将其定位为图像中的位置，则可能会出现这种情况。不需要flash，但可能需要一段时间才能正确定位。是的。这是可能的。使用CSS:hover伪类。如果需要在所有浏览器中工作：hover在IE 6中不工作，因此您应该小心。不正确。虽然存在lo使用：在IE6中悬停，如果应用于链接（a
）如果没有任何过滤器，应该没问题。你没有抓住重点。我的提问可能不够清楚，但问题是，在应用任何悬停之前，这些框需要精确地放置在它们相应的位置。因此，首先需要的是一种定位元素的方法，以便将它们放置在这张地图上（这只是一张大图）。这看起来正是我所需要的。但是，如果使用绝对定位，这不会打乱文档中具有常规相对定位的其他元素吗？（此平面图之外的元素，即页眉/页脚等…不-绝对
元素从文档流中取出，因此它们不会真正影响文档中的其余元素。它们当然可以出现在它们的上方等，但只要将它们包装在相对
位置.floorplan
div，它们将仅出现在其中。嘿@Amelia–如果它能为您提供问题的解决方案，您能将其标记为答案吗？