在课堂上创建电子邮件或HTML链接

我使用堆栈溢出来弄清楚如何将图像放置在另一个图像上。我之所以这样做，是因为我想在我的网站顶部有一个大型酒吧，其中有一部分链接到一个电子邮件地址。

我用下面的代码：

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

请注意：我已经把<和IMG之间的空间上面的类，否则它不会显示我的代码！

以上所有工作都非常好，但是我想添加一个电子邮件链接到上面的第二个类，所以当有人点击它时会打开一个电子邮件客户端。

我希望这一切都有道理。

无论如何，帮助/建议将是太棒了。

亲切的问候，

史蒂夫

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

来源

2011-03-21 Steve Whitehead

我不确定我的理解，但要添加一个链接到图像，你只需要把它放在anchor tag里面，并打开一个电子邮件客户端，你将使用mailto：theemail @ address。 COM

<img class=imgA1 src="images\headings\red_heading.jpg"> 
<a href='mailto:[email protected]'> 
<img class=imgB1 src="images\headings\red_heading_email.jpg"> 
</a>

您可能还需要添加边框：无的imgB1类，因为默认情况下的图像有一个边界他们超链接时。

来源

2011-03-21 16:11:52

非常感谢大家！我用了上面的那个，因为它对我来说看起来最简单，而且它工作得很好！ – 2011-03-21 16:30:19

将您<img>标签<a>（锚）标签内，以及锚定标记的href属性，您点击图片时打开用户的电子邮件客户端的代码将如下所示。

<a href="mailto:[email protected]">< img class=imgB1 src="images\headings\red_heading_email.jpg"></a>

现在点击图片将启动网站访问者默认邮件客户端与“到”的邮件地址“[email protected]”。

来源

2011-03-21 16:11:25 Kushal

我想你想要的是：

< IMG类= imgA1 SRC = “图片\标题\ red_heading.jpg”> < IMG SRC = “图片\标题\ red_heading_email.jpg”>

与css相同。这应该将定位应用于定位标记，而定位标记又包含要叠加的图像。

Andy

来源

2011-03-21 16:13:23 Andbdrew

这很奇怪...但你可以做到这一点与JavaScript中，如示例JQuery的，你可以做这样的事情：

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

请注意，我没有测试它

来源

2011-03-21 16:15:22 MiPnamic

似乎很好的方式，但对于一个初学者来说太压倒了... – Kushal 2011-03-21 16:23:36

感谢您的答复，但像库什说，超过其相当压倒性。我设法使用HTML和CSS做一个基本的网站，但是所有上面的内容都直奔我的脑海。非常感谢！ :) – 2011-03-21 16:32:01

如果上面的方法不会因为工作图像（不知道他们是否会与否）的定位变化，你可以在图像的“点击”属性设置为这样的功能：

<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()"/>

来源

2011-03-21 16:21:49 lgaud

< IMG类= imgA1 SRC =“图片\标题\ red_heading.jpg“>> < IMG类= imgB1 SRC = “图像\标题\ red_heading_email.jpg”>

不能有通过CSS类的链路，因为CSS仅定义DISPLAY /布局属性。

您将不得不添加一个html定位标记到img。

来源

2011-03-21 16:28:06 aphonicx

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

来源

2011-03-21 17:04:05