jquery - 将悬停状态添加到图像的一小部分

Question

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

编号框需要有一个悬停状态，将其背景颜色变为橙色，并将其编号变为白色。

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

平面图

score 4 · Accepted Answer

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

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

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

编辑：修改示例以允许在 IE6 中悬停，正如@Marcio 所指出的那样。

score 0 · Accepted Answer

为所有带数字的框定义类名并使用CSS伪类如下

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

请更多地将其视为突出图像部分的示例，而不是如何制作图像地图区域定义工具.. :)

哦，在我忘记之前-您可以在开发人员模式下查看页面以复制创建的区域标签-我真的应该将它们复制到文本区域中以便于复制粘贴..

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

jquery - 将悬停状态添加到图像的一小部分

4 回答 4

Related

Reference