CODEWITHSUNDEEP
javascriptjqueryonmouseoverjquery-hover
Andres Quintero
Andres Quintero

Reputation: 253

Display image when hover over text

I'm creating a simple inventory app, and currently have a table that lists all the items in stock. I would like an image of each item to display when the user hovers over the description of each item, but there could be many different items in the list and each has it's own picture. I was testing some code with the items below but it doesn't work correctly because only image displays for both items.

How can I get a different image to display for each item I have in a list?

HTML

 <li>
<a href="#">Get Well</a>
<div class="place-image"><img src="../img/Get%20Well.jpg"></div>
</li>

<li>
<a href="#">I Love You</a>
<div class="place-image"><img src="../img/I%20Love%20You.jpg"></div>
</li>

Javascript

$('a').hover(
function() {
    $('.place-image').fadeIn('slow');
},function() {
    $('.place-image').fadeOut('slow');
}
);

Upvotes: 3

Views: 29065

Answers (4)

bikash.bilz
bikash.bilz

Reputation: 821

The best way is that you just use jQuery.

  1. Link the jQuery library to your project, place it inside header tag
  2. Follow the code

$(".Your_class").mouseenter(function(){
        if ($(this).parent('div').children('div.image').length) {
            $(this).parent('div').children('div.image').show();
        } else {
            var image_name=$(this).data('image');
            var imageTag='<div class="image" style="position:absolute;">'+'<img src="'+image_name+'" alt="image" height="100" />'+'</div>';
            $(this).parent('div').append(imageTag);
        }
    });

    $(".Your_class").mouseleave(function(){
        $(this).parent('div').children('div.image').hide();
    });
<html>
<head>
<title>Bikash Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div>
    <a class="Your_class" href="#" data-image="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">Show Image</a>
</div>
<div style="margin-left:250px;">
    <a class="Your_class" href="#" data-image="https://i.sstatic.net/q1b4w.jpg?s=64&g=1">Another Image</a>
</div>
</body>
</html>

  1. data-image :-Keep your image name here
  2. Give appropriate styles to the div(imageTag string)fi

Upvotes: 9

cnexans
cnexans

Reputation: 994

Just a recommendation, it is normally better to hide rather than destroy, browsers will thank you.

Why? When you turn display block to none, or none to block, the browser has to destroy the element and render it again. When you just hide it, the browser just has to position it.

HTML

<a href="#"><div class="hover-img">
  Show Image
   <span><img src="http://placehold.it/150x150" alt="image" height="100" />      </span>
</div></a>

CSS

a .hover-img { 
  position:relative;
 }
a .hover-img span {
  position:absolute; left:-9999px; top:-9999px; z-index:9999;
 }
a:hover .hover-img span { 
  top: 20px; 
  left:0;
 }

See it running https://jsfiddle.net/b5Lvq7yL/

On the other hand, given that you want to use javascript in order to make it more reusable and maintainable, I suggest you to combine the idea with some generic CSS and think of it as something you'll probably want to use later for other sections of the software (or other projects)

In fact, you can generalize.

You can have a trigger selector ".onhover-toggle-child-class", which takes its child from "data-target" and toggles the classes in "data-toggle" whenever the mouse enters and leaves..

Using the same HTML you have, but other CSS classes

<div>
  <a href="#" class="relative onhover-toggle-child-class" data-target=".target" data-toggle="hidden shown">Show Image
    <span class="absolute target hidden on-top">
      <img src="http://placehold.it/150x150" alt="image" height="100" />
    </span>
  </a>
</div>

<div>
  <a href="#" class="relative onhover-toggle-child-class" data-target=".target2" data-toggle="hidden shown">Show Image
    <span class="absolute target2 on-top hidden">
      <img src="http://placehold.it/150x150" alt="image" height="100" />
    </span>
  </a>
</div>

Some super generic CSS. 

.on-top {
  z-index: 99;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.shown {
  display: block;
}

.hidden {
  display: none;
}

And some javascript (using jQuery)

$('.onhover-toggle-child-class').on(
  'mouseenter mouseleave',
  function() {
    var element = $(this);
    var selector = element.data('target');
    var child = element.find(selector);
    var classes = element.data('toggle');


    child.toggleClass(classes);
  }
);

Or, if you would like to use vainilla javascript:

var queried = document.querySelectorAll('.onhover-toggle-child-class');
var elements = Array.prototype.slice.call(queried);
var onhover = function(event) {
  var element = event.srcElement || event.target;
  var selector = element.getAttribute('data-target');
  var classes = element.getAttribute('data-toggle').split(' ');
  var childs = element.querySelectorAll(selector);
  //console.log(selector, classes, childs);
  childs.forEach(function(child) {
    classes.forEach(function(toggleClass) {
    if (child.classList.contains(toggleClass))
      child.classList.remove(toggleClass);
    else
      child.classList.add(toggleClass);
    });
  });
}

elements.forEach(function(element) {
  element.addEventListener('mouseenter', onhover);
  element.addEventListener('mouseleave', onhover);
});

See both examples working: https://jsfiddle.net/kg22ajm6/

You can create classes that use opacity: 0 and opacity: 1 in order to make the "fadeIn" and "fadeOut". CSS is normally a better choice over raw Javascript or jQuery, jQuery's fadeIn and fadeOut manually animate and CSS transitions are built in within browsers.

Check the example using opacity animation: https://jsfiddle.net/Lwcbn0ae/1/

Regards,

Upvotes: 5

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Put the image hidden on initial by using css display:none and on mouse over use Jquery mouse over event show it and on mouse out again hide it like:

$( "#id" ).mouseenter(function() {
    // code here
});

$( "#outer" ).mouseout(function() {
    // code here
});

Upvotes: 1

Janen R
Janen R

Reputation: 749

HTML

<div class="hover_img">
<span><img src="images/01.png" alt="image" height="100" /></span
<a href="#">Show Image</a>
</div>

CSS

.hover_img a { position:relative; }
.hover_img  span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }

Just try it ...You never put that both in a same element together

Upvotes: 0

Related Questions