Display different images on different locations of one major image with mouseover

Question

I have one major image that I have mapped so as to have many different hotspots that link to other images. What I want to do is to have thumbnails of those images popup when the user goes over the hotspots with the mouse. How can I do that? Help is greately appreciated. Keep in mind I am new to HTML and barely know javascript...is there an easy way out?

Answer 1

As far as i can think now, you will need to use JavaScript, at least a little bit...

I think the Best solution, would be something like this:

<div id="mappedImage">
    <img src="bigImage.jpg">
    <div id="smallImage1">
        <img src="smallimage1.jpg">
    </div>
    <div id="smallImage2">
        <img src="smallimage2.jpg">
    </div>
</div>

And then you could position the DIV inside the #mappedImage using position:absolute; And to finalize, you would use JavaScript to hide the "small" DIVs and using onmouseover on the tags you would reveal them.

I would suggest JQuery as a JavaScript framework. The code would be something like this:

$(function() {
    $("#mappedImage div").hide();
    $("area#small1").hover(function(){
        $("#smallImage1").show();
    },function(){
        $("#smallImage1").hide();
    });
}

I hope this is clear enough. otherwise just post here your remaining doubts :)

Answer 2

. Many thanks for your answer...here is waht I have. I have created the divs and have placed them over the big picture. However, what should be the argument of the onmouseover function? Also, when I stick in the javascript code, how do I define a Jquery framework? I am new to this type of framework and have no idea how to define it. Thanks again