JavaScript・PHP・Vue.jsのサンプルやWordPressのテーマ・無料フォント、ブログの運営方法等の紹介

JavaScript

クリックして画像を切り替える

document.オブジェクト名.src = URL;

※「オブジェクト名」は、切り替える画像に「name」で指定した名前が入ります。
※「URL」には切り替え後の画像のURLを入れます。

画像を切り替えるJavaScriptを使うことで、例えば小さなサムネール画像をクリックすることで大きい画像を表示するように出来ます。これの応用でメニューボタンなどのロールオーバー(ボタンを光らせたりする)なども出来るようになります。(WEB上手の上にあるメニューのような効果)

<html>
<head>
<title>クリックして画像を切り替える</title>
</head>
<body>

<table border="0" width="470" cellpadding="0" cellspacing="0">
<tr>
<td width="120">
<a href="javascript:document.ph01.src = 'img/change_ph01.jpg'; void(0);">
<img src="img/change_ph01.jpg" width="100" height="70"
alt="写真1" border="0"></a><br>

<a href="javascript:document.ph01.src = 'img/change_ph02.jpg'; void(0);">
<img src="img/change_ph02.jpg" width="100" height="70"
alt="写真2" border="0" vspace="10"></a><br>

<a href="javascript:document.ph01.src = 'img/change_ph03.jpg'; void(0);">
<img src="img/change_ph03.jpg" width="100" height="70"
alt="写真3" border="0"></a><br></td>

<td width="350" align="right"><img src="img/change_ph01.jpg"
width="329" height="230" alt="拡大写真" name="ph01"></td>
</tr>
</table>

</body>
</html>

写真1
写真2
写真3
拡大写真

サンプルでは、左側にあるサムネール(3枚の小さな写真)をクリックすると、右側にそれぞれの大きな写真が表示されます。右側の拡大写真にはname="ph01"で「ph01」という名前を付けてあります。そして左側の小さい写真には、それぞれに「document.ph01.src = 'img/change_ph01.jpg';」という感じで、大きい写真に変わるようにURLを指定してあります。その後の「void(0);」はページが上にスクロールされるのを防ぐ「何もしない」命令です。


関連記事

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

このサイトについて

JavaScript・PHP・Vue.jsのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com