JavaScript自动将图片粘贴到html中

时间:2017-06-19 08:01:29

标签: javascript html

我有一个网站,左边有一个导航栏,上面显示的是小图片。每次点击它们,就像右边的那个一样。

我真的不知道如何调用它,但我想要一个javascript,它扫描我的电脑上的文件夹中的jpg并将它们放入htmlínto导航div。

如果有人能帮助我,我会非常感激。

度过美好的一天!

我的HTML:

<head>

    <meta charset="utf-8">

    <link href="style.css" rel="stylesheet" type="text/css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script src="scan.js" rel="javascript" type="text/javascript"> </script>
    <script src="script.js" lang="javascript" type="text/javascript"> </script> 

    <title> Galerie </title>


</head>

<body>

    <div id="caption"> <h1> Bildergalerie </h1> </div>

    <div id="main">

        <div id="navigation"> <!-- Navigationsleiste -->

            <img src="simson-kr51.jpg" alt="simson-kr51.jpg" title="simson-kr51.jpg" onclick="bildAnzeigen('simson-kr51.jpg');" />
            <br />
            <img src="simson-s51.jpg" alt="simson-s51.jpg" title="simson-s51.jpg" onclick="bildAnzeigen('simson-s51.jpg');" />
            <br />
            <img src="simson-s50.jpg" alt="simson-s50.jpg" title="simson-s50.jpg" onclick="bildAnzeigen('simson-s50.jpg');" />
            <br />
            <img src="simson-s53.jpg" alt="simson-s53.jpg" title="simson-s53.jpg" onclick="bildAnzeigen('simson-s53.jpg');" />
            <br />
            <img src="simson-sr1.jpg" alt="simson-sr1.jpg" title="simson-sr1.jpg" onclick="bildAnzeigen('simson-sr1.jpg');" />
            <br />
            <img src="simson-sr2.jpg" alt="simson-sr2.jpg" title="simson-sr2.jpg" onclick="bildAnzeigen('simson-sr2.jpg');" />
            <br />
            <img src="simson-duo.jpg" alt="simson-duo.jpg" title="simson-duo.jpg" onclick="bildAnzeigen('simson-duo.jpg');" />
            <br />
            <img src="simson-albatros.jpg" alt="simson-albatros.jpg" title="simson-albatros.jpg" onclick="bildAnzeigen('simson-albatros.jpg');" />
            <br />
            <img src="simson-sr50.jpg" alt="simson-sr50.jpg" title="simson-sr50.jpg" onclick="bildAnzeigen('simson-sr50.jpg');" />
            <br />

        </div>


        <div id="ansicht">  <!-- Großansicht -->

            <img id="grossesBild" src="simson-kr51.jpg" alt="simson-kr51.jpg" title="simson-kr51.jpg" />

        </div>

    </div>

</body>

获取更大图片的脚本:

function bildAnzeigen(imgName) {  
var Bild = document.getElementById('grossesBild');  	
Bild.src = imgName;  
Bild.alt = imgName;  
Bild.title = imgName;  
}

0 个答案:

没有答案