Question

我是这方面的初学者，但我会尽力解释。

我使用Stack Overflow来弄清楚如何将图像放在另一个图像的顶部。我的理由是因为我想在我的网站顶部放一个大型酒吧，其中包含联系方式，其中一部分链接到一个电子邮件地址。

我使用了以下代码：

CSS：

.imgA1 { 
   position:absolute; top: 0px;
   left: 0px; z-index: 1; } <br> .imgB1 {
   position:absolute; top: 0px; left:
   100px; z-index: 3; 
}

HTML：

<img class=imgA1 src="images\headings\red_heading.jpg"><br>
<img class=imgB1 src="images\headings\red_heading_email.jpg">

请注意：我必须在＆lt;之间放置一个空格。和上面的img类，否则它不会显示我的代码!!

以上所有方法都很有效，但是我想在上面的第二个类中添加一个电子邮件链接，所以当有人点击它时会打开一个电子邮件客户端。

我希望这一切都有道理。

无论如何，帮助/建议都很棒。

亲切的问候，

史蒂夫

我想要做的是添加上面“imgB1”部分的链接......

Answer 1

将<img>标记放在<a>（锚点）标记内，并使用锚标记的href属性，在点击图片时打开用户的电子邮件客户端的代码将会显示像这样的东西。

<a href="mailto:myname@mail.com">< img class=imgB1 src="images\headings\red_heading_email.jpg"></a>

现在点击图片将启动网站访问者默认邮件客户端，其中包含“到”邮件地址“myname@mail.com”。

Answer 2

我不确定我理解，但要添加图片链接，您只需要将其放在anchor tag内，并打开电子邮件客户端，您将使用mail的href：theemail @ address.com

<img class=imgA1 src="images\headings\red_heading.jpg">
<a href='mailto:me@me.com'>
 <img class=imgB1 src="images\headings\red_heading_email.jpg">
</a>

您可能还需要在imgB1类中添加border：none，因为默认情况下图像在超链接时会有边框。

Answer 3

我认为你想要的是：

＆LT; img class = imgA1 src =“images \ headings \ red_heading.jpg”＆gt; ＆LT; img src =“images \ headings \ red_heading_email.jpg”＆gt;

使用相同的CSS。这应该将定位应用于锚标记，锚标记又包含您要叠加的图像。

安迪

Answer 4

这很......很奇怪...但你可以用Javascript做到这一点，例如在JQuery中你可以这样做：

$(document).ready(function() {
    $('.imgB1').each(function() {
        $(this).prepend('<a href="link_to_point_to">');
    });
});

请注意，我没有对其进行测试

Answer 5

如果上述方法由于图像上的定位更改而无法工作（不确定它们是否存在），则可以将图像的“onclick”属性设置为如下函数：

<script type="text/javascript">    
function sendEmail() {

        var domain = "test.com"; // this makes it a bit harder for a spammer to find the e-mail
        var user = "test";
        var subject = "Some subject Line"; // You can also set the body and some other stuff, look up mailto

        var mailto_link = 'mailto:' + user + '@' + domain + '?subject='+subject;

        win = window.open(mailto_link,'emailWindow'); // all you see is the mail client window
        if (win && win.open &&!win.closed) win.close();
    }    
</script>

<img class=imgB1 src="images\headings\red_heading_email.jpg" onclick="sendEmail()"/>

Answer 6

＆LT; img class = imgA1 src =“images \ headings \ red_heading.jpg”＆gt; ＆LT; img class = imgB1 src =“images \ headings \ red_heading_email.jpg”＆gt;

你不能通过CSS类链接，因为CSS只定义了DISPLAY / LAYOUT属性。

您必须向img添加一个html锚标记。

Answer 7

默认情况下，超链接的图像周围会有边框（通常为蓝色）。确保通过css或IMG属性border =“0”

删除它

在类中创建电子邮件或HTML链接

7 个答案: