jquery list hovering changing side img
I need to have a list of icons who are changing the image and title in the siding div whenever an <li>element is being hovered, there is a default image when nothing is being hovered ("i.png") which comes back whenever the user cursor leave the <ul>, here is the html:
$("#brain").hover(function() {
$("#brain img").css("opacity", "1");
$("#exp-img").attr("src", "a.png");
$("#icon-image-header").text("lorem");
});
$("#brain").mouseleave(function() {
$("#brain img").css("opacity", "0.5");
});
$("#body").hover(function() {
$("#body img").css("opacity", "1");
$("#exp-img").attr("src", "b.png");
$("#icon-image-header").text("ipsum");
});
$("#body").mouseleave(function() {
$("#body img").css("opacity", "0.5");
});
$("#planning").hover(function() {
$("#planning img").css("opacity", "1");
$("#exp-img").attr("src", "c.png");
$("#icon-image-header").text("dolor");
});
$("#planning").mouseleave(function() {
$("#planning img").css("opacity", "0.5");
});
$("#pen").hover(function() {
$("#pen img").css("opacity", "1");
$("#exp-img").attr("src", "d.png");
$("#icon-image-header").text("sit");
});
$("#pen").mouseleave(function() {
$("#pen img").css("opacity", "0.5");
});
$("#front").hover(function() {
$("#front img").css("opacity", "1");
$("#exp-img").attr("src", "e.png");
$("#icon-image-header").text("amet");
});
$("#front").mouseleave(function() {
$("#front img").css("opacity", "0.5");
});
$("#pie").hover(function() {
$("#pie img").css("opacity", "1");
$("#exp-img").attr("src", "f.png");
$("#icon-image-header").text("lorem");
});
$("#pie").mouseleave(function() {
$("#pie img").css("opacity", "0.5");
});
$("#bulb").hover(function() {
$("#bulb img").css("opacity", "1");
$("#exp-img").attr("src", "g.png");
$("#icon-image-header").text("ipsum");
});
$("#bulb").mouseleave(function() {
$("#bulb img").css("opacity", "0.5");
});
$("#db").hover(function() {
$("#db img").css("opacity", "1");
$("#exp-img").attr("src", "h.png");
$("#icon-image-header").text("dolor");
});
$("#db").mouseleave(function() {
$("#db img").css("opacity", "0.5");
});
$("#skills-icons").mouseleave(function() {
$("#icon-image-header").text("Lorem");
$("#exp-img").attr("src", "i.png");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="container">
<div class="col-2" id="our-expertise-image">
<div class="icon-image-container">
<img src="i.png" alt="" id="exp-img">
</div>
<h1 id="icon-image-header">
Lorem
</h1>
</div>
<div class="col-2" id="our-expertise-icons">
<h3 class="cat-header"><span>+</span>Lorem</h3>
<h1>Lorem Ipsum Dolor</h1>
<ul id="skills-icons">
<li id="brain"><img src="brain-icon.png" alt=""></li>
<li id="body"><img src="body-icon.png" alt=""></li>
<li id="planning"><img src="planning-icon.png" alt=""></li>
<li id="pen"><img src="pen-icon.png" alt=""></li>
<li id="front"><img src="front-icon.png" alt=""></li>
<li id="pie"><img src="piegraph-icon.png" alt=""></li>
<li id="bulb"><img src="bulb-icon.png" alt=""></li>
<li id="db"><img src="db-icon.png" alt=""></li>
</ul>
</div>
</article>Now this is actually working fine but I was wondering if there was any cleaner way of doing this. I'm a beginner in jquery but it seems really long.
Answers:
Here you go with a solution https://jsfiddle.net/9fczjsgu/
var dic = {
"brain" : {
img: "a.png",
text: "lorem"
},
"body" : {
img: "b.png",
text: "ipsum"
},
"planning" : {
img: "c.png",
text: "dolor"
},
"pen" : {
img: "d.png",
text: "sit"
},
"front" : {
img: "e.png",
text: "amet"
},
"pie" : {
img: "f.png",
text: "lorem"
},
"bulb" : {
img: "g.png",
text: "ipsum"
},
"db" : {
img: "h.png",
text: "dolor"
}
};
$("li").hover(function() {
$(this).find("img").css("opacity", "1");
$("#exp-img").attr("src", dic[$(this).attr('id').img]);
$("#icon-image-header").text(dic[$(this).attr('id').img]);
}).mouseleave(function() {
$(this).find("img").css("opacity", "0.5");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="container">
<div class="col-2" id="our-expertise-image">
<div class="icon-image-container">
<img src="i.png" alt="" id="exp-img">
</div>
<h1 id="icon-image-header">
Lorem
</h1>
</div>
<div class="col-2" id="our-expertise-icons">
<h3 class="cat-header"><span>+</span>Lorem</h3>
<h1>Lorem Ipsum Dolor</h1>
<ul id="skills-icons">
<li id="brain"><img src="brain-icon.png" alt=""></li>
<li id="body"><img src="body-icon.png" alt=""></li>
<li id="planning"><img src="planning-icon.png" alt=""></li>
<li id="pen"><img src="pen-icon.png" alt=""></li>
<li id="front"><img src="front-icon.png" alt=""></li>
<li id="pie"><img src="piegraph-icon.png" alt=""></li>
<li id="bulb"><img src="bulb-icon.png" alt=""></li>
<li id="db"><img src="db-icon.png" alt=""></li>
</ul>
</div>
</article>Create a dictionary (JSON), with ids as key & it will contain value again in a form of JSON with image & text.
Hope this will help you.