CSSを使わずにhtmlだけで画像内の任意の位置にテキスト、リンクをはる方法。
自分のために覚え書き( ..)φ
最初ビルダーでやってみたけどよくわかってないから崩れちゃって断念。
結局いろいろ調べてエディタで手打ち(苦笑)
自己流なので変なコードになってたらごめんなさい。
横800px縦400pxの画像の上から200px左から60xの位置にテキストとテキストリンクを挿入↓
<p>はじめまして</p>
<div style=”position:relative; width:800px; height:400px;”>←画像とテキストをまとめるボックス 『position:relative;』相対位置へ配置
<img src=”” alt=”” width=800 height=400>←画像リンク、代替えテキスト、縦横のサイズ
<span style=”position:absolute; top:200px; left:60px; line-height : 200%;”>画像内のテキストを入れるボックスとその位置。line-heightで行の高さ『position:absolute;』絶対位置へ配置
<b>おはよう<br>←テキスト入力<b>は太字、閉じタグ必要。<br>で改行、こっちは閉じタグ不要
※こんにちは<br>
おつかれさま<a href=””>リンク</a>おやすみ<br>
また明日</b></span>
</div>
コードのみ↓
<div style=”position:relative; width:800px; height:400px;”>
<img src=”” alt=”” width=800 height=400>
<span style=”position:absolute; top:200px; left:60px; line-height : 200%;”>
<b>おはよう<br>
※こんにちは<br>
おつかれさま<a href=””>リンク</a>おやすみ<br>
また明日</b></span>
</div>
コメント