Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Doe
John Doe
2,440 Points

Creating an unordered list whose list items control the display of an image container

Hi everyone I am trying to recreate the feature shown here http://bike.sombriocartel.com/shopsplash/

But I am stuck on how to build the functionality of switching between the images when hovering over their respective list items.

<div class="world-map">
  <ul class="region-list">
     <li>Europe<li> 
     <li>America</li>
     <li>Africa</li>
     <li>Asia</li>
  </ul>
  <div class="image-container">
     <img class="default" src='images/map/default-world-map.png'>
     <img class="europe-hover" src='images/h-europe.png'>
     <img class="america-hover" src='images/h-america.png'>
     <img class="africa-hover" src='images/h-africa.png'>
     <img class="asia-hover" src='images/h-asia.png'>
  </div>
</div>
```html

Thank you for your time!

1 Answer

Steve McKinney
Steve McKinney
29,274 Points
Steve McKinney
Steve McKinney
29,274 Points

You need to be able to link up each list item to the image. At the moment there is no way to identify this.

Your html now

<div class="world-map">
    <ul class="region-list">
       <li data-region="europe">Europe<li> 
       <li data-region="america">America</li>
       <li data-region="africa">Africa</li>
       <li data-region="asia">Asia</li>
    </ul>
    <div class="image-container">
       <img class="default" src='images/map/default-world-map.png'>
       <img class="europe-hover" src='images/h-europe.png'>
       <img class="america-hover" src='images/h-america.png'>
       <img class="africa-hover" src='images/h-africa.png'>
       <img class="asia-hover" src='images/h-asia.png'>
    </div>
</div>

Javascript

The javascript may be a little modern, but I'm basically looping through each of the li elements and then adding event listeners to use the data-region to find the img with the corresponding class + '-hover'. Then I toggle the active class, it's not totally dry code so maybe someone can improve on it for me.

document.addEventListener('DOMContentLoaded', function() {
    [].forEach.call(document.querySelectorAll('[data-region]'), function(el) {
        el.addEventListener('mouseover', function(e) {
                document.querySelector('.' + this.dataset.region + '-hover').classList.toggle(this.dataset.region + '-active');
        });
        el.addEventListener('mouseleave', function(e) {
                document.querySelector('.' + this.dataset.region + '-hover').classList.toggle(this.dataset.region + '-active');
        });
    });
  });
Steve McKinney
Steve McKinney
29,274 Points

My explanation is a little rushed too, I'll explain my javascript further if you require it, so let me know.

John Doe
John Doe
2,440 Points

Thank you for taking the time to answer Steve I will study your code and try to implement it as soon as I get back home!

Although I think i get the gist of it a more detailed explanation would be welcome.

Steve McKinney
Steve McKinney
29,274 Points

The top entry here does a better explanation of what I can about why using [].forEach.call(), some people disagree with using this but without creating some helper functions it does the trick. http://stackoverflow.com/questions/16053357/what-does-foreach-call-does-in-javascript

But I've commented line for line what each thing does.

// Make sure dom has loaded, not necessary if you put your javascript at the bottom though
document.addEventListener('DOMContentLoaded', function() {

    // Loop through each [data-region] element
    // we need to loop through each one as querySelectorAll returns an array
    // using just querySelector selects the first one only
    [].forEach.call(document.querySelectorAll('[data-region]'), function(el) {

      // el is the [data-region] we are hovering
      el.addEventListener('mouseover', function(e) {
          // now we can use querySelector to select the element because we have one element in this context
          // this.dataset.region gets our data-attribute
          // classList gives us access to toggling class names so we use the this.dataset.region to identify the element correctly
          document.querySelector('.' + this.dataset.region + '-hover').classList.toggle(this.dataset.region + '-active');
      });

      // basically the same for as above just to make sure the active class is removed
      el.addEventListener('mouseleave', function(e) {
          document.querySelector('.' + this.dataset.region + '-hover').classList.toggle(this.dataset.region + '-active');
      });
    });
  });

I hope I've explained this well enough. There are alternatives to using dataset, such as getAttribute('data-region'), but dataset is the correct way but has less support. The same goes for classList.toggle, but should you need the extra browser support you can find fallbacks pretty easy on google/github etc.

John Doe
John Doe
2,440 Points

Thank you for taking the time to explain it Steve I have a better understanding on how to deal with this now.