CODEWITHSUNDEEP
htmlcss
rockydude
rockydude

Reputation: 83

How do add a mouse over text on selected area of an image?

I have this image and i would like to add a mouse over text on the selected area of this image.

For example if you look at this image and mouse over on the letter A, i would like to add a small description in a box. how is this be done ?

can someone please help.

thanks

Upvotes: 2

Views: 1896

Answers (4)

Dutchie432
Dutchie432

Reputation: 29170

Here is my solution to your question. DEMO (shows how to do it with 2 points)

It involves a relatively positioned div with your image as the background. Then there are some absolutely positioned "Hover Points" that trigger the tooltip.

Once you get this working, you can remove the red borders and style the tooltip however you'd like.

HTML

<div id="image">
    <div class="hoverPoint" style="top:312px;left:178px;" data-content="This is a test (A)"></div>
    <div class="hoverPoint" style="top:37px;left:379px;" data-content="This is a test (C)"></div>
    <div id="tooltip"></div>    
</div>

jQuery

$('.hoverPoint').mouseenter(function(){
    $('#tooltip')
        .css({
            top: ($(this).position().top-30) + 'px',
            left: $(this).position().left + 'px'
         })
         .html( $(this).data('content') )
         .show();
}).mouseleave(function(){
    $('#tooltip')
        .html('')
        .hide();
});

CSS

#image{
    background:url(http://oi44.tinypic.com/2ur9to5.jpg) no-repeat;
    width:888px;
    height:441px;
    position:relative;
}
#tooltip{
    position:absolute;  
    background:#fff;
    border:1px solid #999;
    padding:4px;
    display:none;
}
.hoverPoint{
    position:absolute;
    width:47px;
    height:47px;
    border:1px solid #f00;
    cursor:pointer;
}

Upvotes: 3

phemt.latd
phemt.latd

Reputation: 1803

The unique way that i know to do that is a a bit cumbersome to map the point of every region. For exampe you can imagine a rect that bound the lecter A. If the moouse over the image is into this range of point you can append in this position a DOM element or do some stuff.

For example you can imagine this solution:

var zona1X = new Array(400, 438, 438, 394);
var zona1Y = new Array(305, 355, 284, 280);

var zona2X = new Array(450, 580, 580, 450);
var zona2Y = new Array(360, 500, 270, 270);

var zona3X = new Array(360, 370, 430, 400);
var zona3Y = new Array(320, 390, 360, 320);

then

$('.yourElement').mousemove(function (e) {
    var height = 545; //yourElementHeight
    var x = e.offsetX;
    var y = height - e.offsetY;
    var isHover = false;

    x += ($(e.srcElement).offset().left - $(this).offset().left);
    y += ($(this).offset().top - $(e.srcElement).offset().top);


    if (pnpoly(zona1X.length, zona1X, zona1Y, x, y) && !isHover) {
        //Do some stuff!
    }

    if (pnpoly(zona2X.length, zona2X, zona2Y, x, y) && !isHover) {
        //Do some stuff!
    }

    //etc...

    if (isHover) {
        $(this).css('cursor', 'pointer');
    } else {
        $(this).css('cursor', 'auto');
    }
});

and this is the function to interpolate the point:

function pnpoly(nvert, vertx, verty, testx, testy) {
    var i, j, c = false;
    for (i = 0, j = nvert - 1; i < nvert; j = i++) {
        if (((verty[i] > testy) != (verty[j] > testy)) &&
        (testx < (vertx[j] - vertx[i]) * (testy - verty[i]) / (verty[j] - verty[i]) + vertx[i])) {
            c = !c;
        }
    }
    return c;
}

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157414

How about achieving that with pure CSS, am just using CSS positioning to set the circle correctly on the edge of the triangle, and than am using content: attr() property, in which am calling the custom attribute declared by me which is data-title, so that's all, rest is self explanatory.

Demo

Demo 2 (2 Dots)

HTML

<div>
    <img src="http://wilsonsch3u-01-2012.wikispaces.com/file/view/triangle.png" alt="" />
    <span data-title="This is a custom title"></span>
</div>

CSS

div {
    width: 200px;
    position: relative;
}

div img {
    max-width: 100%;
}

div span {
    height: 20px;
    width: 20px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    bottom: 25px;
    z-index: 1;
}

span:hover:after {
    content: attr(data-title);
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 13px;
    font-family: Arial;
    width: 200px;
    top: 15px;
    padding: 10px;
    position: absolute;
}

Note: You can also achieve this using background-image instead of img

Upvotes: 2

Randy
Randy

Reputation: 4401

Use the :hover selector

css:

.divWithMessage:hover > .message {
    display: block
}

html:

<div class="divWithMessage">
    A
    <div class="message">This is a message. Use CSS to position it.</div>
</div>

Upvotes: 1

Related Questions