当我将鼠标悬停在另一个图像上时，使图像可见

Question

Essentially I have an interactive map which contains 4 div statements each of which contains an image of an island. I would like to create an on hover event which will display a corresponding sailing timetable depending on which image the user hovers. eg island 1 should display timetable 1.

I have the following code so far and ideally I am looking for a javascript or css solution:

            <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">

any help is appreciated.

Answer 1

You need some different markup if you want a plain css solution. If you want to have different timetables for each hover you should go with something like this:

markup

    <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; 
}

That should do the trick

Answer 2

If you want to keep your current HTML code, I'd make three image blocks for timetables, and initially set them all to display: none; and add onmouseover event handlers to island elements which would contain Javascript statement which will set disply: block; on appropriate timetable.

Something like this:

<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

Seems you barely know the basics of HTML and already trying to jump too deep. External libraries will help you and speed up your progress. I see people gave you CSS solutions so here is a JS solution. First thing is download the well known JS library called jQuery . then load this file to your page and add a script at the bottom of your body tag:

$("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
});

With this script you can do whatever you want, for example - use the second option of adding and removing classes in order to animate your Timetables (see Example ).

Answer 4

Pure CSS solution but you need to place the large image in .main div

the first image will be displayed first and will change on hover on other images and when you leave move out of the main div it will show the first image

Note: used random images

 .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

Possible CSS / JQuery solution:

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

 .timetables img { display:none; } 

 <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> 

Answer 6

Don't put class="map" to the wrapper div, give it to every div with id beginning with "Island_...". Do the same with your timeTable images, give them a class "timeTable".

Put this before your "head" end tag :

<script>
"use strict";

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

Then, put this before your "body" end tag :

<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>

Don't forget the quotes when using the functions. You should use css for styling and javascript for interactions. You don't need jQuery for basic scripts like that, it only slows page loading and keeps you away from learning basic javascript.

(Ok, I edited mistakes, now it works ;)

jsFiddle