Вопрос

I'm using hotspots to create a map with a few sections that pop up on hover. I'm using jquery mouseenter and mouseleave for the pop up on hover.

The user will be able to hover over the map section directly and also hover on buttons at the footer of the map.

The images pop up fine when hovering over the image on the map and also when hovering on the links at the footer of the map.

The images are wrapped in links and so are the buttons in the footer. The images are not redirecting on click. I think this is because the links are on the image and not directly on a hotspots like the buttons in the footer are.

Is is possible to enable clicking on the images? I've searched for similar issues and haven't found much related to this issue. Any suggestions are greatly appreciated. Thank you in advance.

Code Example: 
(using google.com just for testing)

//css

#city1 {position: absolute; top: 25px; left: 25px}

//markup

<div id="wrapper">
  <a href="https://google.com/" target="_parent"><img id="city1" class="hide" src="images/city1.jpg" /></a>

  <img src="images/map.png" usemap="#map"/>

  <map name="map">

    <area id="city-one" shape="rect" coords="25,33,209,258" href="https://google.com/" target="_parent">

    <area id="keyCity1"  shape="rect" coords="494,558,599,608" href="https://google.com/" target="_parent"> 

  </map>
</div> 

//script

$(document).ready( function() {
    $('.hide').hide();

    function hoverImg(hoverLinkDiv, hoverImgDiv){
        $(hoverLinkDiv).bind('mouseenter', function(){
            $(hoverImgDiv).fadeIn(250);

        });

        $(hoverLinkDiv).bind('mouseleave', function() {     
            $(hoverImgDiv).hide();
            $(hoverImgDiv).fadeOut(250);

        });

    }

       hoverImg('#city-one', '#city1');
       hoverImg('#keyCity1', '#city1');   

});
Это было полезно?

Решение

In your function hoverImg, you're using the selector #imageWC. This should be #city1 in your example. So,

hoverImg('#city-one', '#city1');

One other thing, the path to your images directory for city1.jpg is spelled imges. Your paths might just be wrong.

Here's a demo: http://codepen.io/megasmack/pen/Irywk

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top