使用按钮更改图像+网格

时间:2018-12-14 10:11:24

标签: html css

按钮标签有问题。

enter image description here

请参阅图片。

当我按下按钮时,我想使下面的图片和网格同时改变。但是当前代码只会更改图像,而网格不会更改。

如果您知道解决方法,请让我知道答案。

感谢您的时间。

html

           <div id="MAPBUTTON">


    <div style="width:500px;  margin:0 auto; padding-top: 100px; padding-bottom: 10px" border: 0;>

    <button type="submit" style="border: 0; background: transparent" >
<img src="images/buttonmap-11.png" width="150" height="auto" alt="submit"  
     onclick="changeImage1()"  value="Change" //> 

    <button type="submit" style="border: 0; background: transparent">
<img src="images/buttonmap-12.png" width="150" height="auto" alt="submit" 
     onclick="changeImage2()" value="Change" //>

    <button type="submit" style="border: 0; background: transparent">
<img src="images/buttonmap-13.png" width="150" height="auto" alt="submit" 
     onclick="changeImage3()" value="Change" //>

    </div>


<script>
    function changeImage1() {

        var image = document.getElementById('mapimage');
        if (image.src.match("images/img_parallax2")) {
            image.src = "images/map-09.jpg";  


        }

        else {
            image.src = "images/map-09.jpg";  
        }



           var image = document.getElementById('mapimage');
        if (image.src.match("images/img_parallax2")) {
            image.src = "images/map-09.jpg";  


        }

        else {
            image.src = "images/map-09.jpg";  
        }

    }



       function changeImage2() {
        var image = document.getElementById('mapimage');
        if (image.src.match("images/img_parallax")) {
            image.src = "images/map-10.jpg";
        }
        else {
            image.src = "images/map-10.jpg";
        }
    }



        function changeImage3() {
        var image = document.getElementById('mapimage');

        if (image.src.match("images/img_parallax3")) {
            image.src = "images/img_parallax3.jpg";
        }
        else {
            image.src = "images/map55.jpg";
        }
    }
</script>

 
<div class="box b">  <div class="box a"><a href="#"><img src="images/mapimagecolum02.png" onmouseover="this.src='images/mapimagecolum02-1.png'" onmouseout="this.src='images/mapimagecolum02.png'" border="0"></a></div>

                      

0 个答案:

没有答案