Problem with Image Fade

  • Resolved treefiddy

    (@treefiddy)


    12 years, 1 month ago

    I’m trying to make the main image on our webpage change between three different images. The problem is the image is a background in a div and that there are other objects on top of the background. Only the first image is showing up. Here is the site Western Bancorp

    Currently I am using this script.

    <script type = "text/javascript">
         function changeImage()
{
    var img = document.getElementById("img");
    img.src = images[x];
    x++;

    if(x >= images.length){
        x = 0;
    } 

    fadeImg(img, 100, true);
    setTimeout("changeImage()", 30000);
}

function fadeImg(el, val, fade){
    if(fade === true){
        val--;
    }else{
        val ++;
    }

    if(val > 0 && val < 100){
        el.style.opacity = val / 100;
        setTimeout(function(){fadeImg(el, val, fade);}, 10);
    }
}

var images = [],
x = 0;
          images[0] = "/wp-content/themes/westernbanc/template-images/wholesale-log-in-v2_04.png";
          images[1] = "/wp-content/themes/westernbanc/template-images/wholesale-log-in-v2_05.png";
          images[2] = "/wp-content/themes/westernbanc/template-images/wholesale-log-in-v2_06.png";
          setTimeout("changeImage()", 3000);

</script>

    And then this code for the body.

    <strong><body onload = "changeImage()"></strong>
<div id="content-container" class="content-gradient">
		<div style="margin:20px 0px 0px 70px;">
			<form name="login" action="https://wbc.lmsxpress.com/USA/Pages/SignIn.aspx" method="post">
<strong><div class="map_image" style="background-image: url('/wp-content/themes/westernbanc/template-images/wholesale-log-in-v2_05.png'); " img id="img"></strong>

					<a class="map_link" id="map_link_0" title="" href="http://www.westernbanc.com/rates/"></a>
				</div>
				<div style="position:relative;top:-250px;left:15px;width:100%;"><input type="image" src="http://westernbanc.com/wp-content/uploads/lms-xpress-log-in-wbc.png"></div>
				<div style="position:relative;top:-253px;left:20px;width:100%;"><a href="/lms-xpress-wholesale-landing/"><img src="/wp-content/themes/westernbanc/template-images/lmstour.png"></a>
				</div>
			</form>
		</div>
		</body>

    Any help would be appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Problem with Image Fade’ is closed to new replies.