web-dev-qa-db-ja.com

画像タイトル属性内にHTMLを追加する

私はホバー上の画像にオーバーレイを適用するいくつかのjqueryを使用しています。このスクリプトは、画像のtitle属性のコンテンツを使用して画像の上に表示します。これをローカルでテストしたところ、うまくいったようで、title=""内でテキストをスタイルすることはできましたが、今はWordPressでテキストをスタイルしようとしていますが、title属性内のテキストをスタイルすることはできません。

<img src="img.png" title="<h1>Title heading</h1><hr><h2>Title sub heading</h2>"
3
Toby Cannon

まず第一に私はあなたがHTMLコンテナの目的のためにtitle属性を使うのをやめることを勧めます。

画像のタイトル(および要素名がそれ自体を表す)は、追加情報を提供し、通常のタイトルの規則に従う必要があります。関連性があり、短く、わかりやすく、簡潔である必要があります。 “)。 FireFoxとOperaでは、画像の上にマウスを置くとポップアップします。

うまく動くようにするためにdata-属性を使うことができます(とても良い "中間" article 使い方の例でdata-attributeについて)

[data- *属性にHTMLタグを含めることができますか?] / data-属性をHTMLと共に使用することは有効です。また、上記の参考文献で推奨されているように、文字エスケープを考慮してください。

3
Ignat B.