在页脚中添加指向图像的链接答案

【问题标题】：Adding a link to images in the footer在页脚中添加指向图像的链接
【发布时间】：2014-10-18 17:59:31
【问题描述】：

我的页脚包含三张图片，我想添加一个链接（版权和公司网站），一旦你点击图片，它就会带你到网站我尝试了我在这里找到的不同方法，但它不适用于我。我应该添加什么？

页面代码：

<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,  ;
    }

【问题讨论】：

你尝试了什么？

标签： html css image footer

【解决方案1】：

链接网站有两种方式。（如果你使用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

【讨论】：

感谢您的新想法

【解决方案2】：

只需将您的 img 标签包装在一个链接标签中，如下所示：

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

那么图像的任何部分都将是一个可点击的链接。

【讨论】：

您需要对您的代码再进行一次编辑；-)：<a href="my_url.html"><img src="my_img.jpg"></a>
@Broco 抱歉，我看不出有什么不同？我错过了什么？
jpg 后面的引用 ;-)

【解决方案3】：

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

 </div>

【讨论】：

我宁愿使用a 标签。这就是它们的用途，也更好地用于 SEO 目的。

【解决方案4】：

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

<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>

就是这样。

【讨论】：

【解决方案5】：

看起来您将所有图像作为背景放置在一个 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;
}

【讨论】：

【解决方案6】：

改变

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

进入

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

【讨论】：

【解决方案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,  ;
    }

【讨论】：

在上面的代码中检查你的图像路径为../之前图像路径意味着上一个文件夹并找到图像文件夹。如果您在 html 或 php 文件所在的同一文件夹中有 images 文件夹，则删除 ../ 并且您的路径应如下所示： url('img/companysite.png') left no-repeat;希望它应该可以工作，因为我还没有测试过代码