Question

我的页脚包含三个图片，我想添加一个链接到（coyright和companysite），一旦你点击图像，它会带你到网站我尝试了不同的方法，我在这里找到但它不与我合作。我应该添加什么？

页面代码：

<body>
<div id="wrap">

        <div id="header">

        </div>

    <div id="main">

        <div id="content">

        </div>
    </div>

</div>



<div id="footer">


    <div id="img-1">


    </div>

</div>


</body>

CSS：

* {margin:0;padding:0;} 


html, body {
    height: 100%;
    background: url('../../fresh/img/bg.png') repeat;

    }

#wrap {
    min-height: 100%;
    }

#header {
background: url('../../fresh/img/header.png') no-repeat top center;
display:block;
text-indent:-9000px;
width: 100%;
height: 237px;
}

#main {
    overflow:auto;
    padding-bottom: 200px;}  
#content {
    background: url('../../fresh/img/log-in.png') no-repeat top center;
    display:block;
    width: 100%;
    height: 201px;


}

#footer {
    position: relative;
    margin-top: -200px;     height: 200px;
    clear:both;
    } 


body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}





#img-1 {
    bottom:0;
    height:200px;
    background : url('../img/footer.png') center no-repeat,
                 url('../img/companysite.png') left no-repeat,
                 url('../img/copyright.png') right no-repeat,  ;
    }

Answer 1

只需将img标记包装在链接标记中，如下所示：

<a href="my_url.html"><img src="my_img.jpg></a>

然后，图像的任何部分都是可点击的链接。

Answer 2

<div id="img-1" onclick="window.location='http://www.google.com'" style="cursor:pointer">

 </div>

Answer 3

您必须在锚元素中添加图像，如下所示：

<div id="footer">

   <div id="img-1">
      <a href="yourUrl1"><img src="yourImage1"/></a>
      <a href="yourUrl2"><img src="yourImage2"/></a>
      <a href="yourUrl3"><img src="yourImage3"/></a>
   </div>

</div>

就是这样。

Answer 4

看起来您将所有图像作为背景放在div中。改为使用三个单独的图像：

<div id="footer">
    <div id="img-1">
         <a href="url1.html"><img src="../img/footer.png" alt="" /></a>
         <a href="url2.html"><img src="../img/companysite.png" alt="" /></a>
         <a href="url3.html"><img src="../img/copyright.png" alt="" /></a>
    </div>
</div>

从CSS中删除背景：

#img-1 {
    bottom:0;
    height:200px;
}

Answer 5

更改

<div id="img-1">
</div>

到

<a href="your desired link">
    <div id="img-1">
    </div>
</a>

Answer 6

链接网站的方法有两种。（如果使用html）

1.使用Anchor标签（最喜欢的方法）

<a href="targetUrl.html">Your element tags like p,span,img,... </a>

2.使用window.location功能

<div onclick="window.location='http://www.yahoo.com'" style="cursor:pointer"></div>

Check fiddle

Answer 7

首先，您需要澄清的是，在一个HTML页面上，您不能使用多个相同的名称ID标记，否则您将在页面上收到W3C验证错误。

为了实现您所寻求的目标，请执行以下操作：

//这是您的HTML代码

<div id="footer">
    <div id="img-1">
         <a href="copyrights.html">CopyRights</a>
    </div>
    <div id="img-2">
         <a href="company.html">Company</a>
    </div>
</div>

**//Here is your CSS Code**
#footer {
    position: relative;
    margin-top: -200px;     height: 200px;
    clear:both;
    bottom:0;
    height:200px;
    background : url('../img/footer.png') center no-repeat
    } 

#img-1 {
   url('../img/companysite.png') left no-repeat;
    }
#img-2 {
   url('../img/copyright.png') right no-repeat,  ;
    }

在页脚中添加图像链接

7 个答案: