mamohoのＨＰ作成講座

mamohoのＨＰ作成講座

画像をスライスして表示させる　2

●　画像をスライスして表示しよう　2

今回も　画像をスライスしてリンクを貼る様に作ってみました
これは　ＰｈｏｔｏＳｈｏｐで写真を加工しています
まず　下の画像をみてください

クリスマス4
クリスマス5
クリスマス6
クリスマス7
クリスマス8

この画像は　もともと　幅　600ピクセル　高さ　450ピクセルありますが
前回のお話と同様　9枚の画像をテーブルで配置しています
本当は　こうなってます

クリスマス4
クリスマス5
クリスマス6
クリスマス7
クリスマス8

ちょうど　ボタンの部分がスライスされていますね
この部分にリンクを貼って　他のページにジャンプさせることができます自分の描いたイラストや　好きな写真をスライスして　任意の位置だけリンクを貼る
ということができるわけです

ちょっと難しいお話なんですが　こういうやり方もあるということを覚えておいてくださいソースは　こんな感じです

<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5">
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/64.jpg" width="600" height="90" alt="クリスマス1">
</td>
</tr>
<tr>
<td colspan="5">
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/65.jpg" width="600" height="112" alt="クリスマス2">
</td>
</tr>
<tr>
<td colspan="5">
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/66.jpg" width="600" height="103" alt="クリスマス3">
</td>
</tr>
<tr>
<td rowspan="2">
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/67.jpg" width="54" height="145" alt="クリスマス4">
</td>
<td>
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/68.jpg" width="159" height="58" alt="クリスマス5">
</td>
<td>
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/69.jpg" width="165" height="58" alt="クリスマス6">
</td>
<td>
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/70.jpg" width="163" height="58" alt="クリスマス7">
</td>
<td rowspan="2">
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/71.jpg" width="59" height="145" alt="クリスマス8">
</td>
</tr>
<tr>
<td colspan="3">
<img src="http://plaza.rakuten.co.jp/img/user/94/55/869455/72.jpg" width="487" height="87" alt="クリスマス9">
</td>
</tr>
</table>

© Rakuten Group, Inc.
X
Mobilize your Site
スマートフォン版を閲覧 | PC版を閲覧
    Share by: