PDA

View Full Version : Cool Header help



GhettoT
11-25-2006, 08:11 PM
Is it possible to say, on rollover change image to ___, on browser load change image to ____, or on browser load show image ____ wait 3seconds change image to ___? You see, I am the webmaster of a site, and I am only able to use open source or donated products and i want to do a flash intro type header but without flash, just HTML and javascript. Anyone know how to accomplish this? Or know of a free flash type software?

-GT

Twey
11-25-2006, 09:20 PM
<script type="text/javascript">
function preloadImages() {
for(var i = 0; i < arguments.length; ++i)
(preloadImages.store[preloadImages.store.length] = new Image()).src = arguments[i];
}
preloadImages.store = [];

preloadImages("/path/to/loaded_image.png", "/path/to/mouseover_image.png", "/path/to/timed_image.png");

window.onload = function() {
var e = document.images['header_image'];

e.src = preloadImages.store[0].src;
e.onmouseover = function() {
this.src = preloadImages.store[1].src;
};
e.onmouseout = function() {
this.src = preloadImages.store[0].src;
};
window.setTimeout(
function() {
document.images['header_image'].src = preloadImages.store[2].src;
},
3000
);
e = null;
};
</script>
</head>
<body>
<h1>
<img src="/path/to/initial_image.png" id="header_image" alt="Header Text">
</h1>

GhettoT
11-25-2006, 10:48 PM
thanks. that is for the load image to different image right?

-GT

Twey
11-25-2006, 10:54 PM
It does all three. Just replace the URLs to the images and off you go.

GhettoT
11-26-2006, 12:25 AM
Awesome thanks!

GhettoT
11-26-2006, 12:53 AM
Sorry to bug/double post, but how would you add fade out/fade in effects to this setup? Would it be something like this?


<SCRIPT LANGUAGE="JavaScript">

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var maximages = 6; // how many fade images do you have?
var fadespeed = 125; // fade frame time in milliseconds; 125 = 125 ms

var fadeintimer;
var fadeouttimer;
var fadeincount = 0;
var fadeoutcount = maximages-1;
var fadearray = new Array(maximages); // enter all the fade images here
// the first item should be 0, then numbered through 1 less than your maximages

fadearray[0] = "http://javascript.internet.com/img/fading-rollover/fade00.jpg";
fadearray[1] = "http://javascript.internet.com/img/fading-rollover/fade01.jpg";
fadearray[2] = "http://javascript.internet.com/img/fading-rollover/fade02.jpg";
fadearray[3] = "http://javascript.internet.com/img/fading-rollover/fade03.jpg";
fadearray[4] = "http://javascript.internet.com/img/fading-rollover/fade04.jpg";
fadearray[5] = "http://javascript.internet.com/img/fading-rollover/fade05.jpg";

for (var i = 0; i < maximages; i++) {
eval('pic' + i + ' = new Image();');
eval('pic' + i + '.src = fadearray[i];'); // preloads fade images
}
function fade_in() {
clearTimeout(fadeouttimer);
document.images['fade-pic'].src = fadearray[fadeincount];
if (fadeincount != maximages-1) {
fadeincount++;
fadeintimer = setTimeout('fade_in()', fadespeed);
}
else {
clearTimeout(fadeintimer);
fadeincount = 0;
}
}
function fade_out() {
clearTimeout(fadeintimer);
document.images['fade-pic'].src = fadearray[fadeoutcount];
if (fadeoutcount != 0) {
fadeoutcount--;
fadeouttimer = setTimeout('fade_out()', fadespeed);
}
else {
clearTimeout(fadeouttimer);
fadeoutcount = maximages-1;
}
}
// End -->
</script>
</HEAD>

<BODY>

<center>
<a href="http://javascriptsource.com" onmouseover="fade_in()" onmouseout="fade_out()">
<img src="http://javascript.internet.com/img/fading-rollover/icontop.gif" border=0><br>
<img name="fade-pic" height=56 width=300 border=0 src="http://javascript.internet.com/img/fading-rollover/fade00.jpg"><br>
<img src="http://javascript.internet.com/img/fading-rollover/iconbtm.gif" border=0><br></a>
</center>


I am sort of new to javascript, so please excuse my lack of knowledge...Also, i realize with the setup i just posted, it is more of a "Splash" type intro, but is it possible to have just 2 images? One just the image the other the image with the whatever added?

-GT

Twey
11-26-2006, 01:28 AM
It's not going to be easy. Fading elements in and out is fairly simple, but fading one into another means positioning one exactly over the top of the other. It would be easier to fade it out, change the src, then fade it back. Is this sufficient.

GhettoT
11-26-2006, 02:19 AM
I guess. I'm not too sure what you mean though... I just meant for the onload to after 3 seconds header part. Because like i said before, it is supposed to be similar to that of a flash intro, then it stays on that second image until the mouseover where it returns to the original picture.

-GT

Twey
11-26-2006, 01:06 PM
<script type="text/javascript" src="http://www.twey.co.uk/includes/FadableObject.js"></script>
<script type="text/javascript">
function preloadImages() {
for(var i = 0; i < arguments.length; ++i)
(preloadImages.store[preloadImages.store.length] = new Image()).src = arguments[i];
}
preloadImages.store = [];

preloadImages("/path/to/loaded_image.png", "/path/to/mouseover_image.png", "/path/to/timed_image.png");

window.onload = function() {
var e = document.images['header_image'];

new FadableObject(e, 1, 10, 0, 99, false, false);

e.src = preloadImages.store[0].src;
e.onmouseover = function() {
this.fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[1].src;
this.fadeIn();
});
};
e.onmouseout = function() {
function() {
document.images['header_image'].fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[0].src;
this.fadeIn();
});
};
window.setTimeout(
function() {
document.images['header_image'].fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[2].src;
this.fadeIn();
});
},
3000
);
e = null;
};
</script>
</head>
<body>
<h1>
<img src="/path/to/initial_image.png" id="header_image" alt="Header Text">
</h1>

GhettoT
11-26-2006, 07:35 PM
Thanks for all your help Twey! I will be sure to put in the source in comments a plug for you and your site! But do i just throw all of that into the <head> section? Do i need to put anything in the <body>?

-GT

Twey
11-26-2006, 07:41 PM
The code includes a </head> and <body> :)

GhettoT
11-26-2006, 08:34 PM
wow...sorry i am dumb i saw it before and didn't even think about it! Thanks again! I'll try not to bug anymore, and try to fresh'n up my javascript skills!

GhettoT
12-02-2006, 02:14 AM
Just another thought i had to make this cool idea abailable to everyone using any browser. Is it possible to take care of this idea using CSS, HTML, and minimal Javascript?

-GT

Twey
12-02-2006, 02:51 AM
Presuming you intend "minimal Javascript" to mean "little enough Javascript that it will still work for non-Javascript users," no, or I would have done it that way :)

GhettoT
12-02-2006, 04:54 AM
OK that makes sense. Now back to the original script you actually made. I finally was able to add it to my HTML document, but as I am a code neat freak I did a setup like such.
HTML Document:


<body>
<div align="center"><script type="text/javascript" src="header.js"></div>
........
</body>
</HTML>
The "header.js" looks like:


<script type="text/javascript" src="fadableobjects.js"></script>
function preloadImages() {
for(var i = 0; i < arguments.length; ++i)
(preloadImages.store[preloadImages.store.length] = new Image()).src = arguments[i];
}
preloadImages.store = [];

preloadImages("/path/to/loaded_image.png", "/path/to/mouseover_image.png", "/path/to/timed_image.png");

window.onload = function() {
var e = document.images['header_image'];

new FadableObject(e, 1, 10, 0, 99, false, false);

e.src = preloadImages.store[0].src;
e.onmouseover = function() {
this.fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[1].src;
this.fadeIn();
});
};
e.onmouseout = function() {
function() {
document.images['header_image'].fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[0].src;
this.fadeIn();
});
};
window.setTimeout(
function() {
document.images['header_image'].fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[2].src;
this.fadeIn();
});
},
3000
);
e = null;
};
}
Notice I added a "}" at the end of the document. With this setup, why does the header not even show up in my page? And when I use a debug add-in called "FireBug" for FireFox, why do i keep getting an error that says, "FadableObject is not defined"? Is it not defined because that var. is defined on the page located on your site?

-GT

GhettoT
12-02-2006, 07:15 AM
OK, i spent some time debugging myself, and trying to understand all of the javascript written by Twey and gotit to work! This is how i did it:

HTML:


<head>
<script type="text/javascript" src="fadableobjects.js">
</script>
<script type="text/javascript" src="header.js">
<!-- header.js is the script writtenby Twey here in this thread -->
</script>
</head>
.......
<body>
<h1>
<div align="center"><img src="PATH/TO/IMAGE.png" id="header_image" alt="Team 330"></div>
</h1>

Twey
12-02-2006, 02:01 PM
It was very simple:
<script type="text/javascript" src="fadableobjects.js"></script>You left this script tag in the Javascript file. Only Javascript is allowed in a Javascript file; that's HTML.
Notice I added a "}" at the end of the document.It's unnecessary, and will cause an error.
I am a code neat freakYet:
</body>
</HTML>your indentation is somewhat messed up and you're mixing tag cases? :p

GhettoT
12-02-2006, 07:44 PM
The "}" actually fixed an error i was getting.

Twey
12-02-2006, 08:13 PM
Hm... that's peculiar. There's no extraneous "{" in there that I can see.

GhettoT
12-02-2006, 09:18 PM
Without it the fade-out doesn't work and i get an error that says
missing } after function body header.js line 39 Line 39 doesn't excist so it is looking for the }

Twey
12-03-2006, 01:58 AM
Aha -- I see the problem. It should look like this:
function preloadImages() {
for(var i = 0; i < arguments.length; ++i)
(preloadImages.store[preloadImages.store.length] = new Image()).src = arguments[i];
}
preloadImages.store = [];

preloadImages("/path/to/loaded_image.png", "/path/to/mouseover_image.png", "/path/to/timed_image.png");

window.onload = function() {
var e = document.images['header_image'];

new FadableObject(e, 1, 10, 0, 99, false, false);

e.src = preloadImages.store[0].src;
e.onmouseover = function() {
this.fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[1].src;
this.fadeIn();
});
};
e.onmouseout = function() {
document.images['header_image'].fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[0].src;
this.fadeIn();
});
};
window.setTimeout(
function() {
document.images['header_image'].fadeThread.fadeOut(function(){
this.element.src = preloadImages.store[2].src;
this.fadeIn();
});
},
3000
);
e = null;
};There was an extra "function() {" for some reason.