2011-11-25 39 views
0

我使用HTML的電子郵件運動,我有一個問題,我有以下代碼:如何將圖片放在其他位置而不使用定位,Div或背景?

<TABLE width="550px" height="723px" BACKGROUND="FlyerImage.jpg" border="0" cellpadding="0" cellspacing="0"> 
<TR> 
    <TD style="padding-top:190px; padding-right:30px; line-height:0px;" align="right"> 
     <a style="line-height:0px;" href="http://LINK.com/"> 
      <img src="ViewOffer.png"> 
     </a> 
    </TD> 
</TR> 

<TR> 
    <TD style="padding-bottom:185px; padding-left:35px; line-height:0px;" align="left"> 
     <a style="line-height:0px;" href="http://LINK.com/"> 
      <img src="ViewMore.png"> 
     </a> 
    </TD> 
</TR> 

</TABLE> 

此代碼工作完全在Gmail,Hotmail的,雅虎以及一些電子郵件客戶端,但在OUTLOOK它不是正確顯示,我很確定這是因爲Outlook不支持表格上的背景圖片。

我使用的電子郵件運動的Web客戶端和建議是使用標記內聯CSS,不使用HTML,頭部和身體標記,不使用div的,而不是使用定位(絕對值,相對固定的......)和用表格標記。

如何在不使用這些技術的情況下在特定位置的主圖像頂部定位兩個呼叫動作按鈕?

在此先感謝=]!

回答

2

如果不支持CSS,那麼就沒有辦法保證將按鈕定位在圖像頂部。在這種情況下,我會建議更改爲使用圖像地圖。這是純粹的HTML沒有CSS,但我真的不知道它是否被所有的電子郵件客戶端支持。

您可以將按鈕圖像合併到主圖像中,然後設置座標(我不知道它們,它們由下面的「?s」表示)。像這樣:

<img src="FlyerImage.jpg" alt="alternative text" usemap="#flyer" /> 
<map name="flyer"> 
    <area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 1--> 
    <area shape="rect" coords="?,?,?,?" href="http://LINK.com/" /> <!--button 2--> 
</map> 
+0

這是完美的工作。非常感謝。 – Zakri

0

我從來沒有嘗試過,但它看起來像有一個黑客醜陋的方式來強制Outlook支持背景圖像。 Link