CODEWITHSUNDEEP
javascriptcssimagehover
Dylan Daicy Siao
Dylan Daicy Siao

Reputation: 165

toggle pictures by hovering ul li

I need it to be a javascript solution only please. Please refer to this demo.

The goal is to hover the dots on the right bottom corner and swap the images accordingly. But what it does now is showing a blank page when hovering, and the whole ul becomes vertical and goes to top left corner. What did I do wrong here???

HTML:

<div id="wrapper">  
        <section id="contentWrapper">   
                <div id="resistorContent" class="content">
                    <section id="resistorDetail1"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg"></section>
                    <section id="resistorDetail2"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg"></section>
                    <section id="resistorDetail3"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg"></section>
                    <section id="resistorDetail4"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg"></section>
                    <ul>
                        <li onMouseOver="showDetail(resistorDetail1)"></li>
                        <li onMouseOver="showDetail(resistorDetail2)"></li>
                        <li onMouseOver="showDetail(resistorDetail3)"></li>
                        <li onMouseOver="showDetail(resistorDetail4)"></li>
                    </ul>
                </div>
        </section>
    </div>

JAVASCRIPT:

<script type="text/javascript">
                    var children = document.querySelectorAll('.content > section[id]')
                    function showDetail(target){
                        for (var i = 0, child; child = children[i]; i++) {
                        child.style.display = 'none';
                        }
                    document.getElementById(target).style.display = 'block';
                    }
                </script>

POSSIBLE COLLIDING CSS ?:

.content section:not(:first-child) {
    display: none;
}

Thank you in advance!!

Upvotes: 1

Views: 157

Answers (2)

Jim Buck
Jim Buck

Reputation: 2444

TL;DR

Here is the working fiddle: https://jsfiddle.net/2qz2srqs/3/

Reason

Your code was very close, but it had a few minor issues.

The first was a copy-paste error, you had two elements with the id of resistorDetail3.

Second, your syntax for the onmouseover event was incorrect. Prefix any javascript with javascript: and ensure it has proper syntax.

Third, your showDetail method expected a string id of the element to show. In your onmouseover declaration you had showDetail(resistorDetail1) instead of showDetail('resistorDetail1').

Finally, when you javascript is referenced in the HTML, you need to make sure you load the javascript first. Just by taking a look at the developer's console you could see that it through an error "showDetail is not defined.. I switched it to No wrap - in <body> and it worked fine.

BUT I highly recommend against directly referencing javascript from your HTML. Instead, load the HTML first and then use the DOM ready event of javascript to bind your events. That will increase your load time and make it easier to switch to something like jQuery/Zepto if needed.

Full Code

HTML

<section id="contentWrapper">
    <div id="resistorContent" class="content">
        <section id="resistorDetail1">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" />
        </section>
        <section id="resistorDetail2">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" />
        </section>
        <section id="resistorDetail3">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" />
        </section>
        <section id="resistorDetail4">
            <img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" />
        </section>
        <ul>
            <li onmouseover="javascript: showDetail('resistorDetail1')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail2')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail3')"></li>
            <li onmouseover="javascript: showDetail('resistorDetail4')"></li>
        </ul>
    </div>
</section>

JS

var children = document.querySelectorAll('.content > section[id]');

function showDetail(target) {
    for (var i = 0, child; child = children[i]; i++) {
        child.style.display = 'none';
    }
    document.getElementById(target).style.display = 'block';
}

CSS

(unchanged)

Upvotes: 3

dclowd9901
dclowd9901

Reputation: 6836

Here's another working fiddle.

https://jsfiddle.net/2qz2srqs/4/

The issue was a couple things.

  1. You were passing undefined vars into your onmouseover attributes. You wanted strings (I quoted them)

  2. In JSFiddle, you don't automatically get the window scope, so you have to assign a function as a property of a window if you want to be able to hit it with an event attribute.

Upvotes: 1

Related Questions