Reference Map Options

[bevhoward]

Wonder if this is possible in html;

A page containing a list of items and a single image

When the viewer <clicks> or touches one of the list items;

...a highlight or other indicator shows the location of that item on the image.

I'm fairly well versed in html code, but in java and css, not so much.

Thanks in advance,
Beverly Howard

[Christian J]

Here's the javascript version. Each BUTTON and corresponding IMG element must be in the same order in their respective HTML containers.

CSS

CODE

#container {
position: relative;
width: 500px;
height: 300px;
border: solid;
}

#items button.current {color: blue; background: lime;}

#a {
position: absolute;
top: 100px;
left: 100px;
display: none;
}

#b {
position: absolute;
bottom: 0;
right: 0;
display: none;
}

Javascript

CODE

window.addEventListener('load', function()
{
    var icons=document.getElementById('icons');
    var img=icons.getElementsByTagName('img');

    var items=document.getElementById('items');
    var button=items.getElementsByTagName('button');

    for(var i=0; i<button.length; i++)
    {
        button[i].onclick=function()
        {
            // reset previously clicked button and icon
            for(var j=0; j<img.length; j++)
            {
                button[j].disabled=false;
                button[j].className='';
                img[j].style.display='none';
            }

            // currently clicked button and icon
            this.disabled=true;
            this.className='current';
            document.getElementById(this.dataset.item).style.display='inline';
        }
    }
}, false);

HTML:

CODE

<div id="container">
    <img src="dog.jpg" width="500" height="300" alt="">
    <div id="icons">
    <img src="small.gif" width="20" height="20" alt="a" id="a">
    <img src="small.gif" width="20" height="20" alt="b" id="b">
    </div>
</div>

<ul id="items">
<li><button data-item="a">Item a</button></li>
<li><button data-item="b">Item b</button></li>
</ul>