绝对 PNG 图片不会 link

Question

所以我正在努力对此站点进行更改。 http://www.kbduct.com。其中一个站点的正面有一个透明的美国徽标的 png 文件。我必须向它添加一个小的 awfs 徽标横幅，并让查看者能够单击它，以便它可以引导到另一个站点。我为这些项目添加了锚标签，但是当你点击它时没有任何反应。这是图像的索引文件和外部文件。

顺便说一句，我没有建立这个网站。我暂时帮忙维护一下

索引：

<?php include('inc/default.php');

$pageTitle = "The Nations Source For Industrial Ducting, Ducts and Ductwork Components - KB Duct";
$pageDisc = "KB Duct is the Nation's source for industrial duct, ducting components and ductwork fittings and supplies. We offer custom built solutions for your industrial needs.";
$pageKeys = "duct, ductwork, ducting, duct work, commercial ducting, industrial ducting, custom ductwork, ductwork supplies, ducting accessories, duct fittings";

 ?>

<!doctype html>
<html>
<?php include('inc/head.php'); ?>

<body>



<div id="sb-site">

 <?php include('inc/maximage.php'); ?>      

 <?php include('inc/header.php'); ?>

 <div class="mainarea">

 <a href="http://awfsfair.org/">
    <div id="eBanner" style=" position: absolute; right: 380px; top: 310px;">

<?php /*?> <script type='text/javascript' src='http://libs.a2zinc.net/Common/JS/10.6.0.0/a2zWidget.js'></script><script type='text/javascript' id='exWidget'>new a2z.Widget('dGbJ%2fQfPqUA4s%2fDNrIc%2fzt5xiq%2fL4ZoFjVXmdUEcJutOcD9ggxZSCZyU8MZ6cQu6',40297,'http://libs.a2zinc.net/Common/Widgets/ExhibitorBadge.aspx',31,201133,330,200).render();</script>
<?php */?>



</a>

 </div>


    <div class="wrapper">

        <?php include('inc/industry.php'); ?>
        <?php include('inc/catatypes.php'); ?>

    <div id="mob-only">
      <?php include('inc/mobslideup.php'); ?>
    </div>

    </div>


 </div>

 <?php include('inc/footer.php'); ?>

</div>

<?php include('inc/mob-menu.php'); ?>

</body>
</html>

MAXIMAGE.PHP:

<div id="maximage">
    <div>
        <img src="img/Custom-Ductwork-Clamp-Together-Ducting-Shiny-Ducts-BG.jpg" alt="KB Duct is the nation's source for clamp together and flanged industrial ducting and duct parts." />
        <div class="in-slide-content" style="display:none;">
            <a href="http://awfsfair.org/"><img src="img/nations-source-for-industrial-ducting.png" alt="KB Duct offers custom fabricated industrial ducting solutions."></a>



        </div>
    </div>
     <div>
        <img src="img/shinyduct.jpg" alt="" />
        <div class="in-slide-content" style="display:none;">
            <a href="http://awfsfair.org/"><img src="img/awfs-nations-source.png"></a>
        </div>
    </div>
    <!-- <div>
        <img src="img/kbduct-production.jpg" alt="" />
        <div class="in-slide-content" style="display:none;">
            <img src="img/nations-source-for-industrial-ducting.png">
        </div>
    </div>-->
    <div>
        <img src="img/plasma.jpg" alt="" />
        <div class="in-slide-content" style="display:none;">
            <a href="http://awfsfair.org/"><img src="img/awfs-nations-source.png"></a>
        </div>
    </div>
    <div>
        <img src="img/welding.jpg" alt="" />
        <div class="in-slide-content" style="display:none;">
            <a href="http://awfsfair.org/"><img src="img/awfs-nations-source.png"></a>
        </div>
    </div>
  <!--  <div>
        <img src="img/clamp.jpg" alt="" />
        <div class="in-slide-content" style="display:none;">
            <img src="img/nations-source-for-industrial-ducting.png">
        </div>
    </div>-->
     <div>
        <img src="img/tunnel.jpg" alt="" />
        <div class="in-slide-content" style="display:none;">
           <a href="http://awfsfair.org/"><img src="img/awfs-nations-source.png"></a>
        </div>
    </div>

MAXIMAGE CSS ID:

#maximage {
    display:block;/* Only use this if you fade it in again after the images load */
    position:fixed !important;
    z-index:-1;

CSS 幻灯片内容：

.in-slide-content { 
    color:#333;
    float:right;
    font-family:'Helvetica Neue', helvetica;
    font-size:60px;
    font-weight:bold;
    right:20px;
    margin:40px;
    padding:20px;
    position:absolute;
    top:20px;
    width:700px;
    z-index:9999; /* Show above .gradient */
    text-shadow: 0 1px 0 #fff;
    -webkit-font-smoothing:antialiased;
}

Answer 1

我做了一些研发得到了一些东西。也许这对你有帮助有一个 id eBanner 将内联样式更改为

position: absolute;
  right: 269px;
  top: 141px;
  z-index: 9999;
  height: 100px;
  width: 185px;
  border: 2px solid red;

在这个div里面有锚标签添加下面的样式

  display: block;
  width: 181px;
  height: 100px;

一旦你检查它是否有效，你就可以删除红色边框

绝对 PNG 图片不会 link

Absolute PNG image won't link

php

click

absolute