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

Code:

  <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?

Code:

<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

Code:

  <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

Thread: Cool Header help

Thread Tools

Search Thread

Cool Header help

Bookmarks

Bookmarks

Posting Permissions