Отображение разных изображений в разных местах одного основного изображения при наведении мыши

Question

У меня есть одно основное изображение, которое я нанес на карту, чтобы иметь много разных горячих точек, которые ссылаются на другие изображения. То, что я хочу сделать, это иметь всплывающие миниатюры этих изображений, когда пользователь переходит по горячим точкам с помощью мыши. Как я могу это сделать? Имейте в виду, я новичок в HTML и почти не знаю JavaScript... есть ли простой выход?

Answer 1

Насколько я могу думать сейчас, вам нужно будет использовать JavaScript, хотя бы чуть-чуть...

Я думаю, что лучшим решением было бы что-то вроде этого:

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

И тогда вы можете расположить DIV внутри #mappedImage, используя position: absolute; И чтобы завершить, вы должны использовать JavaScript, чтобы скрыть "маленькие" DIV, и использовать onmouseover для тегов, которые вы бы открыли для них.

Я бы предложил JQuery в качестве основы JavaScript. Код будет примерно таким:

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

Я надеюсь, что это достаточно ясно. в противном случае просто оставьте здесь ваши оставшиеся сомнения:)