# JavaScript: Buttons momentarily disappear



## pyritechips (Jun 3, 2002)

Hello again:

I rebuilt my webpage (still under renovation) and am using JS to have 3D buttons highlight when moused over, then depress when clicked. Each button originally had its own script but I combined them all into one external JS script and reference it using:



All worked smoothly and well until I combined all the separate functions into one script. It now works perfectly offline but when uploaded to my site, the buttons momentarily disappear as there is a short delay while the linked page loads. I use a blend transisiton in the head but this is irrelevant, as the same problem occured before they were added.

Since the js script is external I post it here for your perusal.

**NOTE*: *I actually do not know JS; so far I am trying to learn it but up until now I am merely cut/pasting scripts. I have 2 questions:

1) Did combining all the separate button scripts into one external script slow down the process?

2) Is there a way to condense all the separate button functions? As you can see below, it is the same functions repeated, but with different function and button names.

*buttondown.js*

function homedown()
{
home.src="home_down.gif"
}
function homeup()
{
home.src="home_o.gif"
}
function guidedown()
{
guide.src="guide_down.gif"
}
function guideup()
{
guide.src="guide_o.gif"
}

function linkdown()
{
link.src="link_down.gif"
}
function linkup()
{
link.src="link_o.gif"
}
function picturedown()
{
picture.src="picture_down.gif"
}
function pictureup()
{
picture.src="picture_o.gif"
}
function formuladown()
{
formula.src="formula_down.gif"
}
function formulaup()
{
formula.src="formula_o.gif"
}
function colourdown()
{
colour.src="colour_down.gif"
}
function colourup()
{
colour.src="colour_o.gif"
}
function maildown()
{
mail.src="mail_down.gif"
}
function mailup()
{
mail.src="mail_o.gif"
}
function bookdown()
{
book.src="book_down.gif"
}
function bookup()
{
book.src="book_o.gif"
}
function bookmarkdown()
{
bookmark.src="bookmark_down.gif"
}
function bookmarkup()
{
bookmark.src="bookmark_o.gif"
}

*To view button effects and source code, please go to:*

Pyritechip's Homepage


----------



## brendandonhu (Jul 8, 2002)

Are you talking about how the button you clicked dissappears for a second after you click it? I'm not sure why it would do that.
As for simplifying the functions-I think I can get it all into two functions. I'll give it a shot.


----------



## brendandonhu (Jul 8, 2002)

Ok heres what goes in the js file

```
function down(obj)
{obj.src = obj.id + "_down.gif"}
function up(obj)
{obj.src = obj.id + "_up.gif"}
```
and you will have to modify the menu a bit.
Ex:here is the code you would use for the Home button. 








Note:this code wasnt thoroughly tested, so it might not work right.


----------



## pyritechips (Jun 3, 2002)

Hello B: I know you're off to bed so you can read this tomorrow.

Your above code worked like a charm. It was also very easy to change all the pages (gotta love external scripts and cut/paste!).

We were talking about the vanishing buttons on AIM and you gave me an idea. I have had quirks in the past with the web host caching images. Text is fine but pics are a problem. If you have a abc.gif and you edit it and upload it and select overwrite the server is not very good at overwriting. What I do now is first delete the old abc.gif off the server, then upload the new one.

I have done that and I think it is working ok now but I will give it a day to make sure.

TTYL and thanks very much!  :up:


----------



## Gibble (Oct 10, 2001)

Ok, since for some reason I can't post from home, I'll post this now.

The reason you get the flicker/delay in the images is probably because they need to be downloaded and loaded by the browser, and this takes a few instants.

You can try preloading your images with some simple javascript.

See:
http://www.caffeinatedgeek.ca/topic/javascript/240/


----------



## brendandonhu (Jul 8, 2002)

Welcome for the script 
Im still trying to make it shorter.
Yea we talked about preloading, but isn't it odd how only the image you clicked on dissappears? I suppose preloading could work, but make sure you preload the _up and _down buttons, I think thats where the slow down is happening.


----------



## brendandonhu (Jul 8, 2002)

OK PC I got it down to 2 lines lol. No need to change your pages though, unless you really care about an extra 2 lines of code 
function down(obj,dir)
{obj.src = obj.id + "_" + dir + ".gif"}
-Just wondered if I could.


----------



## pyritechips (Jun 3, 2002)

Gibble and B:

You are both right about the preloading. I did soome further research last night and one article stated exactly what Gubble did: about the delay while the new images is downloaded from the server. I have a page bookmarked that has js preload code and I will try to rewrite it to fits my images. I will also read Gibble's link - thx! :up: 

I think my problem is worse because I actually have 3 images per button: normal, on and down.

One other thing I experimented with: Internet Options > General Tab > Temporary Internet Files > Settings > Check for newer versions of stored pages = Never. This seems to have cured the flicker but I can't ask everybody to change their settings!


----------



## Gibble (Oct 10, 2001)

"Check for newer versions of stored pages = Never"

ACK!!! Set that to every visit to the page!

Trust me on this, they shouldn't even have the other options.


----------



## pyritechips (Jun 3, 2002)

Ahh B!

The way I see your new code is that you have eliminated the *up* and *down* and replaced it with *dir*. Very clever!


----------



## brendandonhu (Jul 8, 2002)

yes, but then you would have to add the direction to the onmouseover/onmouseout. But hey, from 75 lines down to 2 lines, not bad.
BTW PC-here ya go
http://wizardsofwebsites.com/pyritechips


----------



## pyritechips (Jun 3, 2002)

Yes: 75 to 2 is a somewhat trimmer js!  

The guestbook looks great!! How do I set it up to link with my page? do I put a URL into my guestbook button to link to the guestbook externally?

I checked out that code that Gibble posted. It seems as if I have to put all images to be preloaded into the body tag? isn't there an easier way? I have 18 images to be preloaded (the default buttons don't need to be preloaded). That's a heck of a lot of repetitive code to be jammed into the body tag.


----------



## Gibble (Oct 10, 2001)

You can just make another function to call the preloader and call that from the body tag.


----------



## brendandonhu (Jul 8, 2002)

You dont repeat the whole code 18 times, you add images to this
onload="preloadImages('images/sample1.gif', 'images/sample2.gif');"

so its like
onload="preloadImages('image1','image2','image3');"
etc

And yea, just use a link to the guestbook. I added your graphic at the top-the colors can be changed if you want it to match your page.


----------



## pyritechips (Jun 3, 2002)

Hi again B:

Do I get administrative rights? What about password? I hope I get to control my own guestbook.


----------



## brendandonhu (Jul 8, 2002)

Yes you do, I will PM the password to you.


----------



## brendandonhu (Jul 8, 2002)

Or not, since you don't have PMs. I'll email ya.


----------



## pyritechips (Jun 3, 2002)

Thanks B.

I have just one question:

In the body tag I place *onload="preloadImages('images/sample1.gif',...*, correct? do i leave the images/ and then put the name of my gif after it? Would I have *('images/home_i.gig', 'images/home_down.gif',...)*?


----------



## brendandonhu (Jul 8, 2002)

No, that is the path to the images. If your images are in the same directory as your web page, you dont need the images/


----------



## pyritechips (Jun 3, 2002)

Ah! silly me! I should have guess the folder/filename but I am dealing with an unknown language!

B: Thanks, I got your email, changed my password but I can't see where are the administrator's controls. Weird!


----------



## brendandonhu (Jul 8, 2002)

Mulder had a similar problem.
When you sign in, you should see a screen like this (of course with your name, instead of mulders).

Click the word Here.
At the top of the next page, there should be some links that weren't there before. The admin Control Panel link just says "CP"


----------



## pyritechips (Jun 3, 2002)

Hello B:

I got in the guestbook ok, thx, but just one more minor question: Can I edit the banner from my homepage? it is a bit wide for the guest book and is causing the page to stretch horizontally. My banner is 754px wide and if I could shrink it down to about 700px it would be a better fit.

I also coded my page with the image preloader and it isn't working. In case I did something wrong I will post all the coding here:

script line in page head:

*<script language="javascript" src="imagePreloader.js">*

body tag:



imagePreloader script:

*//Image Preloader Function
function preloadImages() {
document.preload = new Array();
if (document.images) {
for (var i = 0; i < preloadImages.arguments.length; i++) {
document.preload = new Image();
document.preload.src = preloadImages.arguments;
}
}
}
*


----------



## brendandonhu (Jul 8, 2002)

PC- I THINK it might have something to do with the arguments in that function but I really dunno.
Maybe try a preload generator to do the work for you?
http://www.searchbliss.com/webmaster_tools/preload_images_generator.htm

You can resize the banner and upload it to your site, or send it to me and I will change it.


----------



## pyritechips (Jun 3, 2002)

Hi again B:

Well, I tried that preload generator and it's still happening Is it because I'm using three buttons? mouseout, mouseover and mouseup? I'm stumped but the bugs sure is messing up my sexy new buttons!


----------



## brendandonhu (Jul 8, 2002)

Sorry. I don't know, I just don't know 
*Shakes Head*


----------



## pyritechips (Jun 3, 2002)

Update:

I have tried gibble's image preloader. I have tried B's image preloader. I found a bug in B's buttondown.js, I have tried eliminatiting rollover.js and running buttondown.js only.

Absolutely nothing will work.

I am very frustrated with this and am ready to scrap all the scripts I am using. Does anybody know of a "working" script that will:

1) Display button #1 when the page is loaded.

2) Display button #2 when hovered over.

3) Display button #3 when clicked.

I have seen such 3-button combinations on various websites so I know the script exists.


----------



## Gibble (Oct 10, 2001)

Here, can you provide a link so we can see the page in action (or lack there of )


----------



## pyritechips (Jun 3, 2002)

hello gibble:

I got tired of seeing blinking buttons my my main site so I removed the 3rd button (down) but I still have a (hardly) working test page HERE


----------

