Отображать различные изображения в разных местах одного крупного изображения с помощью мыши.

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, используя позицию: absolute; И чтобы завершить, вы бы использовали JavaScript, чтобы скрыть «маленькие» DIV и использовать onmouseover на тегах, которые вы могли бы раскрыть.

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

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

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