在課堂上創建電子郵件或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