php - 画像タイトルの代わりにアンカータイトルを使用する

Question

アンカーに画像がある場合、画像要素のタイトルではなく、アンカーのタイトルを表示するにはどうすればよいですか？

javascriptでtitle属性を削除できることは知っていますが、もっと簡単な解決策があることを望んでいます。

例えば

<a title="Anchor Title"><img title="Image Title" /></a>

リンクにカーソルを合わせると、「画像のタイトル」が表示されます。

私が試したこと

CSSを使用すると、アンカーを前面にプッシュするようにzインデックスを変更したり、アンカーをブロックとして表示して画像の幅と高さを指定したりできると思いました。これは機能しませんでした。ここでJSFiddleを参照してください。

私はCSSまたは多分HTMLで解決策を見つけることを望んでいました。

私がこれをやりたい理由は、私がWordpressで作業していて、投稿やサムネイルを吐き出しているからです。サムネイルを特定のページにリンクしたいのですが、リンクにユニバーサルタイトルを付けたいのですが、個々のサムネイルからタイトルを取得しています。Wordpress/PHPのコードは次のとおりです。

<a href="<?php the_permalink(); ?>" title="Click to see Featured Stories">
<?php the_post_thumbnail(); ?>
</a>

Answer 1

サムネイルの配列のtitle属性に空の文字列を渡します。$attr

<?php the_post_thumbnail('thumbnail', array('title' => '')); ?>

Answer 2

これは、WordPressを無視して、一般的な解決策を提供します。CSSは、タイトルが表示されないようにします。

HTML：

<a title="Anchor Title">
    <img title="Image Title" src="http://codepen.io/images/logo.png" />
</a>

CSSの場合：

a {
  display: inline-block;
}

img {
  pointer-events: none;
}

結果

CodePenの例を参照してください

Answer 3

<span>透明な背景と目的のタイトル属性を使用して、画像の上に透明を配置するだけです。

マークアップ

<a href="#">

    <img title="Image Title" />
    <span title="Div Title"></span>    

</a>​

CSS

img { width:50px;height:50px;background:blue; }
a, img { position:absolute; } 
a { z-index:4;display:block;width:50px;height:50px; }
img { z-index:2; }
​span{
    top:0;
    left:0;
    position:absolute;
    width:50px;
    height:50px;    
    display:block;
    z-index:100;
    background-color:transparent;
}​

私はあなたのフィドルをフォークしました、少なくともChromeで動作します。

Answer 4

img title属性を削除することが、すべての中で最も簡単な解決策だと思います。

Answer 5

http://jsfiddle.net/hnmuj/

CSS：

#foo {
    position:relative;
    display:block;    
}
#foo span {
    position:absolute;
    width:100%;
    height:100%;
    z-index:1;
    top:0;
    left:0;
    display:block;   

} </ p>

HTML：

<a title="Anchor Title" id="foo">
    <span></span>
    <img title="Image Title" />
</a>​