SaraK
04-21-2009, 12:13 PM
Hi,
I don't know if this has issue been answered before. But I have a strange problem. I created a background image slideshow in Javascript. The slideshow works fine in IE and Firefox. But everytime I reduce the Firefox window the background image moves to the left or right. I am new to Javascript and do not have any experience creating slideshows at all. I am at my wits end and dont know what to do :confused:!! Any help is greatly appreciated!!
----------------------------------------------------------------
Here's the code for the slideshow:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="verify-v1" content="H3trDBQN5jAr3e7/Qat3R7G1L6iOOXWJpnSnNJUX8jY=" />
<title>XYZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="includes/menu.js"></script>
<script language="javascript" src="includes/opacity.js"></script>
<link rel="stylesheet" href="includes/style_mac.css" type="text/css">
<style type="text/css"><!--
a { color: #ffffff; text-decoration: none }
a:active { color: #dd0000; text-decoration: underline }
a:hover { color: #ad9400; text-decoration: underline }
body { color: 666666; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
-->
</style>
<style>
body{
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
background-repeat: no-repeat;
background-position: center 85px;
height: 100%;
padding top: 0px;
}
</style>
<script language="JavaScript">
<!--
// =======================================
// set the following variables
// =======================================
// Set speed (milliseconds)
var speed = 9000
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'images/BG1.jpg'
Pic[1] = 'images/BG2.jpg'
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runBGSlideShow(){
if (document.all){
document.body.style.filter="blendTrans(duration=crossFadeDuration)";
document.body.filters.blendTrans.Apply();
document.body.filters.blendTrans.Play();}
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)}
}
//-->
</script>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" onload="runBGSlideShow()" marginheight="0"> <div align="center">
</body>
</html>
I don't know if this has issue been answered before. But I have a strange problem. I created a background image slideshow in Javascript. The slideshow works fine in IE and Firefox. But everytime I reduce the Firefox window the background image moves to the left or right. I am new to Javascript and do not have any experience creating slideshows at all. I am at my wits end and dont know what to do :confused:!! Any help is greatly appreciated!!
----------------------------------------------------------------
Here's the code for the slideshow:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="verify-v1" content="H3trDBQN5jAr3e7/Qat3R7G1L6iOOXWJpnSnNJUX8jY=" />
<title>XYZ</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="includes/menu.js"></script>
<script language="javascript" src="includes/opacity.js"></script>
<link rel="stylesheet" href="includes/style_mac.css" type="text/css">
<style type="text/css"><!--
a { color: #ffffff; text-decoration: none }
a:active { color: #dd0000; text-decoration: underline }
a:hover { color: #ad9400; text-decoration: underline }
body { color: 666666; font-size: 11px; font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular }
-->
</style>
<style>
body{
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
background-repeat: no-repeat;
background-position: center 85px;
height: 100%;
padding top: 0px;
}
</style>
<script language="JavaScript">
<!--
// =======================================
// set the following variables
// =======================================
// Set speed (milliseconds)
var speed = 9000
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'images/BG1.jpg'
Pic[1] = 'images/BG2.jpg'
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runBGSlideShow(){
if (document.all){
document.body.style.filter="blendTrans(duration=crossFadeDuration)";
document.body.filters.blendTrans.Apply();
document.body.filters.blendTrans.Play();}
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)}
}
//-->
</script>
</head>
<body bgcolor="#000000" leftmargin="0" topmargin="0" marginwidth="0" onload="runBGSlideShow()" marginheight="0"> <div align="center">
</body>
</html>