Измените фоновое изображение тела onclick с изображениями из ul

-1

Я хочу получить тело с определенным фоновым изображением и быть в состоянии выбрать из ul на задний план, который я хочу изменить (например: автомобиль, собака, дом .. .).Измените фоновое изображение тела onclick с изображениями из 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>

источник

2015-09-09 arnausd

... и ваш вопрос? –

Где код в функции 'encender()'? –

Вы не четко указать, что вы хотите сделать с выбора тега. Однако, как я понял, вы хотите изменить фоновое изображение при изменении опции. Ваш eventHandler вызывает функцию, которая не создана. Я вызвал событие обмена через JQuery, чтобы сохранить фоновое изображение из выбранного значения параметра в приведенном ниже коде.

 var body = document.getElementById('body'); 
 
    var select= document.getElementById('borde'); 
 
    $('select[name=select1]').on('change', function(){ 
 
      body.style.backgroundImage = \t String('url('+ \t 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>

источник

2015-09-09 22:43:17 developer

Да, я объяснил это ужасно, но это было то, что я хочу, спасибо за то время и извините за мое плохое объяснение – arnausd

Хорошо. Сбивают с толку то, что вы упомянули «ul», но в вашем коде не 'ul', а событие onchange вызывает функцию' encender() ', которая не объявлена. Перед публикацией обязательно перечитайте свой вопрос. – developer

Если я правильно понимаю вас, вы хотите изменить фоновое изображение тела в соответствии с тем, что выбрано в теге правильно?

Если это так, то это может быть выполнено с помощью 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>

источник

2015-09-09 21:49:15

Измените фоновое изображение тела onclick с изображениями из ul

ответ

Смежные вопросы