Home/ Questions/Q 8636125
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T10:09:00+00:00

I have some code here trying to display a picture, and then when mousing

  • 0

I have some code here trying to display a picture, and then when mousing over certain parts of it displaying a caption.

I have it working with text, but not the picture. I have barely used css ever, but fairly more familiar with html.
What is wrong here and how can i get it to work? ideally it should work the same as the word ‘sword.’

<html>
<body background="Gray.jpeg"> 

<style type="text/css">
ul, li {
    list-style: none;
}

ul.bindel {
    position: relative;
    float: center;
    width: 514px;
    height: 528px;
    /* background: url(Gladiators.jpeg) no-repeat; */
    background: url(http://4.bp.blogspot.com/_XJDCOO_PcIc/TRknvnbiNNI/AAAAAAAAEDg/6KPijl4Dtl0/s1600/Gladiators.jpg) no-repeat;
    border: 1px solid #000000;
}

ul.bindel li a span.caption {
    display: none;
    position: absolute;
    top: 20px;
    left: 50px;
    width: 270px;
    padding: 5px;
}

ul.bindel li a:hover {
    display: inline;
    cursor: pointer;
}

ul.bindel li a:hover span.caption {
    display: block;
    border: 3px solid #333333;
    color: white;
    font-size: 17px;
    background: #330000;
    text-align: left;
}

a.bl {
    width: 257px;
    height: 264px;
    margin-top: 0px;
    margin-left: 0px;
}

a.bl:hover {
    border: 3px solid #000000;
}

a.br {
    width: 257px;
    height: 264px;
    margin-top: 0px;
    margin-left: 258px;
}

a.br:hover {
    border: 3px solid #000000;
}

a.bind {
    position: relative;
}

a.bind span {
    display: none;
    position: absolute;
    top: 20px;
    left: 50px;
    width: 270px;
    padding: 5px;
}

a.bind:hover {
    display: inline;
    cursor: pointer;
}

a.bind:hover span {
    display: block;
    border: 3px solid #333333;
    color: white;
    font-size: 17px;
    background: #330000;
    text-align: left;
}
</style>
<center><br>
<a class="bind">Sword<span>The gladiators would use this in close combat.</span></a><br><br><br><br>

<ul class="bindel">
    <li><a id="bl"><span class="caption">Left Side</span></a></li>
    <li><a id="br"><span class="caption">Right side</span></a></li>
</ul>

</center></body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you can achieve that kind of functionality using an html ImageMap and some javascript.

    I can’t help but thinking that this is a rough-n-nasty implementation, in that it breaks when used with screen resolutions that differ to mine (1366×768). I think you could probably get over this, by placing both the image and the captions inside the same div. You could then make the position of the captions relative, instead of absolute. Then, your left and top co-ords would be relative to the container that holds the image, rather than relative to the top left of the browser window. Doing this would probably mean that the code would work on different sized screens, also it would continue to work if the image was no-longer centered on the page.

    The image-map co-ords were determined by drawing simple polygons around the sword and shield, keeping track of their x/y co-ords, before entering them into the html.

    Just change the src for the image (I used a local copy, sick of waiting to load each iteration of the test)

    Enjoy!

    <html>
<head>
<style type="text/css">
a.bind {
    position: relative;
}

a.bind span {
    display: none;
    position: absolute;
    top: 20px;
    left: 50px;
    width: 270px;
    padding: 5px;
    border: 3px solid #333333;
    color: white;
    font-size: 17px;
    background: #330000;
    text-align: left;
}

a.bind:hover {
    display: inline;
    cursor: pointer;
}

a.bind:hover span {
    display: block;
}

.caption
{
    display: none;
    border: 3px solid #333333;
    color: white;
    font-size: 17px;
    background: #330000;
    text-align: left;
    position: absolute;
    width: 270px;
}

#shieldCapt
{
    left: 920px;
    top: 380px;
}

#swordCapt
{
    left: 600px;
    top: 480px;
}
</style>

<script>
function myHover(element)
{
    var hoveredElement = element;
    var tgt = hoveredElement.getAttribute('tgt');
    tgt = document.getElementById(tgt);
    tgt.style.display = 'inline';
}

function myLeave(element)
{
    var hoveredElement = element;
    var tgt = hoveredElement.getAttribute('tgt');
    tgt = document.getElementById(tgt);
    tgt.style.display = 'none';
}
</script>

</head>

<body> 
<center>
<br>
<a class="bind">Sword<span>The gladiators would use this in close combat.</span></a>
<br>
<br>
<br>

<img src='img/gladiators.png' usemap='#imgMap'>
<map name="imgMap">
    <area id='swordPoly' shape="polygon" tgt='swordCapt' onmouseover='myHover(this);' onmouseout='myLeave(this);' coords="227,307,261,309, 339,354, 328,371, 240,331, 227,307">
    <area id='shieldPoly' shape="polygon" tgt='shieldCapt' onmouseover='myHover(this);' onmouseout='myLeave(this);' coords="413,245, 475,215, 473,200, 511,307, 526,388, 497,408, 454,422, 422,339, 413,245">
</map>

<br>
<span class='caption' id='shieldCapt'>The gladiators would defend themeselves with this.</span>
<span class='caption' id='swordCapt'>The gladiators would use this in close combat.</span>

</center>
</body>
</html>
    • 0