Html Javascript Show Image Hover

I want to show a picture when I hover over certain text. So, bascially, I want to display/pop-up an image , when I hover on the text. I have not been able to find any good solution

Solution 1:

You could try hiding the image and then displaying it on hover:

<imgsrc = "foo"style="visibility:hidden"id = "img1"onmouseover = "show()"><scripttype = "text/javascript">functionshow() {
    document.getElementById('img1').style.visibility = 'visible';
}
</script>

Solution 2:

To practice my javascript a little bit again I wrote a solution that shows your image next to the cursor when hovering an element with a special class (I use class="text-hover-image" in the following example):

The HTML

<p>Show image when hovering <a class="text-hover-image" href="#">this link</a> </p>
<p>This does work with every element that has <span class="text-hover-image"> a classof <em>"text-hover-image".</em></span>

The associated Javascript (using Jquery):

$(document).ready(function () {
    var yOff = 15; // Horizontal position of image relative to mousepointer.var xOff = -20; // Vertical position of image relative to mousepointervar pathToImage = "https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png";

    $(".text-hover-image").hover(function (e) {
        $("body").append("<p id='image-when-hovering-text'><img src='" + pathToImage + "'/></p>");
        $("#image-when-hovering-text")
            .css("position", "absolute")
            .css("top", (e.pageY - yOff) + "px")
            .css("left", (e.pageX + xOff) + "px")
            .fadeIn("fast");
    },

    function () {
        $("#image-when-hovering-text").remove();
    });

    $(".text-hover-image").mousemove(function (e) {
        $("#image-when-hovering-text")
            .css("top", (e.pageY - yOff) + "px")
            .css("left", (e.pageX + xOff) + "px");
    });
});

Take a look at this fiddle for seeing the above example running.

Solution 3:

What you're showing is CSS, not Javascript.

What I would do is generate a container and 2 divs inside of it, one visible at the beginning and one hidden. When hovering the container, hide the visible one and show the other one.

HTML:

<divclass="hover_container"><divclass="text">Show some text here</div><divclass="image"><imgsrc="image.gif"alt="" /></div></div>

Initial CSS:

div.hover_container
{
    width: 300px; /* set a fixed width */height: 300px; /* set a fixed height */
}
div.hover_container.text
{
    display: block; /* shown as a block-type element by default, visible */width: 300px; /* same width as container */height: 300px; /* same height as container */
}
div.hover_container.image
{
    display: none; /* hidden by default */width: 300px; /* same width as container */height: 300px; /* same height as container */
}
div.hover_container.imageimg
{
    width: 300px; /* width of the image */height: 300px; /* height of the image */
}

Now, what we want is to hide the .text and show .image when hovering the container, so we add to the CSS:

div.hover_container:hover.text
{
    display: none; /* hidden when hovering the container */
}
div.hover_container:hover.image
{
    display: block; /* shown when hovering the container */
}

Note that I have not tested this, but it should work. This will not be animated, if you need a nice animation, try using Javascript. I will not talk about it, but jQuery can help you with that.