さて、今回「JavaScript」のご紹介をしたいと思います。
とはいうものの、私はそんなには詳しくはないのですが(笑
いきなりですが、複数の画像をページに載せたい時、レイアウトは様々だと思いますが、
あまりに画像を多く載せてしまうと、読み込みに時間がかかって、ページを開くのに時間がかかり、若干ストレスを感じるようになってしまいます。
そんな時利用してもいいかなというのが
「ボタンをクリックするだけで、表示している画像を切り替える」というものです。
よく私は中古車のサイトを覗きますが、そこでも車の状態写真を見るのに利用されていますね。
一応参考までにソースを。
<html>
<title>image Change1</title>
<body bgcolor="#fff8dc">
<script type="text/Javascript">
<!--
function changeImage(imageName) {
document.targetimage.src=imageName;
}
//-->
</script>
<hr />
<img name="targetimage" src="images/img1.gif" /><br />
<br />
下記をクリック<br />
<image src="images/img1s.gif"
onclick="changeimage ('images/img1.gif')" />
<image src="images/img2s.gif"
onclick="changeimage ('images/img2.gif')" />
<image src="images/img3s.gif"
onclick="changeimage ('images/img3.gif')" />
</body>
</html>
基本的なソースなので、これを応用することで幅が広がると思います。
参考までにJavaScrpitの勉強ができるサイトを↓
http://javascript.eweb-design.com/
まだ勉強中なので間違ってる部分もあるかもしれませんが、
今後チョコチョコ紹介出来ればと思います。
栃木県のホームページ制作はデザイン・チャンネル 栃木・宇都宮
321-0106
栃木県宇都宮市上横田町１３１８−９ ハイツコンフォート １Ｆ
電話 028 655 7988
http://design-ch.com/
とはいうものの、私はそんなには詳しくはないのですが(笑
いきなりですが、複数の画像をページに載せたい時、レイアウトは様々だと思いますが、
あまりに画像を多く載せてしまうと、読み込みに時間がかかって、ページを開くのに時間がかかり、若干ストレスを感じるようになってしまいます。
そんな時利用してもいいかなというのが
「ボタンをクリックするだけで、表示している画像を切り替える」というものです。
よく私は中古車のサイトを覗きますが、そこでも車の状態写真を見るのに利用されていますね。
一応参考までにソースを。
<html>
<title>image Change1</title>
<body bgcolor="#fff8dc">
<script type="text/Javascript">
<!--
function changeImage(imageName) {
document.targetimage.src=imageName;
}
//-->
</script>
<hr />
<img name="targetimage" src="images/img1.gif" /><br />
<br />
下記をクリック<br />
<image src="images/img1s.gif"
onclick="changeimage ('images/img1.gif')" />
<image src="images/img2s.gif"
onclick="changeimage ('images/img2.gif')" />
<image src="images/img3s.gif"
onclick="changeimage ('images/img3.gif')" />
</body>
</html>
基本的なソースなので、これを応用することで幅が広がると思います。
参考までにJavaScrpitの勉強ができるサイトを↓
http://javascript.eweb-design.com/
まだ勉強中なので間違ってる部分もあるかもしれませんが、
今後チョコチョコ紹介出来ればと思います。
栃木県のホームページ制作はデザイン・チャンネル 栃木・宇都宮
321-0106
栃木県宇都宮市上横田町１３１８−９ ハイツコンフォート １Ｆ
電話 028 655 7988
http://design-ch.com/
