html toggle 2 фоновых изображения - PullRequest
Новая
       23

html toggle 2 фоновых изображения

0 голосов
/ 01 марта 2012

Как я могу переключать фоновое изображение между двумя разными .gifs.

На данный момент у меня есть: 

<td style='background:url(image1.gif)'>

Но хотелось бы, чтобы он переключался между image1.gif и image2.gif каждую 1 секунду.

Требуется ли какой-нибудь javascript или css или что-то еще?

Ответы [ 5 ]

0 голосов
/ 01 марта 2012

Вот простой способ сделать это без jquery: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
  <title>Sample</title>

  <style type="text/css" id="vbulletin_css">
    #cell {      
      width: 200px;
      height: 200px;
      background: url('image1.gif');
    }
  </style>


  <script type="text/javascript">

  // start by setting current background image flag
  var currentImage = 1;

  function init() {
    // start calling function 'changeImage' every second
    setInterval(changeImage,1000);    
  }

  function changeImage() {
    if (currentImage == 1) {
      // set background image to image2      
      document.getElementById('cell').style.background = "url('image2.gif')";
      currentImage = 2;
    }
    else {
      document.getElementById('cell').style.background = "url('image1.gif')";
      currentImage = 1;
    }
  }

  window.onload = init;  

  </script>

  </head>
  <body>
    <table>
      <tr>
        <td id="cell"></td>
      </tr>
    </table>
  </body>
</html>
0 голосов
/ 01 марта 2012

Css 

.bg_one{background:url(image1.gif)}
.bg_two{background:url(image2.gif)}

Html 

<td class='bg1'></td>

Javascript (JQuery) 

setInterval(function(){
    if($('td').hasClass('bg_one'))
       $('td').toggleClass('bg_two');
    else
       $('td').toggleClass('bg_one');  
}, 1000);
0 голосов
/ 01 марта 2012

Без JavaScript вы можете сделать что-то с помощью CSS, например: 

​td:hover {
 background: url(image2.gif) !important;   
}​

Вот пример jsFiddle с использованием цветов вместо изображений.

Пример 2 (нацеливается на класс): 

​td.someclass:hover {
 background: url(image2.gif) !important;   
}​
0 голосов
/ 01 марта 2012

Это должно сделать это - http://jsfiddle.net/Jc2Bq/

HTML 

<table>
    <tr>
        <td class="bgimage">&nbsp;</td>
    </tr>
</table>

CSS (замените цвета изображениями, которые вы хотите) 

td.bgimage{
     padding: 10px;
     background: #333;
}

td.bgimage.toggled{
     background: #f00;
}

1010 * Javascript * 

function colorChange(){
    setTimeout(function(){
        $('td.bgimage').toggleClass('toggled');
        colorChange();
    }, 1000);
}

colorChange();
0 голосов
/ 01 марта 2012

Я думаю, вам нужно будет использовать JavaScript с использованием функции setTimeout() (ссылка здесь ).

...