§01-06…画像をリンクボタンにする – オンライン無料パソコン教室

§01-06…画像をリンクボタンにする

(01) 「index.htm」の画像をクリックしたら「large.htm」に切り替わるようにリンクを設定します。「index.htm」の<img />に「large.htm」へのリンクを設定してください。

<body>
<h1>近所の猫</h1>
<p><a href="large.htm"><img src="neko01.jpg" width="96" height="125" alt="昼寝している猫" /></a>近所の公園で撮影した猫です。お昼寝の最中でしたがとってもかわいかったのでつい写真に収めてしまいました。暑い日だったので木の上でお昼寝をしていたようです。</p>
<p class="kaijo">この公園には沢山の猫がいます。誰かが餌を与えているんでしょうか?みんな丸々太っています。それにしても気持ちよさそうに寝ていますね。</p>
</body>

(02) ブラウジングしましょう。また、リンク画像をクリックしてテストしてください。なお、画像にリンクを設定すると、画像にボーダーが設定されます。

(03) 画面が「large.htm」に切り替わりました。画像をリンクボタンとすることができました。

広告ブロックブラウザーではコンテンツが表示できません