|
JavaScript - Rotating Image Trouble
Similar TutorialsOk so i have wrote some code which can be seen he http://www.runningprofiles.com/members/include/test.php This works great but when i add the code to the page i want it on (include "include/test.php" for some reason the code does not work... the text is delayed and then lags behind the images.. this can been seen here http://www.runningprofiles.com/members/ I have no idea why its happening! Code for the code is Code: <html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26659912.html</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
function advance()
{
$("#slideshow").cycle("next");
cycleCaption();
}
var displayedIndex = 0
function cycleCaption()
{
$("#caption").children().each( function(index) {
$(this).css("font-weight", (index==displayedIndex)? "bold" : "normal" );
});
displayedIndex = (++displayedIndex==$("#caption").children().length)? 0 : displayedIndex;
}
$(function() {
$("#slideshow").cycle({ timeout: 0 });
$("img").each( function() {
$("<div />").html($(this).attr("title")).appendTo($("#caption"));
});
cycleCaption();
setInterval( "advance()", 2000 );
});
</script>
</head>
<body>
<div id="slideshow" style="float: left;">
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14882_jruqg6x4uu6frw2g872b.jpg" title="Aisling Cuffe Before Foot Locker" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14879_mzcgn05auhs24fnsygc1.jpg" title="Foot Locker Ballerness" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14880_u1npsmglw7b9t6hmoqhu.jpg" title="Foot Locker The Rocket" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14887_9bblfhhvc0x66vebgjua.jpg" title="NCAA D2 Cro" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14884_mud4ewe6uh6ihrrpux6g.jpg" title="NXN Recap and Results" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14865_y1kt8vzejkvz25k075x2.jpg" title="Give Your " />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14877_1mlnygbenofquj5h3mcz.jpg" title="NCAA D2 XC Champ" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14855_9g971maove1jyos0h9zk.jpg" title="Defending" />
<img src="http://c0205112.cdn.cloudfiles.rackspacecloud.com/14850_6u22ylfzym7sxq1zw8p8.jpg" title="NXN 121" />
</div>
<div id="caption" style="float: left;">
</div>
</body>
</html>
Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance! Web Page Code Code: <html> <head> <title>slayeroffice | code | image cross fade redux</title> <link rel="stylesheet" type="text/css" href="xfade2_o.css"> <script type="text/javascript" src="xfade2.js"></script> </head> </div> <body background="id=imageContainer"> <div id="imageContainer"> <img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg"> <img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg"> </div> </body> </html> Style Sheet 1 Code: #imageContainer {
height:309px;
}
#imageContainer img {
display:none;
position:absolute;
top:0; left:0;
}
Style Sheet 2 Code: #imageContainer {
position:relative;
margin:auto;
width:500px;
border:1px solid #000;
}
JavaScript Code: window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init() {
if(!d.getElementById || !d.createElement)return;
css = d.createElement("link");
css.setAttribute("href","xfade2.css");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
d.getElementsByTagName("head")[0].appendChild(css);
imgs = d.getElementById("imageContainer").getElementsByTagName("img");
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,1000);
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,1000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
Id like to create a rotating content for my homepage, using 4 images, all of which id like to be hyperlinked to there pages.
Hello, I use the following script for my rotating images with links and would like to know if there is a way to have the links display in a new window: Code: <script type="text/javascript"> var preload_ctrl_images=true; //And configure the image buttons' images he var previmg='left.gif'; var stopimg='stop.gif'; var playimg='play.gif'; var nextimg='right.gif'; var slides=[]; //FIRST SLIDESHOW //configure the below images and descriptions to your own. slides[0] = ["http://jpl.coj.net/pics/nav/home2/beaches-anniversary.jpg", "", "http://jaxpubliclibrary.org/progs/jb/25th-anniversary.pdf"]; slides[1] = ["http://jpl.coj.net/pics/nav/home2/young-author-visit.jpg", "", "http://jaxpubliclibrary.org/progs/mh/writers-express.pdf"]; slides[2] = ["http://jpl.coj.net/pics/nav/home2/jea-green.jpg", "", "http://jaxpubliclibrary.org/progs/jpl/home-energy-evaluation.html"]; slides[3] = ["http://jpl.coj.net/pics/nav/home2/tropic-cancer.jpg", "", "http://jaxpubliclibrary.org/progs/main/tropic-cancer.pdf"]; slides[4] = ["http://jpl.coj.net/pics/nav/home2/childrens-summer-reading.jpg", "", "http://jpl.coj.net/kids/kids-summer-reading2011.pdf"]; slides[5] = ["http://jpl.coj.net/pics/nav/home2/teen-summer-reading.jpg", "", "http://jpl.coj.net/teens/teens-summer-reading2011.pdf"]; slides[6] = ["http://jpl.coj.net/pics/nav/home2/harry-potter.jpg", "", "http://jpl.coj.net/progs/jpl/harry-potter-programs.pdf"]; slides[7] = ["http://jpl.coj.net/pics/nav/home2/internet-safety.jpg", "", "http://jaxpubliclibrary.org/Training/Internet-Safety/internet-safety.html"]; slides[8] = ["http://jpl.coj.net/pics/nav/home2/zines-art-walk.jpg", "", "http://jaxpubliclibrary.org/progs/main/zine-month.pdf"]; slides.no_descriptions=1; //use for no descriptions displayed //use for no descriptions displayed //above slide show uses only the defaults </script> <script src="http://jpl.coj.net/common/javascripts/swissarmy.js" type="text/javascript"> </script> Thanks for your help, Elbee Hi, I am working with a template I purchased that will loop a series of header images. I like to stop the image series from going back to the beginning once the series of images cycles through. For instance, if there were 3 images in the sequence; currently the script cycles through all 3 images and then starts from the beginning. I would like the script to stop on the last image (so that image stays displayed) and not start the sequence again from the beginning. I couldn't get any support for hacking this script from the developers. The php file that handles this operation attached below and i was told by the support forum I posted in that some Javascript skill would be needed, hence the reason for posting in this section of the forum. Thanks for looking hi there, i am a novice at this and have copied and pasted code to try and acheive what i need but am having trouble. I have two functions, one to show random ads but the second is to show the "ads" in a larger image in a different place when mouseover. Although this code works i now want to adapt it to show a slightly different picture. Here is the code i am using and a presume the problem lies with the showIt(this.src) as i dont want it to show the same picture. Any help would be great. Thank you here is the script i am using <head> <script type="text/javascript" src="??????????.js"></script> <script type="text/javascript"> function showIt(imgsrc) { var holder = document.getElementById('imageshow'); var newpic= new Image(); newpic.src=imgsrc; holder.src=imgsrc; holder.width =300; holder.height=300; } </script> </head> and here is the main body code <a href="http://www.???????.com/" rel="nofollow" target="_blank"><img src="???????.jpg" width="100" height="100" border="1" onmouseover="showIt(this.src)"></a>' Hello, I am trying to move an image down 20px each time the button is clicked, but I can only get it to move down once. I see what I am doing wrong, but I'm not sure how to fix it. I don't know how to store the updated position of the image in a variable. Code: <center>
<input type="button" value="Click" onClick="moveDown()"/>
</center>
<img id="Ball" src="ball.jpg" style="position:absolute; top:100; left:100;"/>
<script language="JavaScript">
var Image = document.getElementById("Ball");
var Position = 100;
function moveDown()
{
Image.style.top = Position + 20
}
</script>
Thanks, Celia I am currently working in Microsoft Frontpage designing a website for a friend. I was trying to make a JS alert come up when I mouse over an image and I have had no luck at all. This is the bit of code where The alert needs to be. I am a bit new to Javascript so I apologize if this was a stupid question. Code: <img border="0" src="../gallery%20pictures/Home.png" width="468" height="60"><br> <br> <p align="center"> <img <FORM src="../gallery%20pictures/THE%20BUTTON.png" width="388" height="372"> <br> </p> <p> </p> </body> </html> In the spirit of the season, I wanted to make it snow on my website. So I began digging. Eventually I ended up with a script that moved an image element down the page in a snowflake-like manner. The problem with it was it was dependant on an img element for every flake - simply no poor programming when using an Object Oriented programming language. So I decided I wanted to extend (in Java-speak; most of my programming background is in Java) the in-built Image object. The new object's src variable will lead to an image of the type of flake it is. (I want to be able to have more variance in images than a simple dot.) The new object will have a function that will allow it to move. A separate, unrelated function will control when each flakes move. I did some more research and read about prototyping on JavaScript Kit and here, but I still cant seem to get this to work. JS Lint says it's bug-free, but Firefox says "move()" is an invalid function. I am presuming the problem lies in my inability to fully grasp how to extend objects in JavaScript. Code: <html>
<head>
<script type="text/javascript">
Image.prototype.dFlake=dotFlake;
function dotFlake(xLocation,yLocation){
this.src = "simpleDotFlake.png";
this.x = xLocation;
this.y = yLocation;
}
dotFlake.prototype.move = fall;
function fall(){ // ^^ Belongs to dotFlake class.
this.style.position="absolute";
this.style.top = this.y;
this.style.left = this.x;
this.y= this.y + 1; // Falling is constant.
if (Math.random() > 0.5){ // Random direction, though.
this.x = this.x + 1;
} else{
this.x = this.x - 1;
}
}
function snow(flakes){ // Allows addition of different flakes later.
for (i in flakes){
i.move();
}
timer = setTimeout("snow()",1);
}
function startSnow(){
basicFlakes = new Array(new dotFlake(0,0));
snow(basicFlakes);
}
</script>
</head>
<body onload="startSnow()">
<h1>This is test text.</h1>
<img id="basicFlake" src="./simpleDotFlake.png" width="10" height="10" />
</body>
</html>
Any and all input is much appreciated. Thank you! I use a rotating image script on my website currently, but I'm taking a JavaScript class and started playing around my script to see if I can get it to display two random images at once, but never the same. Here's my script: Code: <!--
var images = new Array("<a href='index.php'><img src='images/image.gif' alt=''></a>","<a href='home.php'><img src='images/image.gif' alt=''/></a>);
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
// -->
Where does the index come from? And how do I interpret images[index] if I were to read it out loud? I thought I could add ++ to the end of images.length to get it to display at least two images, but nada. I'm still new at this and would really appreciate if someone could talk me through this? Thanks! Hi, I am trying to have an array of pictures rotating among them every 300 milliseconds. I am having a hard time to walk through the arrays to set new x and y values and rotate them to the new place. I think I have problems with my display code, where I should display the new position every time I call settimeout, exchanging the positions x and y from the array indexes position. There is my code: Code: <?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>hexagonal array</title>
<script type="text/javascript">
<!--
var pixArray = Array(6);
function shiftPix(element, count, index) {
var pi = 3.1415926535;
// left: x coordinate, top: y coordinate
y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);
x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);
element.style.left = x + "px";
element.style.top = y + "px";
}
function display() {
for (j = 0; j < 6 ; j++) {
setTimeout("shiftPix(" + x + ", " + y + ")", 300);
counter++;
shiftPix(pixArray[j], counter, j);
}
}
// -->
</script>
</head>
<body>
<h3>Hexagonal Array </h3>
<div id="John" style="position:absolute;left:300px;top:450px">
<img src="picture1.jpg" alt="John Santore" width="90" height="120" />
</div>
<div id="Seikyung" style="position:absolute;left:430px;top:375px">
<img src="picture2.jpg" alt="Seikyung Jung" width="90" height="120" />
</div>
<div id="Glenn" style="position:absolute;left:430px;top:225px">
<img src="picture3.jpg" alt="Glenn Pevlicek" width="90" height="120" />
</div>
<div id="Lee" style="position:absolute;left:300px;top:150px">
<img src="picture4.jpg" alt="Lee Mondshein" width="90" height="120" />
</div>
<div id="Abdul" style="position:absolute;left:170px;top:225px">
<img src="picture5.jpg" alt="Abdul Sattar" width="90" height="120" />
</div>
<div id="Toby" style="position:absolute;left:170px;top:375px">
<img src="picture6.jpg" alt="Toby Lorenzen" width="90" height="120" />
</div>
<script type="text/javascript">
<!--
var counter = 0;
pixArray[0] = document.getElementById("John");
pixArray[1] = document.getElementById("Seikyung");
pixArray[2] = document.getElementById("Glenn");
pixArray[3] = document.getElementById("Lee");
pixArray[4] = document.getElementById("Abdul");
pixArray[5] = document.getElementById("Toby");
display();
// -->
</script>
</body>
</html>
Hi I am using the following code to create rotating banners. This all works when I fill in links to swf files on all 5 of my fields and then set a limit in the limit field. What I want to be able to do is have the ability to only have one banner field filled in with the rest blank but this breaks the page when the is nothing in the other 4 fields or have 2 filled in etc etc Code: <script>
var maxFlashAdNo=100;
adFlashNo= Math.round(Math.random() * maxFlashAdNo);
var logolimit2="<%=requestItem.getFieldValue("iLogo2")%>";
var logolimit3="<%=requestItem.getFieldValue("iLogo3")%>";
var logolimit4="<%=requestItem.getFieldValue("iLogo4")%>";
var logolimit5="<%=requestItem.getFieldValue("iLogo5")%>";
var secflash=logolimit2;
var thirdflash=logolimit3;
var fourthflash=logolimit4;
var fifthflash=logolimit5;
//alert("2=" + secflash);
//alert("3=" + thirdflash);
//alert("4=" + fourthflash);
//alert("5=" + fifthflash);
//alert(adFlashNo);
if(fifthflash>0&&adFlashNo>fifthflash){
document.write("<%=requestItem.getFieldValue("sLogo5").replaceAll("\"","'")%>");
}else if(fourthflash>0&&adFlashNo>fourthflash){
document.write("<%=requestItem.getFieldValue("sLogo4").replaceAll("\"","'")%>");
}else if(thirdflash>3&&adFlashNo>thirdflash){
document.write("<%=requestItem.getFieldValue("sLogo3").replaceAll("\"","'")%>");
}else if(secflash>2&&adFlashNo>secflash){
document.write("<%=requestItem.getFieldValue("sLogo2").replaceAll("\"","'")%>");
}else{
document.write("<%=requestItem.getFieldValue("sLogo").replaceAll("\"","'")%>");
}
</script>
Hello, I'm looking for an option for a rotating banner on a website. I'd like to have a banner that rotates per visit. I don't mean every time a person returns to a website. I mean person A comes to the site and banner A is displayed. Then person B comes to a site and another banner is displayed. Is this possible? Hey all - trying to find a good rotating box with SEO content. Like this one, do you know what they are using or how I can accomplish this with something similar? http://www.studioscentral.com/ Thanks in advance Im trying to edit a homepage for a friend of mine. He wants the page to have a table of 12 total pictures that randomly rotate on refresh. i found this code that refreshes the pictures: Code: <script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script>
and to come up with the tables i made this code: Code: <table style="background-color: #ffffff;" border="0" cellspacing="0" cellpadding="0" width="500" bordercolor="#FFCC00">
<tbody>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i897.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i885.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i877.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i876w.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i856.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776w.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i776.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
<tr>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i465.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i335.gif" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><script type="text/javascript">
<!--
var rand=Math.round(Math.random()*1);
var img=new Array(2);
img[0]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i9.jpg" ;
img[1]="http://i1083.photobucket.com/albums/j400/ReggieAzevedoFilho/i1.jpg" ;
document.write("<img src=\"" + img[rand] + "\" />");
//-->
</script></td>
<td><br /></td>
</tr>
</tbody>
</table>
but if you see the home page he http://celulardepot.squarespace.com you can see that something is DEFINITLY wrong lol please help me! =D Hi guys, I am new to javascript and I could really do with some help rotating 2 javascript scripts. Here are examples of what they look like A: Code: <script type="text/javascript"
src="http://site.com/script.js?92924">
</script>
and B: Code: <script type="text/javascript"
src="http://site.com/script2.js?99220">
</script>
I need code to rotate these two so that only one of them is active at any one time. Ideally it would be great if I could set the percentage of time each is active. e.g use script A 80% of the time and B 20% of the time. Is this even possible? Thanks for any help at all. My program currently is just a sort of substitution cipher, but I need to write another function named RotateLeft that takes a string as input (the string called 'key') and rotates the characters in that string one position to the left, and then insert that into the Encode and Decode functions, turning the whole thing into a rotating cipher. I'm not really sure how to start? Can anyone help me? Here's what I have so far: Code: <html>
<head>
<title> Substitution Cipher</title>
<script type="text/javascript">
function Encode(message, key)
// Assumes: message is the string to be encoded, and
// key is a string of the 26 letters in arbitrary order
// Returns: the coded version of message using the substitution key
{
var alphabet, coded, i, ch, index;
alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
coded = "";
i = 0;
while (i < message.length) { // for as many letters as there are
ch = message.charAt(i); // access each letter in message
index = alphabet.indexOf(ch); // find its position in alphabet
if (index == -1) { // if it's not a capital letter,
coded = coded + ch; // then leave it as is & add
} // otherwise,
else { // find the corresponding
coded = coded + key.charAt(index); // letter in the key & add
}
i = i + 1;
}
return coded;
}
function Decode(encoded, key)
// Assumes: message is the string to be encoded, and
// key is a string of the 26 letters in arbitrary order
// Returns: the coded version of message using the substitution key
{
var alphabet, coded, i, ch, index;
alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
coded = "";
i = 0;
while (i < encoded.length) { // for as many letters as there are
ch = encoded.charAt(i); // access each letter in the encoded message
index = key.indexOf(ch); // find its position in key
if (index == -1) { // if it's not a capital letter,
coded = coded + ch; // then leave it as is & add
} // otherwise,
else { // find the corresponding
coded = coded + alphabet.charAt(index); // letter in the alphabet & add
}
i = i + 1;
}
return coded;
}
</script>
</head>
<body>
<table>
<tr><td>According to the substitution cipher, each letter: <BR><BR> </td>
<td> <tt>ABCDEFGHIJKLMNOPQRSTUVWXYZ<br /></tt>
<tt>| | | | | | | | | | | | | <br /></tt>
<tt>v v v v v v v v v v v v v </tt> </td>
</tr>
<tr><td>is encoded using the corresponding letter in the key: </td>
<td><input type="text" id="key" size="26" style="font-family:Courier,Monospace"
value="XYZABCDEFGHIJKLMNOPQRSTUVW"
onChange="document.getElementById('key').value = document.getElementById('key').value.toUpperCase();"/>
</td>
</tr>
</table>
<hr />
ENCODE MESSAGE
<table>
<tr><td><textarea id="message" rows="8" cols="30" onChange="mid = document.getElementById('message').value;
mid = mid.toUpperCase();
document.getElementById('message').value =
mid;"></textarea> </td>
<td><input type="button" value="Encode ==>"
onclick="document.getElementById('encoded').value=
Encode(document.getElementById('message').value,
document.getElementById('key').value);" />
<p><input type="button" value="Decode <=="
onclick="document.getElementById('message').value=
Decode(document.getElementById('encoded').value,
document.getElementById('key').value);" /> </p> </td>
<td><textarea id="encoded" rows="8" cols="30"></textarea> </td>
</tr>
</table>
</body>
</html>
Hello - I've got an issue that I have mostly figured out except for one final step. I managed to build a rotating banner that goes through 4 slides with a YouTube video embedded on one side and text on the other. The entire slide (a large table) rotates automatically every 2.5 seconds - and when the user watches the video the slide stops onClick on the div. The problem I am having is getting the slides to start rotating again once the movie ends. Is there any way to do this? Basically I want the slides to stop rotating (not just the video - the entire slideshow) when the YouTube video is playing, and then when the video stops the slides start moving again after a few seconds. Is this even possible? What's the best way to do this? My code is below for two of the slides and the javascript code: (The conditional ie statements are temporary for now until I find a better solution for IE6) Code: <!--[if IE 6]>
<table cellpadding="0" cellspacing="0" width="1000"><tr><td valign="top" width="500">
<![endif]-->
<div class="ievideo" onclick="badrotate=true;" style="width: 450px; height: 294px; float: left; padding: 15px;"><!-- TemplateBeginEditable name="HomeVideo1" -->
<script type="text/javascript">
AC_AX_RunContent( 'width','400','height','250','onclick','badrotate=true;','src','http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US' ); //end AC code
</script><noscript><object width="400" height="250" onclick="badrotate=true;">
<param name="movie" id="movie2" value="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/6Cka8KoMhPw?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>
</object></noscript>
<!-- TemplateEndEditable --></div>
<!--[if IE 6]>
</td><td width="500" valign="top">
<![endif]-->
<div class="ievideo2" style="width: 500px; height: 294px; float: left;"><!-- TemplateBeginEditable name="HomeVideo1Text" --><img src="../images/layout/integrated_health_systems.gif" style="margin-top: 40px;" />
<p>Nunc auctor bibendum eros. Maecenas porta accumsan mauris. Etiam enim enim, elementum sed, bibendum quis,consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, consectetuer in, blandit sed. Duis quis nunc. Sed enim. Elementum sed, bibendum quis,consectetuer et, lacinia sit amet, quam. Suspendisse wisi quam, con sectetuer.</p>
<a href="#"><img src="../images/layout/learn_more_now.gif" style="margin-left: 150px;" /></a><!-- TemplateEndEditable --></div>
<!--[if IE 6]>
</td></tr></table>
<![endif]-->
</div>
</div>
<!-- videobox 1 -->
<!--[if IE 6]>
</div>
<![endif]-->
<!--[if IE 6]>
<div>
<![endif]-->
<!-- videobox2 -->
<div class="dyncontent" style="filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; opacity: 0;">
<div class="videobox" style="width: 1000px; height: 294px;">
<div class="ievideo" onclick="badrotate=true;" style="width: 450px; height: 294px; float: left; padding: 15px;"><!-- TemplateBeginEditable name="HomeVideo2" -->
<script type="text/javascript">
AC_AX_RunContent( 'width','400','height','250','onclick','badrotate=true;','src','http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US','type','application/x-shockwave-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US' ); //end AC code
</script><noscript><object width="400" height="250" onclick="badrotate=true;">
<param name="movie" id="movie3" value="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US" />
<param name="allowFullScreen" value="true" />
<param name="allowscriptaccess" value="always" />
<embed src="http://www.youtube.com/v/9fwNwiBU2GA?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="400" height="250"></embed>
</object></noscript>
<!-- TemplateEndEditable --></div>
<div class="ievideo2" style="width: 500px; height: 294px; float: left;"><!-- TemplateBeginEditable name="HomeVideo2Text" --><img src="../images/layout/integrated_health_systems.gif" style="margin-top: 40px;" />
<p>This is the 2nd video</p>
<a href="#"><img src="../images/layout/learn_more_now.gif" style="margin-left: 150px;" /></a><!-- TemplateEndEditable --></div>
</div>
</div>
<!-- videobox 2 -->
<!--[if IE 6]>
</div>
<![endif]-->
Here is the script: Code: <script type="text/javascript">
var badrotate = false;
if (document.all || document.getElementById){ //if IE4 or NS6+
document.write('<style type="text/css">\n')
document.write('.dyncontent{position:absolute;left:0px;top:0px; width: 1000px; height: 294px;}\n')
document.write('</style>')
}
var speed=5000;
var curcontentindex=0
var messages=new Array()
function getElementByClass(classname){
var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
messages[inc++]=new zxcAnimate('opacity',alltags[i],0);
}
}
function rotatecontent(){
if(badrotate==true) return;
//get current message index (to show it):
curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0
//get previous message index (to hide it):
prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1
messages[prevcontentindex].obj.style.zIndex="0" //hide previous message
messages[prevcontentindex].animate(100,0,speed/4);
messages[curcontentindex].obj.style.zIndex="1" //show current message
messages[curcontentindex].animate(0,100,speed/4);
}
window.onload=function(){
if (document.all || document.getElementById){
getElementByClass("dyncontent");
setInterval("rotatecontent()", speed);
}
}
</script>
Thank you for any help/advice! A full description of the problem, all the code and the test is also posted on: http://happinesshabitS.com/testroto4.htm I am trying to install a rotating banner on http://HappinessHabit.com How do I position the banner so it is NOT at the upper left hand corner of the page? I have tried wrapping it in <div> tags but that hasn't worked. I can get it rotating fine on the test page, but cannot place the rotating banner where I need it - see: http://happinesshabitS.com The code I placed on the test page is: Code: <script type="text/javascript" src="jshdrotate-1.js" ></script> </head> and Code: </head> <body onLoad="preloadImgs();randomImages();"> <img src="rotoimage1/ri-image-01.jpg" name="rotator" width="800" height="135" border="0" id="rotator"></a> Can I place this right above the </body> tag? The code I placed in a separate (jshdrotate-1.js) file is on http://happinesshabits.com/javahelp.pdf and below: Code:
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
// Comma separated list of images to rotate
var imgs = new Array('rotoimage1/ri-image-01.jpg','rotoimage1/ri-image-02.jpg','rotoimage1/ri-image-03.jpg','rotoimage1/ri-image-04.jpg','rotoimage1/ri-image-05.jpg', 'rotoimage1/ri-image-06.jpg', 'rotoimage1/ri-image-07.jpg', 'rotoimage1/ri-image-08.jpg','rotoimage1/ri-image-09.jpg', 'rotoimage1/ri-image-10.jpg','rotoimage1/ri-image-11.jpg', 'rotoimage1/ri-image-12.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 6000;
var counter = 0;
function preloadImgs(){
for(var i=0;i<imgs.length;i++){
MM_preloadImages(imgs[i]);
}
}
function randomImages(){
if(counter == (imgs.length)){
counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}
Many thanks for your help ! I am really in the dark about this. I'd asked this question before but didn't get any replies. Did I post and describe what I am trying to do and the problem correctly? Many thanks! Hi, I'm trying to figure out how to put up links on a rotating homepage banner. I've tried everything I could find through Googling, etc. and nothing seems to work. Is this because the coordinates for the banner links need to be set in Flash? I tried to set them in Flash but didn't have enough experience with the program. Is there a way I can put some custom code in for the links? Any help would be much appreciated. Thanks! |
|||||||