CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3492795
user3492795

Reputation: 193

Replacing Images on a fixed background

I have developed a fixed background with an image on each side on the background. I would like to keep the background fixed and replaced the side images every X amount of seconds with an easing effect.

The below is what I have did

This is the HTML:

<div class="container">
  <img src="http://rcb.com.mt/wordpresstesting/testimages/bk-ground.jpg" />
  <img class="element1" src="http://rcb.com.mt/wordpresstesting/testimages/element1.jpg" />
  <img  class="element2" src="http://rcb.com.mt/wordpresstesting/testimages/element2.jpg" />
</div>

This is the CSS:

.container{
        position: relative; 
        left: 0; 
        top: 0;
}
.element1{
    position: absolute; 
    top: 80px; 
    left:0px;
}

.element2{
    position: absolute; 
    left:720px;
    top:80px;
    }

A fiddle can also be seen here: jsFiddle - I would like the Red and Yellow box to replace with other images. (Obviously the coloured boxed are for example purposes - these will eventually change to images)

I would really appreciate your help if you could help me out in this or maybe suggest any libraries ready to use in achieving this effect & animation.

Upvotes: 0

Views: 66

Answers (3)

suneetha
suneetha

Reputation: 827

use Jquery library for show/hide images with ease manner and setInterval for replacing the images every few secs.

Code:

  <!DOCTYPE html>
  <html>
    <head>
      <title></title>
      <style type="text/css">
        .container{
              position: relative; 
              left: 0; 
              top: 0;
             }
        .element1{
          position: absolute; 
          top: 80px; 
          left:0px;
         }
        .element2{
          position: absolute; 
          left:720px;
          top:80px;
         }
      </style>
      <script src="jquery.js"></script>
    </head>
    <body>
     <div class="container">
        <img src="http://rcb.com.mt/wordpresstesting/testimages/bk-ground.jpg" />
        <img class="element1" src="http://rcb.com.mt/wordpresstesting/testimages/element1.jpg" />
        <img  class="element2" src="http://rcb.com.mt/wordpresstesting/testimages/element2.jpg" />
     </div> 
     <script type="text/javascript">
      var url = "http://rcb.com.mt/wordpresstesting/testimages/";
      var limg_array = ['element2.jpg', 'element1.jpg', 'element2.jpg'];
      var rimg_array = ['element1.jpg', 'element2.jpg', 'element1.jpg'];
      var i = 0,
       j = 0;

      function changeImage() {
        if (i == limg_array.length) {
          i = 0;
        }

        if (j == rimg_array.length) {
          j = 0;
        }

        $('.element1').hide();
        $('.element1').attr('src', url + limg_array[i]);
        $('.element1').show("slow");
        i = i + 1;

        $('.element2').hide();
        $('.element2').attr('src', url + rimg_array[j]);
        $('.element2').show("slow");
        j = j + 1;

      }
      window.setInterval(changeImage, 10000);
    </script>
  </body>
</html>

JS Fiddle : http://jsfiddle.net/p5uEW/7/

Upvotes: 1

sshet
sshet

Reputation: 1160

If you want to replace images every X seconds , Then use

 setInterval(function() {
          // Do something every X seconds, 
        $('.element1').attr("src", 'http://path-to-new-image');
    }, X);

Upvotes: 1

Hawk
Hawk

Reputation: 783

if you don't want the background to change then start by modifying your css property as so

body
{
background-image: url('location/img.jpg');
background-position: top/right/left/bottom; // choose that you need
}

that way, your classes will not be affected when changing the pictures.

Upvotes: 0

Related Questions