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 3 2019, 01:10 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Here's one idea. The large image could also be a CSS background of the DIV container. Note that it adds a hash value to the URL as well.
CSS: CODE #container { position: relative; width: 500px; height: 300px; border: solid; } .icon { position: absolute; top: 0; left: -9999em; } #a:target { top: 100px; bottom: auto; left: 100px; right: auto; } #b:target { top: auto; bottom: 0; left: auto; right: 0; } HTML: CODE <div id="container"> <img src="dog.jpg" width="500" height="300" alt="Map"> <img src="small.gif" width="20" height="20" alt="A" class="icon" id="a"> <img src="small.gif" width="20" height="20" alt="B" class="icon" id="b"> </div> <ul> <li><a href="#a">Item a</a></li> <li><a href="#b">Item b</a></li> </ul> |
bevhoward |
Jan 3 2019, 01:22 PM
Post
#3
|
Group: Members Posts: 2 Joined: 2-January 19 Member No.: 26,788 |
Thanks!
You underestimate my html skills, but I will take the sample and try to start learning and will probably be back with questions. fwiw, I'm programming a "Universal Remote" that has so many options that I need to create an easy reference to connect items in a list of commands to the button location on a picture of the remote. Thanks again, Beverly Howard |
Christian J |
Jan 3 2019, 04:25 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Basically, the icons are positioned out of view by default. Then if the URL hash (the URL part beginning with a # character) matches one of the icon IDs, that icon will be positioned at its predetermined place in front of the large image. To change the URL hash you can use ordinary links. See also https://developer.mozilla.org/en-US/docs/Web/CSS/:target
A disadvantage with URL hashes is that the browser will try to scroll until the matching icon is at the top of the view port. This might become a problem if the page can be scrolled above or below the large image. If you don't want such side-effects it might be better to use some other technique, like Javascript. I could try writing something perhaps tomorrow. |
Christian J |
Jan 5 2019, 11:32 AM
Post
#5
|
. Group: WDG Moderators Posts: 9,656 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: 26th April 2024 - 09:16 AM |