0

HTMLまたは何らかのJavaScriptを使用して、画像の「alt」タグ内にHTMLコードを追加できるかどうかを確認しようとしています。ファンシーボックスを画像ギャラリーとして使用しています。ファンシーボックスをフォームとして使用して画像を表示し、画像の説明にスタイル付きの情報 (箇条書きや区切りなど) を追加し、別のページに移動するボタンを追加しようとしています。現在、ボタンは機能していますが、そのボタンはjavascriptにあるため、すべてのファンシーボックス画像にはそのボタンと同じURLがあります。そして、各画像の各ボタンへの異なるリンクが必要です。

これは、現在ファンシーボックスの画像の下に代替テキストを表示している私が持っているjavascriptです。

$(".fancybox").fancybox({               
                padding : 0,
                beforeShow: function () {
                    this.title = $(this.element).attr('title');
                    this.title = '<h4>' + this.title + '</h4>' + '<div style="width:100%; height: 150px; overflow: auto;">' + $(this.element).parent().find('img').attr('alt') + '<a class="button button-small" href="http://www.google.com"> Sign Up </a>' + '</div>';
                },
                helpers : {
                    title : { type: 'inside' },
                }
            });

そのファンシーボックスの index.html の html は次のとおりです。

<li class="item-thumbs span3 design">
                                <!-- Fancybox - Gallery Enabled - Title - Full Image -->
                                <a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" href="_include/img/work/full/image-01-full.jpg">
                                    <span class="overlay-img"></span>
                                    <span class="overlay-img-thumb font-icon-plus"></span>
                                </a>
                                <!-- Thumb Image and Description -->
                                <img src="_include/img/work/thumbs/image-01.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis.">
                            </li>
4

1 に答える 1

3

属性 (タグではaltない) は定義上、プレーン テキストであるため、そこに挿入したものはすべて、ブラウザーによってプレーン テキスト (マークアップではない) として認識されます。HTML タグのように見える文字列を属性値に挿入し、altそれらを解析してマークアップとして処理するコードをいじる場合、これは他の属性での同様の操作と同じです。

このalt属性には、画像が表示されていないときに、画像のテキスト置換として機能する、明確に定義されたジョブがあります。したがって、それを他の目的に使用しようとするのは非生産的です。

同様の考慮事項がtitle属性にも適用されます。

したがって、HTML として解析されるデータを使用するには、カスタム属性、具体的には のようなdata-*属性data-desc、または好みのものを使用する方がはるかに優れています。ブラウザや検索エンジンでのデフォルトの処理がないため、個人的な目的で安全に使用できます。

于 2013-09-17T18:09:02.427 に答える