CODEWITHSUNDEEP
htmlcssimage
Thew
Thew

Reputation: 15959

Mapping a dot over an image

I have this gif image, but i want to place a dot on 261,274 on that image. The dot is 7px by 7px. How can i do this? I have tried this:

<table style="background: url('mainimage.gif'); width:513px; height:550px;">
    <tr>
        <td style="position:relative; top:274px; left:-261px; background: url('dot.gif'); width:7px; height:7px;"></td>
    </tr>   
</table>

And this:

<div style="background: url('mainimage.gif'); width:513px; height:550px;">
    <div style="position:relative; top:274px; left:-261px; background: url('dot.gif'); width:7px; height:7px;"></div>
</div>

But those doesn't seem to work properly.

I have also looked at the area element, but i can't realy figure out how to work with those.

EDIT: Jsfiddle's:

http://jsfiddle.net/3Ahfd/
http://jsfiddle.net/3Ahfd/1/

Upvotes: 0

Views: 3852

Answers (4)

Piotr Rochala
Piotr Rochala

Reputation: 7781

Try this:

<div style="background: url('mainimage.gif'); width:513px; height:550px;position:relative;">
    <div style="position:absolute; top:271px; left:259px; background: url('dot.gif'); width:7px; height:7px;"></div>
</div>

Note: adjust top and left of the inner div accordingly - I subtracted 3px from your coordinates to center the dot.

Upvotes: 2

Alp
Alp

Reputation: 29739

Use relative positionioning. There you go:

<div style="background: url('mainimage.gif'); width:550px; height:513px; position: relative;">
    <img src="dot.gif" style="position: relative; top:264px; left:258px; width:7px; height:7px;">
</div>

Fiddle: http://jsfiddle.net/alp82/3Ahfd/6/

Upvotes: 1

Babiker
Babiker

Reputation: 18798

<div style="background: url('mainimage.gif'); width:513px; height:550px; position:relative;">
    <div style="position:absolute; top:274px; left:261px; background: url('dot.gif'); width:7px; height:7px;"></div>
</div>

JSFiddle.

Upvotes: 1

Dave Kiss
Dave Kiss

Reputation: 10485

Instead of making the dot a background image of a div, I'd suggest just using it as an image tag and positioning it accordingly using margins.

Something like:

<div style="background: url('mainimage.gif'); width:513px; height:550px;">
    <img src="dot.gif" style="margin-top:274px; margin-left:-261px;" />
</div>

Upvotes: 0

Related Questions