How can i change the li image when mouseover, im using .load to retrieve the image

user_16380261 0
Viewed 49

How can I interchange the li image when hover using .load, My code only show image1.

What I want to achieve is, whenever I hover to image2; image2 will appear in place holder, hover to image3; image 3 will appear.......

$(document).ready(function() {
  $(".result").mouseover(function() {
    $(".cardPlaceholder").load('/image1.html .CLASS ELEMENT').show();
    $(".cardholder").hide();
  }).mouseout(function() {
    $(".cardPlaceholder>img").attr('src', 'placeholder image.jpg').show();
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cardList">
  <li><span class="result">image 1</span>
    <img class="imgAlt" src="image1.jpg" alt="image 1" />
  </li>
  <li><span class="result">image 2</span>
    <img class="imgAlt" src="image12.jpg" alt="Image 2" />
  </li>
  <li><span class="result">image 3</span>
    <img class="imgAlt" src="image3.jpg" alt="Image 3" />
  </li>
</ul>

<div class="cardPlaceholder">
  <img class="cardholder" src="placeholder image.jpg" alt="">
</div>

jquery
1 Answers

Here you go.

  1. Create image tag on hover.
  2. Find your image url using next . $(this).next('.imgAlt').attr("src");.
  3. Give desire class on image what ever you want. img.className = "CLASS ELEMENT"
  4. Replace your default image with new image. $('.cardPlaceholder').html(img);
  5. Define default image and assign that when mouse out. $(".cardPlaceholder").html(defaultimage);

$(document).ready(function() {
  let defaultimage = `<img class="cardholder" src="placeholder image.jpg" alt="defaultImage">`;
  var img = new Image();
  $(".result").on("mouseover", function() {
    let url = $(this).next('.imgAlt').attr("src");
    img.src = url;
    img.className = "CLASS ELEMENT"
    $('.cardPlaceholder').html(img);

  }).mouseout(function() {
    $(".cardPlaceholder").html(defaultimage);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cardList">
  <li><span class="result">image 1</span>
    <img class="imgAlt" src="image1.jpg" alt="image 1" />
  </li>
  <li><span class="result">image 2</span>
    <img class="imgAlt" src="image2.jpg" alt="Image 2" />
  </li>
  <li><span class="result">image 3</span>
    <img class="imgAlt" src="image3.jpg" alt="Image 3" />
  </li>
</ul>

<div class="cardPlaceholder">
  <img class="cardholder" src="placeholder-image.jpg" alt="defaultImage">
</div>

Or

  1. Only change your image src and alt text from cardholder .
  2. Add or remove class from mouseover / mouseout.

$(document).ready(function() {
  let defaulturl = "placeholder-image.jpg";
  $(".result").on("mouseover", function() {
    let url = $(this).next('.imgAlt').attr("src");
    let alt = $(this).next('.imgAlt').attr("alt");
    $('.cardholder').attr("src", url).attr("alt", url);
    $('.cardholder').addClass("CLASS ELEMENT");

  }).mouseout(function() {
    $('.cardholder').attr("src", defaulturl).attr("alt", "default image");
    $('.cardholder').removeClass("CLASS ELEMENT");
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cardList">
  <li><span class="result">image 1</span>
    <img class="imgAlt" src="image1.jpg" alt="image 1" />
  </li>
  <li><span class="result">image 2</span>
    <img class="imgAlt" src="image2.jpg" alt="Image 2" />
  </li>
  <li><span class="result">image 3</span>
    <img class="imgAlt" src="image3.jpg" alt="Image 3" />
  </li>
</ul>

<div class="cardPlaceholder">
  <img class="cardholder" src="placeholder-image.jpg" alt="default image">
</div>

user_9651460
Related