Question

我需要一个灯箱或弹出窗口图像，将两个不同的部分映射到两个不同的外部链接，弹出窗口需要在打开页面时加载。我不确定这是否可行，这是我到目前为止所做的。

<!DOCTYPE html>
<html>
 <head>
  <meta charset=utf-8 />
<title></title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
  function openColorBox(){
    $.colorbox({iframe:true, width:"800", height:"400", href: "http://image.png"});//popup/lightbox image would go here, with two different sections of it clickable to links.

  }

         setTimeout(  openColorBox, 5000);
</script>
<style type="text/css">
#image-hotspot {
    background:url()
    height:285px;
    width:570px;
    position:absolute;
    top:0px;
    left:0px;
}
#image-hotspot a#current {
    display:block;
    height:140px;
    width:585px;
    position:absolute;
    left:0px;
    top:0px;
}
#image-hotspot a#prospective {
    display:block;

    height:140px;
    width:585px;
    position:absolute;
    left:0px;
    top:140px;
}
   </style>
<div id="image-hotspot">

    <a id="current" href="https://google.com"></a> //sample links, will be directed to two different pages
    <a id="prospective" href="http://stackoverflow.com"></a>
     </div>

在页面加载时弹出的灯箱，其中映射的图像链接到两个不同的网页

0 个答案: