Reference Map |
Reference Map |
bevhoward |
Jan 2 2019, 06:43 PM
Post
#1
|
Group: Members Posts: 2 Joined: 2-January 19 Member No.: 26,788 |
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 |
Jan 5 2019, 11:32 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,648 Joined: 10-August 06 Member No.: 7 |
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> |
Lo-Fi Version | Time is now: 16th April 2024 - 04:07 AM |