使用来自 ul 的图像更改 body background-image onclick

Question

我想要一个 body 并定义了 background-image 并且能够从 ul 到我想要更改的背景（例如：汽车、狗、房子...） .

body {
    width:1200px;
    height:907px;
    background-image: url("fotos/cc.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

<body>          
<select id="borde" onchange="encender();" name="select1">
            <option value="0" selected="selected"></option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>
</body>

Answer 1

如果我的理解正确，那么你想根据标签中 select 编辑的内容更改正文的背景图像，对吗？

如果是这样，那么可以通过 javascript 使用 switch 语句（如下所示）或通过将 select 标记中选项的值设置为字符串并使用值作为背景图像。第一种方式看起来像这样：

function changeBackground(selectedOption) {
  var imgSRC = "";
  
  switch (selectedOption.value) {
      case "0":
        imgSRC = "dog.png";
        break;
      case "1":
        imgSRC = "cat.png";
        break;
      case "2":
        imgSRC = "house.png";
        break;
      default:
        imgSRC = "default.png";
        break;
  }
  
  document.body.style.backgroundImage = "url('" + imgSRC + "')";
}

<select id="borde" onchange="changeBackground(this);" name="select1">
  <option value="0" selected="selected">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

Answer 2

您没有明确指定要使用 select 标签做什么。但是据我了解，您想在选项更改时更改背景图像。您的 eventHandler 正在调用一个未创建的函数。我已经通过 JQuery 调用了 onchange 事件，以在下面的代码中存储来自 selected 选项值的背景图像。

     var body = document.getElementById('body');
     var select= document.getElementById('borde');
     $('select[name=select1]').on('change', function(){
          body.style.backgroundImage =  String('url('+ select.children[select.selectedIndex].getAttribute('value')+')')
     })

body {
    width:1200px;
    height:907px;
    background-image: url("http://cdn3.megarush.net/wp-content/uploads/2013/01/search-engine-friendly-urls.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id ='body'>          
<select id="borde" name="select1">
            <option value="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg">default</option>
            <option value="https://res.cloudinary.com/ahrefs/image/upload/v1407314140/production-application-pending-logo-152.jpg">1</option>
            <option value="http://www.menucool.com/slider/jsImgSlider/images/image-slider-2.jpg">2</option>
            <option value="http://topwalls.net/wallpapers/2012/01/Nature-sea-scenery-travel-photography-image-768x1366.jpg">3</option>
            <option value="http://img.gettyimageslatam.com/public/userfiles/redesign/images/landing/home/img_entry_002.jpg">4</option>
          </select>
</body>

使用来自 ul 的图像更改 body background-image onclick

Change body background-image onclick with images from ul

html

javascript

css

buttonclick