最終更新日:2014年12月27日 作成日:2008年8月30日 | コメント(0)

クリックで画像を切り替えるjavascript

小さいサムネイルの写真があり、それを固定された大きい画像エリアに表示する場合が時々あります。
小さいサムネイルの写真をクリックして、大きい画像が切り替えるサンプルをご用意しました。

サンプル

サンプルソース

サンプルソースコード <script type="text/javascript">
<!--
function changeimg(src) {
document.getElementById("img").src = src;
}
//-->
</script>

<p><img src="/photo/images/20080506141601b.jpg" id="img" width="550" height="413" /></p>
<a href="javascript:changeimg('/photo/images/20080506141601b.jpg');"><img src="/photo/images/20080506141601a.jpg" alt="" width="180" height="135" border="0"></a>
<a href="javascript:changeimg('/photo/images/20080824201602b.jpg');"><img src="/photo/images/20080824201602a.jpg" alt="" width="180" height="135" border="0"></a>
</p>
この記事が参考になったらSNSにお願いします。

コメントする


Copyright ぞえぞえねっと All rights reserved