CODEWITHSUNDEEP
javascripthtmljqueryimageshow
codernon
codernon

Reputation: 35

Show image on mouseover with jQuery

I am using JQuery and I would like to show an image when mouseover/hover on text. I would like to do that without having to add the picture to my HTML file. I do not want the picture to show on my html page. I tried span but that adds it to the page. I don't want it to show anywhere in the page unless the text is hovered on.

Here is my code so far

$(document).ready(() => {
    const $container = $('<div id="container">')
    $('body').append($container)

    const $h1 = $('<h1>').text('Hogwarts Magic School')
    $container.append($h1)

    var $h4Wand = $('<h4 id="wand">').text('Unicorn Wand')
    $($container).append($h4Wand)

    $('#wand').on('mouseover', function() {
        $('#popup').show()
    })
    $('#wand').on('mouseover', function() {
        $('#popup').hide()
    })
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Hogwarts</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
        <script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
    </head>
    <body>
        <h5>spring 2020</h5>
        <span id="popup"><img src="wand.jpg"/></span>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>
strong text

Upvotes: 1

Views: 148

Answers (2)

flyingfox
flyingfox

Reputation: 13506

The problem is that you have bind two mouseover event,in order to reach your goal,you need to use mouseout instead when you want to hide the image

$(document).ready(() => {
    const $container = $('<div id="container">')
    $('body').append($container)

    const $h1 = $('<h1>').text('Hogwarts Magic School')
    $container.append($h1)

    var $h4Wand = $('<h4 id="wand">').text('Unicorn Wand')
    $($container).append($h4Wand);
    $('#popup').hide();

    $('#wand').on('mouseover', function() {
        $('#popup').show();
    })
    $('#wand').on('mouseout', function() {
        $('#popup').hide();
    })
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Hogwarts</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
        <script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
    </head>
    <body>
        <h5>spring 2020</h5>
        <span id="popup"><img src="https://s1.ax1x.com/2020/10/04/08bjVU.png"/></span>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

Another choice is to use a variable to determine whether it's to hide or show the image,I think this way works better than the previous one

var count = 0;
$(document).ready(() => {
    const $container = $('<div id="container">')
    $('body').append($container)

    const $h1 = $('<h1>').text('Hogwarts Magic School')
    $container.append($h1)

    var $h4Wand = $('<h4 id="wand">').text('Unicorn Wand')
    $($container).append($h4Wand);
    $('#popup').hide();

    $('#wand').on('mouseover', function() {
        if(count%2==0){
          $('#popup').show();
        }else{
          $('#popup').hide();
        }
        count++;
    })
});
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Hogwarts</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="main.css">
        <script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
    </head>
    <body>
        <h5>spring 2020</h5>
        <span id="popup"><img src="https://s1.ax1x.com/2020/10/04/08bjVU.png"/></span>
        <script type="text/javascript" src="app.js"></script>
    </body>
</html>

Upvotes: 1

kevmc
kevmc

Reputation: 1294

OK, so firstly you will need to hide your popup span when the page is first loaded.

You can do this in your html:

<span id="popup" style="display:none;"><img src="wand.jpg"/></span>

or in your css:

#popup {display: none;}

Then you need to look at your event listeners. Currently you have added two listeners to the mouseover event, so what is happening is that the first one is showing the popup and the second one is instantly hiding it.

I'm thinking you need to bind the hide function to the mouseout event

$('#wand').on('mouseout', function() {
    $('#popup').hide()
})

Upvotes: 1

Related Questions