当前位置：文江博客话题详情

CSS hyperlink

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

发布于 2024-10-24 07:41:53 字数 766 浏览 1 评论 0 原文

我是这一切的初学者，但我会尽力解释。

我使用 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">

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

以上所有内容都运行得很好，但是我想添加一个电子邮件链接到上面的第二个类，所以当有人单击它时，电子邮件客户端会打开。

我希望这一切都是有道理的。

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

亲切的问候，

史蒂夫

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

原文

I'm a beginner at all this however i will do my best to explain.

I used Stack Overflow to figure out how to position an image on top of another one. My reason for this is because i want a large bar at the top of my website with contact details, with a part of it linking to an email address.

I used the following code:

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

PLEASE NOTE: I've had to put a space between the < and the img class above or else it wont display my code!!

All the above works really well, however i want to add an email link to the second class above, so when someone clicks it an email client opens.

I hope all this makes sense.

Anyway help/advice would be fantastic.

Kind regards,

Steve

What i want to do is add a link to the "imgB1" section above...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

横笛休吹塞上声 2024-10-31 07:41:54

将您的标记放在（锚点）标记内，并使用锚点标记的 href 属性，将您的代码单击图像后打开用户的电子邮件客户端将如下所示。

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

现在，单击图像将启动网站访问者默认邮件客户端，“发送至”邮件地址“[电子邮件受保护]”。

Place your <img> tags within <a> (Anchor) tag, and with the href attribute of anchor tag, your code to open an email client of user upon click on image will look something like this.

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

Now clicking on the image will launch site visitors default mail client with "to" the mail address "[email protected]".

回复收藏 0 原文

煞人兵器 2024-10-31 07:41:54

我不确定我是否理解，但要添加到图像的链接，您只需将其放入锚标记，要打开电子邮件客户端，您可以使用 mailto:[email protected]

<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 类添加 border: none，因为默认情况下，图像在超链接时具有边框。

I'm not sure that I understand, but to add a link to the image you would just need to put it inside an anchor tag, and to open an email client you would use an href of mailto:[email protected]

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

You may also need to add a border: none to the imgB1 class, as by default images have a border when they are hyperlinked.

回复收藏 0 原文

强辩 2024-10-31 07:41:54

我想你想要的是：

< img 类=imgA1 src="images\headings\red_heading.jpg">
< img src="images\headings\red_heading_email.jpg">

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

安迪

回复收藏 0 原文

找回味觉 2024-10-31 07:41:54

这很……奇怪……但是你可以用 Javascript 来做到这一点，例如在 JQuery 中你可以做这样的事情：

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

请注意，我还没有测试过它

it's quite... strange... but you can do that with Javascript, as example in JQuery you can do something like this:

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

Note that I've not tested it

回复收藏 0 原文

清风疏影 2024-10-31 07:41:54

如果由于图像上的位置变化而导致上述方法不起作用（不确定它们是否会），您可以将图像的“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()"/>

If the approaches above don't work because of the positioning change on the image (not sure if they will or not), you can set the "onclick" property of the image to a function like this:

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

回复收藏 0 原文