jquery - 移动文本并放置图像jquery

Question

我想用图像替换一些标题，所以我会有很好的字体。例如

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

对于搜索引擎优化，会有文字，但对于用户 - 漂亮的图像。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 中做到这一点？

Answer 1

最好使用 webfonts（http://www.google.com/webfonts/ 或类似的东西）。这些不会导致使用图像时发生的任何问题，并且支持大多数浏览器。

Answer 2

网络字体将是最佳解决方案。但这是一个 jQuery 的：

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

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

Answer 3

试试这种风格：

#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;
}

我没有尝试过，但整个区域应该保持可点击状态。