The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Reference Map
bevhoward
post 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


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 3 2019, 01:10 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,043
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
bevhoward
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 3 2019, 04:25 PM
Post #4


.
********

Group: WDG Moderators
Posts: 8,043
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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 5 2019, 11:32 AM
Post #5


.
********

Group: WDG Moderators
Posts: 8,043
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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 18th February 2019 - 01:21 PM