HTMLだけで画像内の好きな位置に文字リンクをいれる

HTMLだけで画像内の好きな位置に文字リンクをいれる

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>

未分類カテゴリの最新記事