Stuck on some Javascript - Displaying image on Mouseover text
I am trying to more accurately reproduce the functionality of this page http://www.annedeckerarchitects.com/recognition/publications/ . The functionality I am referring to is hide something on the right and change the image on the left.
What I have; https://jsfiddle.net/7j2zkndx/3/
HTML:
<img class="global-image" />
<div class="scrolling-list">
<ul>
<li data-link="http://i.imgur.com/ne3L7hy.jpg">Link Test <a href="#">click for more</a></li>
<li data-link="http://i.imgur.com/mwa1Wwl.jpg">Link Test 2 <a href="#">click for more</a></li>
</ul>
</div>
Javascript;
var globalImage = $(".global-image").first();
$(".scrolling-list>li").each(function() {
var list = this;
var img = document.CreateElement("img");
img.src = $(list).getAttribute("data-link");
img.addEventListener("load", function() {
list.addEventListener("mouseOver", function() {
globalImage.src = $(list).getAttribute("data-link");
});
});
}();
CSS;
.scrolling-list {
width: 600px;
height: 600px;
overflow: scroll;
}
.global-image. .scrolling-list {
display: inline-block;
}
I honestly understand why it doesn't work. It would be better to assume that I am new to JS.
Thank.
source to share
globalImage
- jQuery collection. globalImage.src
will not change the src attribute of the element. Use jQuery attr function to set it. Plus, you need to be more careful with your capitalization. mouseOver
must be mouseOver
, CreateElement
must be CreateElement
.
$(".scrolling-list>li")
only works if yours <ul>
is equal <ul class="scrolling-list">
.
Finally, you might get into trouble if you assigned img.src
before adding an event handler onload
. If the image is cached, it might finish loading before the handler is available, which means your code won't execute at all.
var globalImage = $(".global-image").first();
$(".scrolling-list>li").each(function() {
var list = this;
var img = document.createElement("img");
img.addEventListener("load", function() {
list.addEventListener("mouseover", function() {
globalImage.attr("src", $(list).attr("data-link"));
});
});
img.src = $(list).attr("data-link");
console.log(img.src);
});
source to share
Another solution if you want to link:
HTML:
<img class="global-image" />
<div>
<ul class="scrolling-list">
<li data-link="https://i.imgur.com/ne3L7hy.jpg">Link Test <a href="#" class="aToBind">click for more</a></li>
<li data-link="https://i.imgur.com/mwa1Wwl.jpg">Link Test 2 <a href="#" class="aToBind">click for more</a></li>
</ul>
</div>
Javascript:
$("a.aToBind").mouseover(function(){
let liParent = $(this).parent("li");
$(".global-image").attr("src", $(liParent).attr("data-link"));
})
The "aToBind" class is only used to separate these "a" s from another "a" in the rest of the script.
source to share