0

サムネイルとその上に再生ボタンを配置した「偽のビデオ埋め込み」を作成するシステムを構築しています。画像はサービスから標準サイズで提供されているため、HTML でサイズを変更するしかありません。もう 1 つの制限は、コードブロックが (埋め込みコードのように) 自己完結型である必要があり、外部のスタイルシートに依存しないことです。再生ボタンを透明なPNGとしてオーバーレイしています。私の最初の解決策は、次のようにインライン css を使用してオーバーレイ画像に負のマージンを設定することでした。

<div style="width:340px;height:280px;">
<img src="thumbnail.jpg" width="340" height="280"/>
<div style="margin-top:-280px;"><a href="link-to.video.html">
<img src="transparent-embed-overlay.png" 
border="0"></a></div></div>

しかし、ブログの XML フィードでは、インライン スタイルを認識しないため、透明な再生ボタンが「埋め込み」から「外れて」しまいます。これにより、画像を背景画像として 1 セルのテーブルを作成する必要がありました。しかし、与えられた標準の画像サムネイルのサイズを変更することは不可能であり、デフォルトのサムネイルサイズに押し込まれました.

FWIW、これが私が使用しているコードです：

<table width="320" height="240" background="thumbnail.jpg">
<tr><td><a href="link-to-video.html">
<img src="transparent-overlay.jpg" border="0"></a></td></tr></table>
4

1 に答える 1

0

例へのリンクを送っていただけますか?

私が理解していることから、背景タグを動的に変更していますが、CSS 3 を使用しないと背景画像のサイズを変更できないため、互換性が損なわれています。

CSS Background プロパティには、色、URL、位置 x、y、繰り返しを含めることができます。

すなわち。

background: white url("mypic.jpg") 0 0 no-repeat;

Quirksmode CSS 3 背景

ソースを新しい画像に動的に変更し、高さと幅を何にでも設定するテーブル内で img タグを使用できないのはなぜですか?

または、ユーザーが画像をドラッグすることに問題がある場合は、画像ではなく div を使用して、高さと幅を設定し、画像の上に配置することができます。

于 2009-08-15T19:46:49.483 に答える