|
JavaScript - Fade In Navigation Links One After The Other
Hi, I'm building an html web page (no flash) and was wondering if it was possible to fade (or slide up from the horizontal rule) my navigation links into the page, one after the other, for the home page only, and ideally only for the first session visit. Aside from looking cool, I think it will draw the attention of the visitor and let them know where their main links are. I've experimented with animated .gif's, but not only was the implementation buggy, it didn't give me the flexibility to quickly edit the links.
I'm thinking some sort of JavaScript (or css?) can accomplish this, but I don't know the first thing about writing JavaScript and I couldn't find any script on the web. Does anyone know if such a script does exist, or if there's a better way I should go about doing this? Thanks! Here's the structure for my main index: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <link rel="stylesheet" type="text/css" href="templates/styles.css"> <title>Test</title> </head> <body class="main"> <center> <table border="0" cellspacing="0" cellpadding="0" width="800" class="header"> <tr> <td align="left" valign="bottom" width="455" height="45"><a href="index.html" class="nav"><img src="images/logo.png" alt="Logo"></a></td> <td align="right" valign="bottom" width="146" height="45"> <a href="link1/index.html" class="nav">Link1</a> </td> <td align="right" valign="bottom" width="103" height="45"> <a href="link2/index.html" class="nav">Link2</a> </td> <td align="right" valign="bottom" width="96" height="45"> <a href="link3/index.html" class="nav">Link3</a> </td> </tr> <tr> <td align="center" valign="top" width="800" height="10" colspan="4"><hr noshade></td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="800"> <tr> <td width="800" height="10"></td> </tr> <tr> <td align="center" valign="top" width="800" height="440"> CONTENT WILL GO HERE </td> </tr> </table> <table border="0" cellspacing="0" cellpadding="0" width="800"> <tr> <td align="center" valign="bottom" height="45" class="footer"> <hr noshade> </td> </tr> </table> </center> </body> </html> I found the effect I would like to achieve here, but the code doesn't allow me to make turn the text into links, and I would like to leave the links where they are in the html and maybe the JavaScript could call each link by id? http://www.codingforums.com/showthre...072#post923072 Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
width:600px;
margin:auto;
}
#container p{
height:100%;
}
#p4 {
font-family:'times new roman',serif;
font-size:18px;
color:#006;
text-align:justify;
}
</style>
<script type="text/javascript">
var lines=new Array();
lines[0]='text1';
lines[1]='text2';
lines[2]='text3';
lines[3]='text4';
lines[4]=
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.'+
'Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus '+
'nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus. '+
'Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus, '+
'nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,'+
'ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate '+
'ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta '+
'bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.';
var c=0;
var value=0;
var speed=20;
function addLines() {
if(c>=lines.length) {
return;
}
par=document.createElement('p');
par.setAttribute('id','p'+c);
par.appendChild(document.createTextNode(lines[c]));
document.getElementById('container').appendChild(par);
setOpacity();
}
function setOpacity() {
obj=document.getElementById('p'+c);
if(value>100) {
value=0;
c++;
return addLines();
}
if(obj.filters) {
obj.style.filter='alpha(opacity='+value+')';
}
else {
obj.style.opacity=value/100;
}
value++;
setTimeout('setOpacity()',speed);
}
window.onload=function() {
addLines();
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Similar TutorialsHi. I'm Matthew, the creator of the Easing Slider Wordpress plugin. Currently I'm working on the next update of the slider which is to allow the user to assign a link to each image. This is working fine with the slide animations but is creating problems with the fade animation (note I'm using jQuery). Here are the two issues: 1) Using .animate({opacity:0}) & .animate({opacity:1}) the slider is only linking to the link assigned to the last image in the slider. The links are supposed to link: 1. google.com, 2. hotmail.com & 3. fadebook.com. However the slider is only linking to the last link (facebook.com). 2) Using .fadeIn & .fadeOut everything appears to work correctly and the links correspond to the images however when using the pagination before the image has finished fading can cause the images to disappear or appear not fully faded. You can see the overall code he http://pastebin.com/9JwaM9tg (check lines 72, 215 & 216) Example (using .animate): http://www.matthewruddy.com/demo/ I've spent ages trying to figure this out but I really am struggling and cannot find a solution. Many people use the fade effect and I don't particularly want to get rid of it but I will have to if I can't find a solution. I would appreciate if anyone could help me out. Thanks in advance. Matthew. This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? Hi, I'm working on a webpage which has a lot of information packed into it... I wanted to create a simple navigation inside the website, for example; ................................. This section deals with; Q1 (click to go to this section) Q2 (click to go to this section) ...... Heading: Q1 bla bla bla (click here to go back to top of the page) ..... Heading: Q2 bla bla bla (click here to go back to top of the page) (click here to go back to the top of the page) .......................... I have seen some javascript codes which are just unbelievable complicated and advanced, how can I do this with the simplest of codes? I appreciate your time, Thanks! Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded? 2.variables? any help would be appreciated! Thanks, Cookies, whatever this forum gives out, you may receive! Hello all! I'm having a bit of an issue here with my lastest project. What I'm trying to do is have a menu that a user would click one of two links which would change the targeted iFrame, then repeat for two more options, and again for two more. It is essentially a filtering system for videos (the best way for you to see what I mean is to check out http://grph.cmwdesign.ca). My actual issue here is the changing of the iframe href, and on top of that, I seem to not to be able to properly get my functions to run all the time. Here is my Javascript: Code:
var categoryLink=new Array();
var counter;
var link = "";
categoryLink[0] = "";
categoryLink[1] = "";
categoryLink[2] = "";
counter = "0";
$(document).ready(function() {
$(".atonal").live('click', function() { {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "atonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".tonal").live('click', function() {
alert("sometext");
if (categoryLink[0]=="") {
categoryLink[0] = "tonal";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[0] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".being").live('click', function() {
alert("sometext");
categoryLink[1] = "being"; $("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
if (categoryLink[1]=="") {
categoryLink[1] = "being";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".doing").live('click', function() {
alert("sometext");
if (categoryLink[1]=="") {
categoryLink[1] = "doing";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[1] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".abstract").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "abstract";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
$(document).ready(function() {
$(".documentary").live('click', function() {
alert("sometext");
if (categoryLink[2]=="") {
categoryLink[2] = "documentary";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
else {
categoryLink[2] = "";
$("a.frame").attr('href', categoryLink[0] + categoryLink[1] + categoryLink[2]);
}
});
});
and the HTML in question: Code: <table> <tr> <td height="35" width="210" valign="top">choose your sound</td> <td width="165" valign="top"><a href="#" id="atonal">atonal sounds</a></td> <td width="165" valign="top"><a href="#" id="tonal">tonal sounds</a></td> </tr> <tr> <td height="35" width="210" valign="top">choose your text</td> <td width="165" valign="top"><a href="#" id="being">being words</a></td> <td width="165" valign="top"><a href="#" id="doing">doing words</td> </tr> <tr> <td height="35" width="210" valign="top">choose your image</td> <td width="165" valign="top"><a href="#" id="abstract">abstract images</a></td> <td width="165" valign="top"><a href="#" id="documentary">documentary images</a></td> </tr> </table> I'm no Javascript wiz, so I'm sure I'm probably not going about this entirely the correct way. Any suggestions would be great! is it possible if you have a div with child divs inside , so i fade out the parent div but the opacity of the child divs stays at 100% ? thank you Hi I have this code: <script type="text/javascript"> function Ajax() { var $http, $self = arguments.callee; if (window.XMLHttpRequest) { $http = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { $http = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { $http = new ActiveXObject('Microsoft.XMLHTTP'); } } if ($http) { $http.onreadystatechange = function() { if (/4|^complete$/.test($http.readyState)) { document.getElementById('ReloadThis').innerHTML = $http.responseText; setTimeout(function(){$self();}, 20000); } }; $http.open('GET', '../inc/record_count.php' + '?' + new Date().getTime(), true); $http.send(null); } } </script> <script type="text/javascript"> setTimeout(function() {Ajax();}, 1000); </script> Can you help me make this make a fade in effect?? Hi everyone I'm new to javascript and I'm trying to fade in and out a div using an array. It worked when I had two arrays and two variables. One array that decends through the opacity values and another array that acends the opacity values. here is the the external JS, HTML and external CSS. It works once but I want it to work every time we click on the link. At the bottom of the post I've posted the JS again but modified in a way I thought would work by using one array, going fowards through the array with i++ and then going backwards through the array using i--. Anyway, it doesn't work and I can't find a simple solution. Hope you all understand what I'm trying to say. **********************THE JAVASCRIPT*********************** var fadesFoward = ["0.95","0.90","0.85","0.80","0.75", "0.70","0.65","0.60","0.55","0.50", "0.45","0.40","0.35","0.30","0.25", "0.20","0.15","0.10","0.05","0.00"]; var fadesBackward = ["0.05","0.10","0.15","0.20","0.25", "0.30","0.35","0.40","0.45","0.50", "0.55","0.60","0.65","0.70","0.75", "0.80","0.85","0.90","0.95","1.00"]; var i = 0; var j = 0; function fadeDiv() { if(i == fadesFoward.length); else (i++); document.getElementById("redbox").style.opacity = fadesFoward[i]; } function hide() { setInterval("fadeDiv()", 30); } function showDiv() { if(j == fadesBackward.length); else (j++); document.getElementById("redbox").style.opacity = fadesBackward[j]; } function show() { setInterval("showDiv()", 30); } function delayShow() { setTimeout("show()", 1000); } ********************THE HTML************************ <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN""http//www.w3c.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="test.css"/> <script language="javascript" type="text/javascript" src="test.js"> </script> </head> <body> <div id="redbox"></div> <a href="#" onclick="hide(); delayShow(); return false;" id="go_red">RED</a> </body </html> *********************THE CSS********************** div#redbox{z-index:2; width:200px; height:200px; background-color:red; opacity:1.0; position:absolute; left:0px; top:0px;} a#go_red{position:absolute; left:250px; top:100px;} *********************THE JAVASCRIPT AGAIN****************** var fades = ["0.95","0.90","0.85","0.80","0.75", "0.70","0.65","0.60","0.55","0.50", "0.45","0.40","0.35","0.30","0.25", "0.20","0.15","0.10","0.05","0.00"]; var i = 0; function fadeDiv() { if(i == fades.length); else (i++); document.getElementById("redbox").style.opacity = fades[i]; } function hide() { setInterval("fadeDiv()", 30); } function showDiv() { if(i == fades.length); else (i--); document.getElementById("redbox").style.opacity = fades[i]; } function show() { setInterval("showDiv()", 30); } function delayShow() { setTimeout("show()", 1000); } What would be really easy but which I can't find out how to do or even know if it is possible, is to have the variable "i" reset to 0 everytime the function is called. maybe it would work then? I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help. Carson www.carsonkahn.com Hello everyone. I'm working on a fade in and fade out script. I got to the part where I am making the fade in part of the script but I got this error that says: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Fri, 29 Jan 2010 07:08:20 UTC Message: Object expected Line: 1 Char: 1 Code: 0 But I'm not to sure what is making my script error out. I do believe it is the timeout part in my script but I'm not totally sure. If that is it how do I go about fixing it? Code: function fade(obj, duration, toggle) {
this.steps = 100;
this.elem = document.getElementById(obj);
function setOpacity(level) {
(document.getElementById && !document.all) ? this.elem.style.opacity = level :
this.elem.style.filter="alpha(opacity="+ level * 100 +")";
}
function fadeIn() {
for(var i = 0; i<= 1; i+=(1/this.steps)) {
setTimeout("setOpacity("+ i +")", i * duration);
}
}
fadeIn();
}
window.onload = function() {
fade('text', 20000, 1);
}
Thanks for the help. Hi all, I have created the following page http://kylehouston.com/new/index_new.html I have used JQuery to add animated load icon followed by my images fading in, the load works fine and the images appear but the problem is the fade in wont work. I have tried a few methods to try and get them to fade including adding spans round my images but the only thing that seems to work for me is setting all divs to fade in which I dont want to happen. Anyone got any advice? Thanks in advance! Kyle A script like this is invoked for each html page presenting a different background picture. How can I extend/modify the script to make the pic fade in when page is loaded? window.onload = function() {var bodyTag = document.getElementsByTagName("body")[0]; bodyTag.style.backgroundImage ="url(bilder/bryggsol.jpg)"; bodyTag.style.backgroundAttachment = "fixed"; bodyTag.style.backgroundPosition = "100% 100%"; bodyTag.style.backgroundRepeat = "no-repeat";} Grateful for clues I've managed to get a slideshow to randomly display pictures, but each time I try to add a fade into it, it never seems to work. Can anyone give me some advice? <script language="javascript"> var delay=2500 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="image1.jpg" randomimages[1]="image2.jpg" randomimages[2]="image3.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> <p align="center">This free script provided by<br /> <a href="http://javascriptkit.com">JavaScript Kit</a></p> I'm trying to recreate the fade hover effect shown on the menu at the top here http://www.dragoninteractive.com/. I have found some javascript which looks like it will do the trick. But being a graphic designer and not a web developer or anything it just doesn't work. lol Currently I have a CSS opacity filter on, but please discard that as it should just show what i am trying to achieve. This is my very first attempt at Javascript here is the html: Code: <link href="style.css" rel="stylesheet" type="text/css" /> <script src="javascript.js" type="text/javascript"></script> </head> <body> <div style="margin:20px;" class="modules"> <div class="single_module"><a class="toggleopacity" href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> <div class="single_module"> <a class="toggleopacity"href="#"><img border="0" src="http://www.cl.cam.ac.uk/~as372/Wales/thumbs/IMG_0567.JPG.jpg" /></a></div> </div> </body> And the CSS: Code: .modules {
margin:0px -20px 20px;
background-color:#9999CC;
min-height:100%;
width:100%;
}
.single_module {
border:solid 1px #000000;
background-color:#000000;
height:160px;
padding:0;
margin:-1px 0px 0px -1px;
width:240px;
float:left;
}
.toggleopacity img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity:0.5;
}
.toggleopacity:hover img {
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity:1;
}
And the Javascript: Code: $("#single_module").css({ opacity: "0.0", display: "block" });
$("#single_module").hover(function(){$(this).fadeTo(100, 0.5);}, function(){$(this).fadeTo(300, 0.0);} );
$("#single_module").hide();
});
I have this code... I want to be able to make each image fade from one to the other. Like this... http://www.dynamicdrive.com/dynamici...nslideshow.htm Is there a way to do that with this code? Code:
<script type="text/javascript">
// Simple Javascript Time based Image Swap
var Pics = new Array();
var counter = 0;
// Use this section to change the image paths
function LoadImages()
{
Pics[1] = new Image();
Pics[1].src = "images/pic1.jpg";
Pics[2] = new Image();
Pics[2].src = "images/pic2.jpg";
Pics[3] = new Image();
Pics[3].src = "images/pic3.jpg";
Pics[4] = new Image();
Pics[4].src = "images/pic4.jpg";
Pics[5] = new Image();
Pics[5].src = "images/pic5.jpg";
Pics[6] = new Image();
Pics[6].src = "images/pic6.jpg";
Pics[7] = new Image();
Pics[7].src = "images/pic7.jpg";
Pics[8] = new Image();
Pics[8].src = "images/pic8.jpg";
Pics[9] = new Image();
Pics[9].src = "images/pic9.jpg";
Pics[10] = new Image();
Pics[10].src = "images/pic10.jpg";
Pics[11] = new Image();
Pics[11].src = "images/pic11.jpg";
Pics[12] = new Image();
Pics[12].src = "images/pic12.jpg";
Pics[13] = new Image();
Pics[13].src = "images/pic13.jpg";
Pics[14] = new Image();
Pics[14].src = "images/pic14.jpg";
Pics[15] = new Image();
Pics[15].src = "images/pic15.jpg";
Pics[16] = new Image();
Pics[16].src = "images/pic16.jpg";
Pics[17] = new Image();
Pics[17].src = "images/pic17.jpg";
document.pic1.src = Pics[1].src;
}
//Time in miliseconds
function timedImage()
{
counter ++
if (counter > 17) {
counter = 1;
}
document.pic1.src = Pics[counter].src;
t=setTimeout("timedImage()",5000);
}
</script>
I was using the below code to fade text links in and out on hover. But the problem I'm having is that if you hover over the text a few times quickly the animation will play over and over. Can someone help me add a 'callback'(?) so while the animation is still playing it won't fade in/out again until its finished? Or point me in the direction of a better way of doing this effect. Thanks for reading and I looking forward to your help and responses! Heres the code: Code: $(document).ready(function(){
$(".thumbs img").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".thumbs img").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});
Hi, I have a problem with a fade script using jquery, in firefox etc.. all is ok. But IE the fade does not fade it just comes in & out. If any one would be kind enough to have a quick look I would appreciate it. You can see the js in the main page, not an external file. The url is www.thecityspa.co.uk Hi, Please see URL http://backstageweb.net/Salon/indexslides2.htm. (code is below, original source: http://javascript.internet.com/misce...lide-show.html The slide show cross-fade effect in this script works in IE, but not in FF. I know there are better scripts I could use, but I like this one because of its simplicity (doesn't require any accompanying CSS, etc). But I need it to work in all browsers. Is there a simple fix here? Thanks, John Code: <head>
<script type="text/JavaScript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'images/01.jpg'
Pic[1] = 'images/02.jpg'
Pic[2] = 'images/03.jpg'
Pic[3] = 'images/04.jpg'
Pic[4] = 'images/05.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 runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
</head>
Code: <body onLoad="runSlideShow()"> Code: <div id="slides">
<img src="images/01.jpg" name='SlideShow' width="380" height="541">
</div>
hello, I am trying to get the page to fade in when it loads.. instead of using the microsoft enterpage metahead value.. here is the code I am trying, but no luck <html> <head> <SCRIPT LANGUAGE="JavaScript"> function fadeInPage() { if (document.getElementById("fadeDiv").filters.alpha.opacity < 100){ document.getElementById("fadeDiv").filters.alpha.opacity += 10; eval('setTimeout("fadeInPage()",100)'); } else{ document.getElementById('fadeDiv').style.visibility = "visable" } } </script> </head> <body onLoad="fadeinpage()"> <DIV ID="fadeDiv" style="visibility:hidden"> your page code goes here </DIV> </body> </html> |
|||||||