JavaScript - Disco Background Effect To Work With Text And Images

Hi,
I have problem with javascript for image effects...

Here is the LINK...

login with theese nick and pass:
nick: google
pass: googleads

the problem:

When you log into, on the top of the page are 4 images with fade effect...
But effect is wrong. When I came first I see those images in full collors. How to change my script to show them in grey when I first came?

Thanks in advance...

Hi,
I found the following code on a web site. It displays text as if it were being typed but it only does it once. I have been trying to use various functions to make the effect continuous, i.e. make the header appear as typing text, clear the text, again make the header appear as typing text, clear the text, and so on. I wish this to continue for as long as the web page is open. But I just can't get it to work. I wonder if anyone has any suggestions? I would be very grateful for all help.
[code]
<h2 id="fly">Header</h2>

<script type="text/javascript">

//Use "$" for linebreak
//By default, set to just grab the text from element with ID="fly"
message = document.getElementById("fly").innerHTML; // $ = taking a new line
distance = 50; // pixel(s)
speed = 200; // milliseconds

var txt="",
num=0,
num4=0,
flyofle="",
flyofwi="",
flyofto="",
fly=document.getElementById("fly");


function stfly()
{ for(i=0;i != message.length;i++)
{ if(message.charAt(i) != "$")
txt += "<span style='position:relative;visibility:hidden;' id='n"+i+"'>"+message.charAt(i)+"<\/span>";
else txt += "<br>";
}
fly.innerHTML = txt;
txt = "";
flyofle = fly.offsetLeft;
flyofwi = fly.offsetWidth;
flyofto = fly.offsetTop;
fly2b();
}

function fly2b()
{ if(num4 != message.length)
{ if(message.charAt(num4) != "$")
{ var then = document.getElementById("n" + num4);
then.style.left = flyofle - then.offsetLeft + flyofwi / 2;
then.style.top = flyofto - then.offsetTop + distance;
fly3(then.id, parseInt(then.style.left), parseInt(then.style.left) / 5, parseInt(then.style.top), parseInt(then.style.top) / 5);
}
num4++;
setTimeout("fly2b()", speed);
}
}

function fly3(target,lef2,num2,top2,num3)
{ if((Math.floor(top2) != 0 && Math.floor(top2) != -1) || (Math.floor(lef2) != 0 && Math.floor(lef2) != -1))
{ if(lef2 >= 0) lef2 -= num2;
else lef2 += num2 * -1;
if(Math.floor(lef2) != -1)
{ document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2);
}
else
{ document.getElementById(target).style.visibility = "visible";
document.getElementById(target).style.left = Math.floor(lef2 + 1);
}
if(lef2 >= 0) top2 -= num3
else top2 += num3 * -1;
if(Math.floor(top2) != -1)
document.getElementById(target).style.top = Math.floor(top2);
else
document.getElementById(target).style.top = Math.floor(top2 + 1);
setTimeout("fly3('"+target+"',"+lef2+","+num2+","+top2+","+num3+")",50)
}
}
stfly()

</script>
[code]

I have made myself an HTML Menu which is located on top of my current Flash object.

I have a question whether it really is not possible to get the same effect as 'text' has on the original "Flash Menu"

EX: www.moebelarkitekten.dk

and get the same effect over at my new HTML menu (Coded with Jquery)
EX: http://www.richyjassal.co.uk/moebelar/

Right now it is almost the same effect, but only:
OnMouseOver align text to Right
OnMouseOut text to align left



A guide, or other?

Hi, any help with this would be very much appreciated.

Apologies for cross-posting. I think I ut this in the wrong place to begin with.

I have a script containing functions to change an image from clicking a button or changing the selection in a combobox.
The buttons either request that the next image in the array is called or the previous, depending on the button. The combo box changes to the chosen
image.

The script works fine for me in firefox and safari but I can't get it to work in ie and aftermany hours I can't see any reason why.

As far as I can work out the problem with the script is in the changeImage
function while trying to set the new image.
Code:

 
document.images['priceImg'] = followingImg;
document.images['priceImg'].src = followingSrc;

Thanks in advance.


The following is the script:

Code:

var followingImg;
var followingSrc;
var presentImg;
var presentSrc;
var count = 0;

// Create an array of price list page images and locations
var numImages = 8;
var pimages=new Array();
pimages[0]=new Image();
pimages[0].src="../images/priceList/price_walls.jpg";
pimages[1]=new Image();
pimages[1].src="../images/priceList/price_nestle.jpg";
pimages[2]=new Image();
pimages[2].src="../images/priceList/price_franco.jpg";
pimages[3]=new Image();
pimages[3].src="../images/priceList/price_ben1.jpg";
pimages[4]=new Image();
pimages[4].src="../images/priceList/price_ben2.jpg";
pimages[5]=new Image();
pimages[5].src="../images/priceList/price_ron.jpg";
pimages[6]=new Image();
pimages[6].src="../images/priceList/price_cartridge_9654.jpg";
pimages[7]=new Image();
pimages[7].src="../images/priceList/price_sun1.jpg";
pimages[8]=new Image();
pimages[8].src="../images/priceList/price_sun2.jpg";


// Retrieves the current image from the image element
function getCurImage() {

	if (document.images) {

		presentImg = document.images['priceImg'];
		presentSrc = document.images['priceImg'].src;

		var curId = 0;

		// Loops through pimages array to find which image is currently being displayed
		for (i=0;i<pimages.length;i++) {
			if (pimages[i].src == presentSrc) {
				curId = i;
			}
		}

		return curId;

	}

}

//**************************//
// I think this is where it has trouble //
//**************************//

// Sets the new image
function changeImg() {

	document.images['priceImg'] = followingImg;
	document.images['priceImg'].src = followingSrc;

}

// Called by 'next' button.
// Calls getCurrentImg then chooses the next image then calls changeImg.
function slideItForward() {

	var curID = getCurImage();

	if (count == 0) {
		followingImg = pimages[0];
		followingSrc = pimages[0].src;
		count++;
	} else {
		// Add one to current image id for next image
		var nextId = (curID + 1);
		if (nextId <= numImages) {
			followingImg = pimages[nextId];
			followingSrc = pimages[nextId].src;
		// If at end of images stay on same page
		} else {
			followingImg = document.images['priceImg'];
			followingSrc = document.images['priceImg'].src;
		}
	}
	// display new image
	changeImg();
	setText(nextId);
}

// Called by 'previous' button.
// Calls getCurrentImg then chooses the next image then calls changeImg.
function slideItBackward() {
	var curID = getCurImage();

	// take one from current image id for next image
	var nextId = (curID - 1);
	if (nextId >= 0) {
		followingImg = pimages[nextId];
		followingSrc = pimages[nextId].src;
	// If at start of images stay on same page
	} else {
		followingImg = document.images['priceImg'];
		followingSrc = document.images['priceImg'].src;
	}
	// display new image
	changeImg();
	setText(nextId);
}

// Called by optionbox "newPage".
// Takes users choice and displays it.
function choosePage(page) {

	if (page == 1) {
		// Retrieve combobox option and its value
		var index = document.getElementById('newPageOne').selectedIndex;
		var newId = document.getElementById('newPageOne').options[index].value;
	} else {
		// Retrieve combobox option and its value
		var index = document.getElementById('newPageTwo').selectedIndex;
		var newId = document.getElementById('newPageTwo').options[index].value;
	}

	// Convert string to int
	newId = parseInt(newId);

	// If new id is default setting do nothing
	if (newId == 0) {
		return;
	// Else choose the image from the pimages array and call changeImg
	} else {

		// Changes value to accomodate for value vs array position
		newId = (newId - 1);

		followingImg = pimages[newId];
		followingSrc = pimages[newId].src;

		// display new image
		changeImg();
		document.getElementById("newPageOne").value = (newId+1);
		document.getElementById("newPageTwo").value = (newId+1);
	}

}

// Changes the text in the combobox
function setText(id) {

	id = id + 1;
	document.getElementById("newPageOne").value = id;
	document.getElementById("newPageTwo").value = id;
	//document.getElementsByName('newPage').value = id;
}

The following is the relevent section of the html:

Code:

<input style="margin-bottom:10px; margin-top: 20px" type="button" name="PreBut" value="Previous" onclick="slideItBackward();" />
			&nbsp;&nbsp;&nbsp;<input style="margin-bottom:10px" type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
			&nbsp;&nbsp;&nbsp;<select style="margin-bottom:10px" name="newPage" id="newPageOne" onchange="choosePage(page = 1);">

			<option value="1"> Walls </option>
			<option value="2"> Nestle, Treats and Cadburies Impulse </option>
			<option value="3"> Franco, Mars and Ijsboerke Impulse </option>
			<option value="4"> Bennets Scooping </option>
			<option value="5"> Bennets Scooping Cont.. </option>
			<option value="6"> Individual tubs and Ice cream cartridges </option>
			<option value="7"> Ronaldo Ice creams and Sorbets </option>
			<option value="8"> Sundries, Cones, etc </option>
			<option value="9"> Sundries, Cones, etc Cont.. </option>
			</select>

			<center>
			<div id="price-display">
				<img src="../images/priceList/price_img1.jpg" id="priceImg" name="priceImg" alt="Robertos Ice cream wholesale pricelist" ></img>
			</div>
			</center>

			<input style="margin-top: 10px" type="button" name="preBut" value="Previous" onclick="slideItBackward();" />
			&nbsp;&nbsp;&nbsp;<input type="button" name="nxtBut" value="Next" onclick="slideItForward();" />
			&nbsp;&nbsp;&nbsp;<select name="newPage" id="newPageTwo" onchange="choosePage(page = 2);">

			<option value="1"> Walls </option>
			<option value="2"> Nestle, Treats, Cadburies Impulse </option>
			<option value="3"> Franco, Mars Ijsboerke Impulse </option>
			<option value="4"> Bennets Scooping </option>
			<option value="5"> Bennets Scooping Cont.. </option>
			<option value="6"> Individual tubs and Ice cream cartridges </option>
			<option value="7"> Ronaldo Ice creams and Sorbets </option>
			<option value="8"> Sundries, Cones, etc </option>
			<option value="9"> Sundries, Cones, etc Cont.. </option>
			</select>

Hi All.

I am new to all this and I am posting a problem up here that I think is quite rare or has not been looked into for a long time now.

I am basically looking to create a background for my website and when you refresh the page the image changes to another picture for the background. I have asked one of my good friends to have a look at it and he gave me some code to work with and so I have changed bits here and there and it worked in firefox and safari but will not work in IE. When I asked him he had no clue what to do. So here I am now! I am hoping it is simple but I also know it wont be to an extent! Any help would be much appreciated here.

I have attached the code here for you and also the html file.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
<style type="text/css">
<!--
#myFlash {
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	left:0;
	right:0;
	z-index:20;
}
-->
</style>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Experts Connect</title>
<meta name="keywords" content="Experts connect Preston, Experts connect Lancashire, Medical reports, Preston medical and legal agency, Lancashire medical and legal agency, specialist providers of independent medical evidence, diagnostic and rehabilitation services to the personal injury market, Medico Legal, personal injury claims, refferers." />
<meta name="description" content="Experts Connect are an established legal and medical agency providing reports for persobal injury claims. We work to get the best possible examination we can to ensure your claim goes through with no fuss. We are based nationally and work all over the United Kingdom." />
<meta name="robots" content="INDEX,FOLLOW" />
<meta name="revisit-after" content="10 days" />
<link rel="stylesheet" type="text/css" href="/common/basic.css" />
		<script type="text/javascript" src="crossfade.js"></script>
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			swfobject.registerObject("myFlashContent", "9.0.0", "expressInstall.swf");
		</script>
<style type="text/css">
body { width:auto; height:auto; background-color:#CCCCCC;}
#bgimage {
	filter:alpha(opacity=40);
	-moz-opacity:0.40;
	-khtml-opacity:0.40;
	opacity:0.40;
	width:100%;
	height:100%;
	position:absolute;
	margin:0;
	padding:0;
	left:0;
	right:0;
}
</style>
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<SCRIPT/>


<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'back4.jpg'
theImages[1] = 'back2.jpg'
theImages[2] = 'back5.jpg'
theImages[3] = 'back6.jpg'
theImages[4] = 'back8.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img id="bgimage" src="'+theImages[whichImage]+'">');


//  End -->
</script>
</head>

<div id="myFlash">	
			<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="myFlashContent" name="expertsconnect" align="middle">
				<param name="movie" value="experts-connectwebsite.swf" />
				<param name="quality" value="high" />
				<param name="scale" value="exactfit" />
				<param name="wmode" value="transparent" />
				<param name="allowfullscreen" value="true" />
				<param name="allowscriptaccess" value="always" />
				<!--[if !IE]>-->
				<object type="application/x-shockwave-flash" data="experts-connectwebsite.swf" width="100%" height="100%" align="middle">
					<param name="quality" value="high" />
					<param name="scale" value="exactfit" />
					<param name="wmode" value="transparent" />
					<param name="allowfullscreen" value="true" />
					<param name="allowscriptaccess" value="always" />
				<!--<![endif]-->
					<a href="http://www.adobe.com/go/getflashplayer">
						<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
					</a>
				<!--[if !IE]>-->
				</object>
				<!--<![endif]-->
			</object>
</div>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
showImage();
//  End -->
</script>

<!-- Script Size:  1.49 KB -->

</body>
</html>

There is also a flash file embedded into this document!

Any help would be great with this.

Thank you, Mark