Html 用所选图像替换硬编码图像_Html_Image_Onclick_Getelementbyid_Banner

Html 用所选图像替换硬编码图像

html image

Html 用所选图像替换硬编码图像,html,image,onclick,getelementbyid,banner,Html,Image,Onclick,Getelementbyid,Banner,我有一个我正在创建的页面，我可以上传图片并选择图片，但是我的目标是选择图片并让它替换横幅。目前，我的横幅是硬编码，以查看它将住在哪里。我在获取所选图像以替换横幅时遇到问题。这是我的密码。所有样式和JS都是内联atm。感谢您的帮助，web开发人员不是我的最爱 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://maxcdn.boots

我有一个我正在创建的页面，我可以上传图片并选择图片，但是我的目标是选择图片并让它替换横幅。目前，我的横幅是硬编码，以查看它将住在哪里。我在获取所选图像以替换横幅时遇到问题。这是我的密码。所有样式和JS都是内联atm。
感谢您的帮助，web开发人员不是我的最爱

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="Banner.js"></script>
    <title>Thrillful</title>
</head>

<body>
    <div>
        <header>
            <nav class="navbar navbar-inverse" roll="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <!-- Nav bar  -->
                        <a class="navbar-brand" id="brand" href="#">THRILLFUL</a>
                    </div>
                    <form class="navbar-form navbar-left" id="search-box" action="/action_page.php">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                        <button type="submit" class="btn btn-warning">Submit</button>
                    </form>
                    <ul class="nav navbar-nav">
                        <li><a href="register.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
                        <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    </ul>
                </div>
            </nav>

            <!-- Banner  -->
            <!-- Sandi's Code -->
            <div class="w3-content">
                <img class="mySlides" src="https://i.imgur.com/ZtdhrUA.jpg" alt="custom_html_banner1"
                    style="width:100%">
            </div>
        </header>

        <br>
        <br>
        <br>

        <main>
            <!-- This uploads the image and the onclick on the iamge allows you to see the image larger for selecting-->
            <h1>Image Import</h1>
            <form action="/action_page.php">
                <input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)"
                    style="display: none;">
                <p><label type="submit button" for="file" style="cursor: pointer;" class="btn btn-primary" >Upload Image</lable></p>
                <p><img id="output" width="1000" onclick="myFunction(this);"/></p>
            </form>
    </div>
    <!-- <div class="row">
        <div class="column">
            <img src="C:\Users\sandi\Desktop\Classes\Spring2021\Capstone\Thrillful\thrillful\images\banner1.png" alt="Banner" style="width:100%"
                onclick="myFunction(this);">
        </div>
    </div> -->

    <div class="container">
        <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
        <img id="expandedImg" style="width:100%">
        <div id="imgtext"></div>
    </div>


    <div>
        Use the Image

    </div>
    <script>
        var loadFile = function (event) {
            var image = document.getElementById('output');
            image.src = URL.createObjectURL(event.target.files[0]);
        };

        // This function is only to click on image and expand. 
        function myFunction(imgs) {
            var expandImg = document.getElementById("expandedImg");
            var imgText = document.getElementById("imgtext");
            expandImg.src = imgs.src;
            imgText.innerHTML = imgs.alt;
            expandImg.parentElement.style.display = "block";
        }
    </script>
    </main>

    <br>
    <br>
    <br>

    <!-- Responsize Footer  -->
    <footer class="fBrand age-footer font-small special-color-dark pt-4">

        <div class="grid-container">
            <div class="grid-item">
                <h1>Thrillful Logo</h1>
                <img src="/images/image0.jpg" alt="logo">
            </div>
            <div class="subscribe grid-item">
                <form class="input-group">
                    <input type="text" class="form-control form-control-sm" placeholder="Your email"
                        aria-label="Your email" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-sm btn-outline-white my-0" type="button">Sign up</button>
                    </div>
                </form>
            </div>
            <div class="social grid-item">
                <p>social icons Facbook and instagram</p>
                <a href="#" class="fa fa-facebook"></a>
                <a href="#" class="fa fa-instagram"></a>
            </div>
        </div>
    </footer>


    </div>
</body>

</html>


激动人心
提交










图像导入
上传图像

-->
&时代；






惊险标志
注册
社交书籍和instagram