javascript - 尝试使用 jquery 工具将鼠标悬停在覆盖层上

Question

我的东西几乎就在我想要的地方。当我开始使用 jquery 工具时，我没有意识到该项目已经死了，并且论坛似乎永久关闭了。然而，我几乎拥有了我需要的东西。

此时我需要的只是让鼠标悬停在图像 map 上的区域上。我的点击工作正常。正在进行的工作位于 http://mtauburn.netcontrolinc.com/joomla/contact-us/360-joomla-content

我有一张带有图像贴图的图像

<img name="circle" src="images/mt-auburn-360.jpg" alt="mt-auburn-360" usemap="#mt-auburn-360-map" />
  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>

有一些CSS样式

我正在预加载图像，但我不确定是否有必要。

<script language="javascript" type="text/javascript">// <![CDATA[
     Image0 = new Image(800, 659)
                                 Image0.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360.jpg"
                              Image1 = new Image(800, 659)
                                 Image1.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-1.jpg"
                              Image2 = new Image(800, 659)
                                 Image2.src = "http://mtauburn.netcontrolinc.com/joomla/images/mt-

(删掉重复代码 //]]>

我有一些函数可以处理旧版本中切片的叠加。我认为这对于 jquery 工具来说是不必要的

//

                          }
function slice4() {
                                         document.circle.src = Image4.src;

这段代码似乎是 jquery 工具真正工作的原因。我添加了区域、onhover 和 onmouseover 来尝试让它工作。

$(document).ready(function() {
$("img[rel]").overlay();
$("area[rel]").overlay();
$("onhover[rel]").overlay();
$("onmouseover[rel]").overlay();
}); 

有代码可以设置叠加层的样式

<style>

 /* the overlayed element */
.simple_overlay {

    /* must be initially hidden */
    display:none;

    /* place overlay on top of other elements */
    z-index:10000;

    /* styling */
    background-color:#333;

    width:675px;
    min-height:200px;
    border:1px solid #666;

    /* CSS3 styling for latest browsers */
    -moz-box-shadow:0 0 90px 5px #000;
    -webkit-box-shadow: 0 0 90px #000;
}

/* close button positioned on upper right corner */
.simple_overlay .close {
    background-image:url(/media/img/overlay/close.png);
    position:absolute;
    right:-15px;
    top:-15px;
    cursor:pointer;
    height:35px;
    width:35px;
}

这是链接图像以覆盖其中一个切片的代码

<div name="slice1ovr" class="simple_overlay" id="slice2">
  <!-- large image -->
  <img src="images/mt-auburn-360-slice-2.jpg" />

  <!-- image details -->
  <div class="details">
    <h3>The Barcelona Pavilion</h3>
    <h4>Barcelona, Spain</h4>
    <p>The content ...</p>
  </div>
</div>

然后我就有了我的图像 map ，其中一部分在这里

<area shape="poly" coords="397,278,476,140,530,182,565,238,577,284,580,318,421,319,415,293" alt="National Training Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-1.jpg" onmouseover="slice1()" onmouseout="original()">
<area shape="poly" coords="399,359,483,492,530,456,561,405,575,363,581,319,421,319,417,341"  alt="National Performance Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-2.jpg" rel="#slice2" $("#slice2").overlay({event:'mouseover'});" onmouseout="original()" >
<area shape="poly" coords="350,361,278,503,324,519,364,526,425,520,485,495,398,359,376,366" alt="National Retention Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-3.jpg" onmouseover="slice3()" onmouseout="original()">
<area shape="poly" coords="328,317,169,317,175,382,200,430,242,479,277,501,351,359,332,340" alt="National Purchasing Team" href="http://mtauburn.netcontrolinc.com/joomla/images/mt-auburn-360-slice-4.jpg" onmouseover="slice4()" onmouseout="original()">

如果将鼠标悬停在任何切片上，图像将与函数中我的原始 document.circle 代码交换。但是，我无法进行任何转换来处理它。所以，我尝试了jquery工具。如果单击 3 点钟位置周围的切片，则会显示一个具有 css 格式的叠加层。

要完成此操作，我所需要做的就是弄清楚如何使覆盖层出现在鼠标悬停而不是单击上。

我真的很感激任何帮助

谢谢

Answer 1

我想你想要这样的东西:

$('.hover-element').mouseover(function(){   
    $('overlay-selector').overlay({  
        load:true  //this makes the overlay load when function is called instead of on click
    });
});

http://api.jquery.com/mouseover/

默认叠加层会在点击时加载，因此请参阅此处标题为“以编程方式打开叠加层”的部分:

http://jquerytools.org/demos/overlay/trigger.html