Question

基本上我有一个交互式地图，其中包含4个div语句，每个语句都包含一个岛屿的图像。我想创建一个悬停事件，根据用户悬停的图像显示相应的航行时间表。例如岛屿1应显示时间表1.

到目前为止，我有以下代码，理想情况下我正在寻找一个javascript或css解决方案：

            <div class="Map">
                <div id="Island_Morar">
                    <img src="images/IsleOfMorar.jpg"/>
                </div>

                <div id="Island_Rum">
                    <img src="images/IsleOfRum.jpg"/>
                </div>                      

                <div id="Island_Eigg">
                    <img src="images/IsleOfEigg.jpg"/>
                </div>

                <div id="Island_Muck">
                    <img src="images/IsleOfMuck.jpg"/>
                </div>


            </div>  

            <img id="TimetableEigg" src="images/TimetableEigg.jpg">

任何帮助表示赞赏。

Answer 1

如果你想要一个简单的css解决方案，你需要一些不同的标记。如果你想为每个悬停设置不同的时间表，你应该选择以下内容：

标记

    <div class="tt-container" id="Island_Rum">
        <img src="images/IsleOfRum.jpg"/>
        <img class="timetable" src="images/TimetableRum.jpg">
    </div>                      

    <div class="tt-container" id="Island_Eigg">
        <img src="images/IsleOfEigg.jpg"/>
        <img class="timetable" src="images/TimetableEigg.jpg">
    </div>

    <div class="tt-container" id="Island_Muck">
        <img src="images/IsleOfMuck.jpg"/>
        <img class="timetable" src="images/TimetableMuck.jpg">
    </div>
</div>

CSS

.timetable { 
    display : none; 
}

.tt-container:hover .timetable { 
    display : block; 
}

应该做的伎俩

Answer 2

如果你想保留当前的HTML代码，我会为时间表制作三个图像块，并最初将它们全部设置为显示：none;并将onmouseover事件处理程序添加到岛元素，其中包含将设置disply的Javascript语句：block;在适当的时间表上。

这样的事情：

<div class="Map">
    <div id="Island_Morar" onmouseover="document.getElementById('TimetableEigg1').style.display = 'block';">
        <img src="images/IsleOfMorar.jpg"/>
    </div>

    <div id="Island_Rum" onmouseover="document.getElementById('TimetableEigg2').style.display = 'block';" >
        <img src="images/IsleOfRum.jpg"/>
    </div>                      

    <div id="Island_Eigg" onmouseover="document.getElementById('TimetableEigg3').style.display = 'block';" >
        <img src="images/IsleOfEigg.jpg"/>
    </div>

    <div id="Island_Muck" onmouseover="document.getElementById('TimetableEigg4').style.display = 'block';" >
        <img src="images/IsleOfMuck.jpg"/>
    </div>


</div>  

<img id="TimetableEigg1" src="images/TimetableEigg1.jpg">
<img id="TimetableEigg2" src="images/TimetableEigg2.jpg">
<img id="TimetableEigg3" src="images/TimetableEigg3.jpg">
<img id="TimetableEigg4" src="images/TimetableEigg4.jpg">

Answer 3

似乎你几乎不了解HTML的基础知识，并且已经试图跳得太深。外部库将帮助您并加快您的进度。我看到人们给了你CSS解决方案，所以这里是一个JS解决方案。首先是下载名为jQuery的着名JS库。然后将此文件加载到您的页面并在正文标记的底部添加一个脚本：

$("div.map").on("mouseover", "#Island_Morar", function(e) {
    $(this).show(); // option one
    //$(this).addClass("class-name"); // option two
}).on("mouseout", "#Island_Morar", function(e) {
    $(this).hide(); // option one
    //$(this).removeClass("class-name"); // option two
});

使用此脚本，您可以执行任何操作，例如 - 使用添加和删除类的第二个选项，以便为时间表设置动画（请参阅Example）。

Answer 4

纯CSS解决方案，但您需要将大图像放在.main div

中

第一张图片将首先显示，并在其他图片上悬停时更改，当您离开主要div时，它将显示第一张图片

注意：使用随机图像

.Map > div {
  display: inline-block;
}
img.two,
img.three,
img.four,
#Island_Rum:hover ~ img.one,
#Island_Muck:hover ~ img.one,
#Island_Eigg:hover ~ img.one {
  display: none;
}
img.one {
  display: block;
}
#Island_Morar:hover ~ img.one {
  display: block;
}
#Island_Rum:hover ~ img.two {
  display: block;
}
#Island_Eigg:hover ~ img.three {
  display: block;
}
#Island_Muck:hover ~ img.four {
  display: block;
}

<div class="Map">
  <div id="Island_Morar">
    <img src="http://placeimg.com/100/100/any/animals" />
  </div>
  <div id="Island_Rum">
    <img src="http://placeimg.com/100/100/any/arch" />
  </div>
  <div id="Island_Eigg">
    <img src="http://placeimg.com/100/100/any/nature" />
  </div>
  <div id="Island_Muck">
    <img src="http://placeimg.com/100/100/any/tech" />
  </div>
  <img class="one" src="http://placeimg.com/400/400/any/animals" />
  <img class="two" src="http://placeimg.com/400/400/any/arch" />
  <img class="three" src="http://placeimg.com/400/400/any/nature" />
  <img class="four" src="http://placeimg.com/400/400/any/tech" />
</div>

Answer 5

可能的CSS / JQuery解决方案：

＆＃13;

$(".Map a").hover(
  function() {
    $('#' + $(this).attr('class')).show();
  }, function() {
    $('#' + $(this).attr('class')).hide();
  }
);

＆＃13;

.timetables img { display:none; }

＆＃13;

<div class="Map">
  <a href="#" class="islandmorar">
    <img src="images/IsleOfMorar.jpg"/>
  </a>
  <a class="islandrum">
    <img src="images/IsleOfRum.jpg"/>
  </a>                      
  <a class="islandeigg">
    <img src="images/IsleOfEigg.jpg"/>
  </a>
  <a class="islandmuck">
    <img src="images/IsleOfMuck.jpg"/>
  </a>
</div>  

<div class="timetables">
  <img id="islandmorar" src="images/TimetableEigg.jpg"/>
  <img id="islandrum" src="images/TimetableEigg.jpg"/>
  <img id="islandeigg" src="images/TimetableEigg.jpg"/>
  <img id="islandmuck" src="images/TimetableEigg.jpg"/>
</div>

＆＃13;

Answer 6

不要把课程=＆＃34;地图＆＃34;到包装器div，将它提供给ID为＃34;岛_...＆＃34;的每个div。对你的timeTable图片做同样的事情，给他们一个班级＆＃34; timeTable＆＃34;。

把这个放在你的＆＃34; head＆＃34;结束标记：

<script>
"use strict";

//wait for every element to be loaded
window.onload = function(){initialization();}
</script>

然后，把它放在你的＆＃34;身体＆＃34;结束标记：

<script>
"use strict";

//first create a function that hides elements with class 'timeTable'
function hide(elements){
    var htmlClass = document.getElementsByClassName(elements);
    //hide every element with class
    for (var i = 0 ; i < htmlClass.length ; i++){
        htmlClass[i].style.display = "none";
        htmlClass[i].style.visibility = "hidden";
    }   
}

//create a function that show only the timeTable you want
function show(element){
    document.getElementById(element).style.display = "block";
    document.getElementById(element).style.visibility = "visible";
}

function initialization(){
    //replace 'someMapId' with the id of the image you are hovering
    //replace 'someTimeTableId' with the id of the image you want to show
    //replace 'timeTable' with the name of a class you want to hide
    document.getElementById("someMapId").onmouseover = function(){
        hide("timeTable");
        show("someTimeTableId");
    }
    //repeat these 3 lines for every image the user will hover
}
</script>

使用这些功能时不要忘记引号。您应该使用css进行样式设置和javascript进行交互。你不需要像这样的基本脚本的jQuery，它只会减慢页面加载速度，让你远离学习基本的javascript。

（好的，我编辑了错误，现在可以了;）

jsFiddle

当我将鼠标悬停在另一个上时，可以看到图像

6 个答案: