More than 5 years have passed since last update.

Javascript 画像を動的に切り替える

Posted at 2019-03-22

画像を動的に切り替えたい時がある。
例えばこちらのサイトのように。
https://www.street-academy.com/myclass/14616?sessiondetailid=506634&trigger=browse-history_top
つまり、サムネイル画像？をクリックするとその拡大画像が表示されるというもの

参考にした記事はこちらである。
https://www.sejuku.net/blog/63834

上記の記事を参考にして
作成したテンプレートはこちら。
基本は一つ目のサイトと同じ機能

pic_change.html

<html>
    <body>
        <img id="mypic" src="pics/1.jpg" width="400" height="300">

        <img class = "pic" onclick="slideshow('0')" src="pics/1.jpg" width="10%">
        <img class = "pic" onclick="slideshow('1')" src="pics/2.jpg" width="10%">
        <img class = "pic" onclick="slideshow('2')" src="pics/3.jpg" width="10%">

            <script>
            var pics_src = new Array("pics/1.jpg","pics/2.jpg","pics/3.jpg");
 
            function slideshow(num){
                document.getElementById("mypic").src=pics_src[num];
            }
            </script>
    </body>
</html>

<style>
    body .pic:hover{
	    opacity: 0.6; 
        filter: brightness(110%);/*リンクにマウスが乗ったら背景色を変更する*/
        background-color:brown;
    }
</style>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up