0

一部のヘッダーを画像に置き換えたいので、素敵なフォントが必要です。たとえば

<div class="latest_news">
  Latest News
</div>

SEOの場合はテキストがありますが、ユーザーにとっては素晴らしい画像です。また、jquery スクリプトはリンクを認識できるため、メール アドレスを置き換えたい場合でもクリック可能です。例えば：

<div class="email_me">
  <a href="mailto:info@mydomain.com">info@mydomain.com</a>
</div>

スクリプトは、テキストを非表示に置き換え/移動して、配置する必要があります

<div class="email_me">
  <a href="mailto:info@mydomain.com"><img src="images/email.png" style="...;border:0;" alt="info@mydomain.com" /></a>
</div>

jquery/cssでそれを行うにはどうすればよいですか?

4

3 に答える 3

2

Web フォントが最適なソリューションです。しかし、ここにjQueryがあります：

$('.email_me a').html('<img src="..." style="..." alt="..." />');

例: http://jsfiddle.net/6b874/

于 2012-07-02T16:33:22.147 に答える
2

おそらく、Web フォント (http://www.google.com/webfonts/ など) を使用したほうがよいでしょう。これらは、画像を使用するときに発生する問題を引き起こしません。また、ほとんどのブラウザーがサポートされています。

于 2012-07-02T11:57:28.547 に答える
1

このスタイルを試してください:

#email_me { 
   width : ...
   height: ...
}

#email_me a {
   display     : block;
   width       : 100%;
   height      : 100%;
   overflow    : hidden;
   text-indent : 100%;
   font        : 0/0 a;
   background  : url(images/email.png) top left no-repeat;
}

私は試しませんでしたが、領域全体をクリック可能なままにする必要があります。

于 2012-07-02T11:57:58.177 に答える