html javascript show image hover [closed]

问题

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 on any webstites so I hope I could get some help. I don't have any code to post because I don't know where to start from, besides this :

<style>
p:hover{
   //Show image code;
}
</style>

回答1:

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

<img src = "foo" style="visibility:hidden" id = "img1" onmouseover = "show()">

<script type = "text/javascript">
function show() {
    document.getElementById('img1').style.visibility = 'visible';
}
</script>

回答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 class of <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 mousepointer
    var 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.

回答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:

<div class="hover_container">
    <div class="text">Show some text here</div>
    <div class="image">
        <img src="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 .image img
{
    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.

来源：https://stackoverflow.com/questions/20166877/html-javascript-show-image-hover

标签

javascript

html

css

hover

onmouseover