Question

下面描述的是一个平面图，显示在常规的html文件中。它只是一个大图像，在应用样式之前，应该将编号元素块像素完美地放置在它上面。

编号框需要具有悬停状态，将其背景颜色变为橙色且数字为白色。

我想知道是否有可能实现这一目标而不必诉诸闪存。是吗？

floorplan

Answer 1

完全有可能。通常，HTML中的元素位于“流程”中，但您可以使用absolute定位将其取出。这允许您为任何top，left，bottom，right属性提供基于百分比或像素的值，并且元素将定位在该位置偏移处到最近的祖先元素，其位置设置为relative，absolute或fixed。

这是一个简化示例，其中包含您图像中的几个房间。您应该能够通过复制和粘贴来扩展它，然后在标记中添加新的房间，并通过在CSS中提供新的基于ID的#roomXXXX规则来更改它们的形状和位置。

http://jsfiddle.net/barney/kBvsr/

编辑：修改后的示例，允许在@Marcio指出的情况下悬停在IE6中。

Answer 2

为所有带数字的方框定义一个类名，并使用CSS伪类，如下所示

           .classname:hover
             {
            background-color:color;
              font-color:color;
               }

Answer 3

如果整个事物（包括方框和数字都是图像），则无法使用悬停属性使用CSS更改图像本身并尝试更改颜色。您可以叠加s并让它们显示在上方，或者您可以使用图像覆盖每个框的另一个版本。使用Photoshop / Image Ready，您可以切割图像并创建悬停效果;将整个内容导出为可用的网页。

Answer 4

我可以想到几种方法来做到这一点。他们都依赖html5。我使用放在图像前面的透明画布。我的自然倾向是用彩色矩形覆盖图像，但直接访问图像中的像素并创建一个准确的“负面”悬停区域并不会太麻烦。

关于在悬停时询问有关突出显示imgmap区域标签的问题后，我提出了以下解决方案。您可以单击以在右侧图像上定义点（有效形状的最小值为3），单击添加多边形，然后将相同区域悬停在左侧图像上。

请将其作为一种突出显示图像部分的方式的示例，而不是如何制作图像 - 地图区域定义工具.. :)

哦，在我忘记之前 - 你可以在developer-mode中查看页面来复制创建的区域标签 - 我真的应该将它们复制到文本区域以便于复制粘贴..

使用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>

将hoverstatus添加到图像的小部分

4 个答案: