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:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.