2016-05-10 4 views
1

どのデバイスに表示されているかに応じて、自分のヘッダーイメージを切り替えてシームレスに置き換えようとしています。Image Switch on Responsive HTMLメール

以前、私は...

を使用してサイズを変更するためのコードと、最大幅、最小幅などを使用していた私は、これはモバイル(最大400ピクセル)、またはデスクトップに応じて、2枚の画像間で交換したいのですが

(480分)デスクトップヘッダ... PHL-headline2.jpg

モバイルヘッダ(スワップする)... PHL-見出し-320-2.jpgここ

コードです私は仕事をしています...

うまくいけば、誰かが私が現在行っていないことについてのいくつかの洞察力や答えがあることを願っています。

ありがとうございました!

初めてポスト

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>PLANET HOME LENDING</title> 
 
<style> 
 
\t @media only screen and (min-device-width: 480px) and (max-device-width: 1024px) 
 
\t { 
 
\t \t span[id=switcher] {display:block; 
 
\t \t background-image: url(http://www.johnroebas.com/hosted/phl-headline2.jpg) !important; 
 
\t \t background-repeat: no-repeat !important; 
 
\t \t background-position: center !important; 
 
\t \t width: 590px !important; 
 
\t \t height: 195px !important; } 
 
\t \t img[id=houdini] {display: none !important; } 
 
\t } 
 
\t @media only screen and (max-device-width: 400px) 
 
\t { 
 
\t \t span[id=switcher] {display:block; 
 
\t \t background-image: url(http://www.johnroebas.com/hosted/phl-headline-320-2.jpg) !important; 
 
\t \t background-repeat: no-repeat !important; 
 
\t \t background-position: center !important; 
 
\t \t width: 320px !important; 
 
\t \t height: 203px !important; } 
 
\t \t img[id=houdini] {display: none !important; } 
 
\t } 
 
</style> 
 
</head> 
 
<body> 
 
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 590px; min-width: 320px"> 
 
    <tbody> 
 
    <tr> 
 
     <td><table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 590px; min-width: 320px"> 
 
     <tbody> 
 
      <tr> 
 
      <td height="30" bgcolor="#72c045" style="color:#FFFFFF; font-weight:normal; font-size:10px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:8px;">Now you can lower your monthly mortgage payment</td> 
 
      </tr> 
 
      <tr> 
 
      <td height="62"><img src="http://www.johnroebas.com/hosted/phl-logo-320.jpg" alt="Planet Home Lending" style="display:block; width: 100%; max-width: 247px; max-height: 62px; min-width: 300px; -ms-interpolation-mode: bicubic;"></td> 
 
      </tr> 
 
      <tr> 
 
      <td id="switcher"><img id="houdini" src="http://www.johnroebas.com/hosted/phl-headline2.jpg" alt="Good News" style="display:block; -ms-interpolation-mode: bicubic;"></td> 
 
      </tr> 
 
      <tr> 
 
      <td><table width="390" border="0" align="center" cellpadding="0" cellspacing="0"> 
 
       <tbody> 
 
       <tr> 
 
        <td height="18" colspan="2"><img src="http://www.johnroebas.com/hosted/phl-spacer.jpg" width="40" height="18" style="display:block;" align="absbottom"></td> 
 
       </tr> 
 
       <tr> 
 
        <td height="36" colspan="2" style="color:#0f1752; font-weight:normal; font-size:12px; line-height:18px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:8px; padding-right:8px;"> 
 
        <strong>[FIRST NAME],<br> 
 
        Good news from Planet Home Lending:</strong></td> 
 
       </tr> 
 
       <tr> 
 
        <td height="16" colspan="2"><img src="http://www.johnroebas.com/hosted/phl-spacer.jpg" width="40" height="16" style="display:block;" align="absbottom"></td> 
 
       </tr> 
 
       <tr> 
 
        <td width="28" style="vertical-align:top"><img src="http://www.johnroebas.com/hosted/phl-button.jpg" width="28" height="28" style="display:block;"></td> 
 
        <td width="362" style="color:#0f1752; vertical-align:bottom; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:8px; padding-right:8px;"> 
 
        We reviewed your account – you may be eligible<br> 
 
        for a simplified refinance to a lower rate:</td> 
 
       </tr> 
 
       <tr> 
 
        <td height="10" colspan="2"><img src="http://www.johnroebas.com/hosted/phl-spacer.jpg" width="40" height="10" style="display:block;" align="absbottom"></td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="2"><table width="286" border="1" bordercolor="#72c045" align="center" cellpadding="0" cellspacing="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td bgcolor="#72c045" style="color:#FFFFFF; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:4px; padding-right:8px;">Your rate after refinancing:</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="color:#0f1752; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:4px; padding-right:8px; padding-bottom:4px; padding-top:2px;"><strong>X.XX%</strong><br> 
 
     (X.XX% Interest Rate)</td> 
 
    </tr> 
 
    <tr> 
 
     <td bgcolor="#72c045" style="color:#FFFFFF; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:4px; padding-right:8px;">New lower monthly payment:</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="color:#0f1752; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:4px; padding-right:8px; padding-bottom:4px; padding-top:2px;"><strong>$X,XXX.XX</strong></td> 
 
    </tr> 
 
    <tr> 
 
     <td bgcolor="#72c045" style="color:#FFFFFF; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:4px; padding-right:8px;">Your possible savings:</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="color:#0f1752; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:4px; padding-right:8px; padding-bottom:4px; padding-top:2px;"><strong>$XXX</strong> per month</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</td> 
 
       </tr> 
 
       <tr> 
 
        <td height="10" colspan="2"><img src="http://www.johnroebas.com/hosted/phl-spacer.jpg" width="40" height="10" style="display:block;" align="absbottom"></td> 
 
       </tr> 
 
       <tr> 
 
        <td width="28" style="vertical-align:top"><img src="http://www.johnroebas.com/hosted/phl-button.jpg" width="28" height="28" align="abstop" style="display:block;"></td> 
 
        <td width="362" style="color:#0f1752; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:8px; padding-right:8px;"> 
 
        30-year fixed rate, loan amount up to $XXX,XXX</td> 
 
       </tr> 
 
       <tr> 
 
        <td height="10" colspan="2"><img src="http://www.johnroebas.com/hosted/phl-spacer.jpg" width="40" height="10" style="display:block;" align="absbottom"></td> 
 
       </tr> 
 
       <tr> 
 
        <td width="28" style="vertical-align:top"><img src="http://www.johnroebas.com/hosted/phl-button.jpg" width="28" height="28" align="abstop" style="display:block;"></td> 
 
        <td width="362" style="color:#0f1752; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:8px; padding-right:8px;"> 
 
        $0 out-of-pocket closing cost option</td> 
 
       </tr> 
 
       <tr> 
 
        <td height="10" colspan="2"><img src="http://www.johnroebas.com/hosted/phl-spacer.jpg" width="40" height="10" style="display:block;" align="absbottom"></td> 
 
       </tr> 
 
       <tr> 
 
        <td width="28" style="vertical-align:top"><img src="http://www.johnroebas.com/hosted/phl-button.jpg" width="28" height="28" align="abstop" style="display:block;"></td> 
 
        <td width="362" style="color:#0f1752; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:8px; padding-right:8px;"> 
 
        No home appraisal needed</td> 
 
       </tr> 
 
       <tr> 
 
        <td height="10" colspan="2"><img src="http://www.johnroebas.com/hosted/phl-spacer.jpg" width="40" height="10" style="display:block;" align="absbottom"></td> 
 
       </tr> 
 
       <tr> 
 
        <td width="28" style="vertical-align:top"><img src="http://www.johnroebas.com/hosted/phl-button.jpg" width="28" height="28" style="display:block;"></td> 
 
        <td width="362" style="color:#0f1752; vertical-align:bottom; font-weight:normal; font-size:12px; line-height:16px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:8px; padding-right:8px;"> 
 
        No “mortgage mumbo jumbo”– that’s the Planet Home Lending promise!</td> 
 
       </tr> 
 
       </tbody> 
 
      </table></td> 
 
      </tr> 
 
      <tr> 
 
      <td height="18"><img src="http://www.johnroebas.com/hosted/phl-spacer.jpg" width="40" height="18" style="display:block;" align="absbottom"></td> 
 
      </tr> 
 
      <tr> 
 
      <td><img src="http://www.johnroebas.com/hosted/phl_phone.jpg" alt="Call" align="absbottom" style="display:block; width: 100%; max-width: 590px; max-height: 64px; min-width: 300px; -ms-interpolation-mode: bicubic;"></td> 
 
      </tr> 
 
      <tr> 
 
      <td height="8" bgcolor="#e4f3dc"><img src="http://www.johnroebas.com/hosted/phl-spacer2.jpg" width="40" height="8" style="display:block;" align="absbottom"></td> 
 
      </tr> 
 
      <tr> 
 
      <td bgcolor="#e4f3dc" style="color:#000000; font-weight:normal; font-size:8px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:14px;"> 
 
      THIS OFFER IS NOT BEING MADE BY AN AGENCY OF THE US GOVERNMENT. PLANET HOME LENDING IS NOT AFFILIATED WITH ANY GOVERNMENT ENTITY. 
 
</td> 
 
      </tr> 
 
        <tr> 
 
      <td height="8" bgcolor="#e4f3dc"><img src="http://www.johnroebas.com/hosted/phl-spacer2.jpg" width="40" height="8" style="display:block;" align="absbottom"></td> 
 
      </tr> 
 
        <tr> 
 
      <td bgcolor="#e4f3dc" style="color:#000000; font-weight:normal; font-size:8px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:14px;"> 
 
      THE PRODUCTS AND SERVICES DESCRIBED HEREIN HAVE NOT BEEN APPROVED OR ENDORSED BY ANY GOVERNMENTAL AGENCY.</td> 
 
      </tr> 
 
        <tr> 
 
      <td height="8" bgcolor="#e4f3dc"><img src="http://www.johnroebas.com/hosted/phl-spacer2.jpg" width="40" height="8" style="display:block;" align="absbottom"></td> 
 
         </tr> 
 
        <tr> 
 
      <td bgcolor="#e4f3dc" style="color:#000000; font-weight:normal; font-size:8px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:14px;"> 
 
      Monthly payment is based on your current unpaid principal balance of $XXX,XXX.XX. Terms are based on a 30-year Fixed Rate Loan. Actual terms may vary based on loan product. Advertised monthly payment reflects principal and interest payments only and does not include insurance and tax premiums. </td> 
 
      </tr> 
 
        <tr> 
 
      <td height="8" bgcolor="#e4f3dc"><img src="http://www.johnroebas.com/hosted/phl-spacer2.jpg" width="40" height="8" style="display:block;" align="absbottom"></td>   
 
      </tr> 
 
        <tr> 
 
      <td bgcolor="#e4f3dc" style="color:#000000; font-weight:normal; font-size:8px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:14px;"> 
 
      Total monthly payments will be higher. Other terms and restrictions may apply. Please call for details.</td> 
 
      </tr> 
 
      <tr> 
 
      <td height="8" bgcolor="#e4f3dc"><img src="http://www.johnroebas.com/hosted/phl-spacer2.jpg" width="40" height="8" style="display:block;" align="absbottom"></td>   
 
      </tr> 
 
        <tr> 
 
      <td bgcolor="#e4f3dc" style="color:#000000; font-weight:normal; font-size:8px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:14px;"> 
 
      Monthly possible savings amount is based on the difference between your current principal and interest payment and the proposed principal and interest payment as shown in this letter. Monthly payments do not include insurance and tax premiums and, therefore, your monthly savings may be less. Please call for details.</td> 
 
      </tr> 
 
        <tr> 
 
      <td height="8" bgcolor="#e4f3dc"><img src="http://www.johnroebas.com/hosted/phl-spacer2.jpg" width="40" height="8" style="display:block;" align="absbottom"></td>   
 
      </tr> 
 
        <tr> 
 
      <td bgcolor="#e4f3dc" style="color:#000000; font-weight:normal; font-size:8px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:14px;"> 
 
      You must be at least 18 years of age to apply. You may be required to meet eligibility criteria including (but not limited to), the following: that your loan be secured by your primary residence; that you meet minimum credit score benchmark, credit history and mortgage payment history requirements; that you are currently employed; and that your combined monthly debts and other credit obligations are not excessive in relation to your verifiable gross monthly income.</td> 
 
      </tr> 
 
        <tr> 
 
      <td height="8" bgcolor="#e4f3dc"><img src="http://www.johnroebas.com/hosted/phl-spacer2.jpg" width="40" height="8" style="display:block;" align="absbottom"></td>   
 
      </tr> 
 
        <tr> 
 
      <td bgcolor="#e4f3dc" style="color:#000000; font-weight:normal; font-size:8px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:14px;"> 
 
      Equal Housing Lender. Planet Home Lending, LLC NMLS ID # 17022</td> 
 
      </tr> 
 
        <tr> 
 
      <td height="8" bgcolor="#e4f3dc"><img src="http://www.johnroebas.com/hosted/phl-spacer2.jpg" width="40" height="8" style="display:block;" align="absbottom"></td>   
 
      </tr> 
 
        <tr> 
 
      <td bgcolor="#e4f3dc" style="color:#000000; font-weight:normal; font-size:8px; line-height:12px; font-family: verdana, open sans, helvetica, gill sans, sans-serif; padding-left:14px; padding-right:14px;">(www.nmlsconsumeraccess.org). Headquarters located at 321 Research Parkway, Suite 303, Meriden, CT 06450. AZ Mortgage Banker License MB-0929069, Licensed by the Department of Business Oversight under the California Residential Mortgage Lending license #: 4130947, Georgia Residential Mortgage Licensee #24035, Illinois Residential Mortgage Licensee, Licensed by the Mississippi Department of Banking and Consumer Finance, Licensed by the New Hampshire Banking Department, OH Mortgage Broker Act Mortgage Banker Exemption MBMB.850161.000, OR Mortgage Lending License ML-5147, Rhode Island Licensed Lender, Licensed by the N.J. Department of Banking and Insurance, TX SML Mortgage Banker, WA Consumer Loan Company License CL-17022</td> 
 
      </tr> 
 
        <tr> 
 
      <td bgcolor="#e4f3dc">&nbsp;</td> 
 
      </tr> 
 
     </tbody> 
 
     </table></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</body> 
 
</html>

答えて

0

あなたは、テーブルのセルとクラスそれらの両方のうちの1つに両方の画像に追加する必要がありそう。その後、我々はdisplay:block;display:none;

HTML

<tr> 
    <td> 
     <img id="desktop" src="http://www.johnroebas.com/hosted/phl-headline2.jpg" alt="Good News" style="-ms-interpolation-mode: bicubic;"> 
     <img id="mobile" src="http://www.johnroebas.com/hosted/phl-headline-320-2.jpg" alt="Good News" style="-ms-interpolation-mode: bicubic;"> 
    </td> 
</tr> 

(スタイルブロックで)CSS

img#mobile{ 
    display:none; 
} 

@media only screen and (max-width: 480px){ 
    img#mobile{ 
     display:block !important; 
    } 
    img#desktop{ 
     display:none !important; 
    } 
} 

ここにあなたのための一例をワーキング

http://codepen.io/jcoulterdesign/pen/6ae61ee4abda054b15ce9c99fea3452c

を切り替えることができますメディアクエリを使用して