Xara rollovers

Just been playing and using Xara to create a bunch of rollover buttons. Despite the 'help' files, and with a bit of trial and error (more of the latter) we got there.

Nice set of buttons with an appealing mouseover alternative. Looking good. Then I uploaded them onto some remote web space, but...

It appears the mouseover image (gif) is being downloaded from the server *everytime* the mouse moves over the respective button. Not noticed when everything was local, this is not surprisingly creating annoying delays as you move the mouse over the set of buttons. In fact if you move the mouse too fast, no mouseover images ever appear. You have to hover for a perceptable time over the button before its alternative image appears.

Further proof. I went offline, and as soon as I moved the mouse over a button, then browser immediately tried to log back on.

So whats going on? I have not made any changes to my browser settings, and most other aspects of all sites seem to continue to work as they used to do.

Is it the Xara way of creating the java, or what?

Any help or comments appreciated. I thought I was doing so well, and this is a bit of a setback.

Alan

Just been playing and using Xara to create a bunch of rollover buttons. Despite the 'help' files, and with a bit of trial and error (more of the latter) we got there.

Nice set of buttons with an appealing mouseover alternative. Looking good. Then I uploaded them onto some remote web space, but...

It appears the mouseover image (gif) is being downloaded from the server *everytime* the mouse moves over the respective button. Not noticed when everything was local, this is not surprisingly creating annoying delays as you move the mouse over the set of buttons. In fact if you move the mouse too fast, no mouseover images ever appear. You have to hover for a perceptable time over the button before its alternative image appears.

Further proof. I went offline, and as soon as I moved the mouse over a button, then browser immediately tried to log back on.

So whats going on? I have not made any changes to my browser settings, and most other aspects of all sites seem to continue to work as they used to do.

Is it the Xara way of creating the java, or what?

Any help or comments appreciated. I thought I was doing so well, and this is a bit of a setback.

Alan

For you to go and see in action, I have posted a very simple example (the original Xara created test file) at:

An example

Feel free to go examine, this demonstrates the problem well.

Alan

Alan I have IE 5, and everything worked smoothly on your test. I didn't notice and apparent delay in the color change of the buttons when I put the mouse over them.

Judi

is because the button shapes are a bit large, it might be taking a split second longer for the button images to load?

Worked fine in my browser, IE 5.5

Gary

Gary Priester

Moderator Person

<a href="http://home.earthlink.net/~garypriester">
Be it ever so humble...</a>

Funny that you posted the question - because I got the same problem, just now, with my own buttons.

I tried your test and I can see that all buttons and code are downloaded every time you click on one. I can see that 11 items are downloaded each time a button is pushed.

I have never played around with this kind of stuff so I'm not sure how it is supposed to work--- but I would have assumed that the buttons would be cached - no?

Help! someone?

Risto

diri@videotron.ca

Funny to me to. I checked your link, and they did not work. I am just working on a customers site, and then I should check something before uploading (the site is www.teambygg.no ), with rollovers. And they did not work either. Then I remember that I earlier today turned off the active scripting in my browser MSIE 5.5 (because of virus warning). When I turned it on again - both sites (your and mine) worked. My bottoms are created in Xara, but scripted in Dreamweaver. Check if mine work, if not - then check if you have turned off active scripting. The rollovers worked on my local machine, even if the scripting was off, but not on the remote server.

Øystein

Both of your rollovers worked flawlessly here.
Take care,
-Diezel-

Thanks for your replies so far folks, but ....

Judi its just this sort of problem. Infuriatingly it seems to work for some yet fail for others for inexplicable reasons.

Gary its not that the buttons are large, I am sure they should be chached and not being downloaded when mouseover needs them.

Risto: looks like we're in this one together...

Oystein: I tried the site you suggested and like mine, downloading was taking place each time I passed over the menu buttons; not good.
I checked active scripting and its enabled.

Rollover appeared to work for me when I was offline and running off my local files, but of course I would not have been able to appreciate files were being loaded or got from cache as both would have been equally fast. Only when working over the modem link does file reloading become long enough to perceive.

So:

For some it works ok
For some it does not
Active scripting is enabled
and I assume we're all running W98 and IE5.5

What next folks?

Methinks I will duplicate this post in our sister forum on web design, since it now looks as though this may be getting a bit away from Xara and closer to basic browser/java/server territory.

Keep thinking though - we've got to nail this one for my sanity..

Alan

All aspects of XaraX's NavBar stuff is weird and infuriating and ultimately a waste of time. In the name of your sanity, stay away from it.


K

Klaus, thanks for clearing it all up [img]/infopop/emoticons/icon_wink.gif[/img]

Risto

diri@videotron.ca

Both sites worked fine on my IE5 / W98, with no problems. I use XaraX nav buttons alot and have never found any problems with them. Very strange ???
Egg

...we are understanding each other?!

My question was: "Are the nav buttons supposed to download each time you go to a new page (if the same nav buttons are part of that page also?). I thought they would be cached, no?

I tried Alan's test page with a slow connection and I can see that 11 files are downloaded each time a button is pushed.

With my cable modem I cannot see any problems.

Anyone else?

Risto

diri@videotron.ca

I have found that common button images are cached and the only image that is downloaded as new is the "selected state" button, which arrives later than the cached buttons from previous pages.
Of course this is only true for the first visit of a selected page, after that all button states are cached.
Egg

Fine with me - althought work connection is fast. I understand they should be stored locally, don't know what has happen with your need to connect.

Turan

Excuse any misunderstanding but I get the impression that people are clicking my test buttons, which will result (probably) in some downloading as the href is set to self.

The effect I may have not emphasised clearly was just hovering over the buttons, as it is the mouseover effect that is in question. No clicking involved.

Egg: I like what you say, as it is in total accord with what I believe, but can you hazard any guess as to what setting on IE5.5 may have got moved/changed to cause such a problem? As I said earlier I have checked java active scripting and this is enabled. On IE5.5 I have the internet security level slider set to default Medium which I think is where it's always been.

The fact that some people have tried my test site and report no problem, *may* be that they are on a fast link and therefore might not notice a short download on passing over the button, or else they have their versions of IE set slightly different somewhere.

Anyone know a site with java rollovers that are coded correctly as a helper to determining whether it is a java or browser setting problem?

Thanks to all who have exercised a few neurons on this one, I am sure we must be getting close.

Just popping off to see if the WebDesign forum bunch have added anything.....

Alan

Just had a quick look at the webdesign forum and nobody has even viewed my problem there let alone suggested any solutions (posted over 12 hours ago).

Boy - this forum positively buzzes with life compared to them.

Alan

Getting caching to work correctly is a nightmare because its up to a combination of the client browser *and* the web server dishing out the pages.

There are HTML META-tag headers you can use to try and influence the way the caching works - the problem here is that the web server can add its own too. And there are cross browser platform issues to. And users can configure their browsers to cache in different ways (IE, for example, has three modes of caching)

You have to be very wary of this kind of thing and it causes all sorts of problems. For my field, web applications, most of the issues are with trying to stop things getting cached. For you its the opposite problem.

Try these sites for more detailed info on what it is and how to control it:

<blockquote>
Caching Tutorial for Web Authors and Webmasters


Caching online course
</blockquote>

Security level settings seem not to be playing a part in that I set them to low (ignored the warnings) and the rollover download problem still persists. Now set them back to Medium.

Another thing I was trying my test site, and it was behaving as normal, downloading each rollover image every time I passed over the button. Then I came offline. Displayed the test site window again. Passed over a button. Dialer woke up giving opportunity to log in (clearly IE wanted to d/l rolledover images again) but I click 'work offline' at which point IE decided to just get the rolledover image from local cache. At this point moving the mouse over the four buttons produced instant rollover effects, so clearly the browser is aware it has these images in its local cache, but prefers if it can to get fresh copies downloaded. I don't believe IE has a mind of its own, but it makes you wonder.

Has this helped anybody?.....

Alan

Incidentally, the JavaScript code that Xara creates *is* the correct (or at least accepted) way of doing cross browser (at least the common ones) image preloading, and therefore the problem is more likely a browser issue rather than a problem in Xara's rollover export.

James

I like what you say, so if its browser settings what on earth is wrong with the settings of my version of IE5.5?

I have read those 2 sites you referenced and no clues as to whats wrong came to me (know a lot more about caching working the way I always thought it should) but no clues to the present problem.

Egg: if it all works for you as it should (are you sure there is absolutely no downloading taking place when you pass over the test buttons?) then maybe we need to compare some of our IE settings more intimately? You show me yours and I'll show you mine. [img]/infopop/emoticons/icon_biggrin.gif[/img]

Alan

I've cleaned out my temp internet file and tried your site again. The buttons are working as they should. My IE settings are basically set to the default. Why your browser should want to reload them afresh each time is a mistry?
Egg

I have IE5.5 SP2, default config, Win2K. If I switch to offline then IE caches the images locally and works.

The cache setting is set to Automatic (under Tools->Internet Options->Temporary Internet Files->Settings) on mine.

Security levels etc shouldn't make any difference to caching.

(worth checking whether it was fixed in one of the service packs)

James

... you are right!

Sorry for that! It wasn't XARA it was me... or really my Internet Explorer.

It works just fine, now.

Thanks for replies.

Risto

diri@videotron.ca

Alan, could it be that you are just out of disc space so the images can't be cached?

Mickie

Egg: Its no longer a mystery (or mistry!) read on...

Risto: your last comment is just what I would like to say, but you already have...

Mickie: Nope! If cache (temp files) fills it will just delete the oldest, but read on...

TOP HONOURS today go to James Frost I repeat James Frost is our winner!!!!

Your casual mention
<BLOCKQUOTE><font size="-1">quote:</font><HR> The cache setting is set to Automatic (under Tools->Internet Options->Temporary Internet Files->Settings) on mine.
<HR></BLOCKQUOTE>
sent me off to check what mine were, and I had 'every visit' checked. Now I am not quite sure why that setting should have stopped IE in its tracks, but it did!

Changed my setting to Automatic and absolutely everything worked just like I had always thought it ought to. I can't begin to imagine what IE's train of thought might have been, but all rollovers now work nice and quick on my site, my test site and Oystein's example as well.

So it gives me great pleasure to award James with his official 'Thank You' stamp. James, please feel free to plaster this image wherever you feel it might improve your street cred!

Thanks a bunch everyone - another success to notch up.

Alan

Alan,

It is my understanding - and I work for a browser company, so I may get the guys to confirm this tomorrow - that the preloading JavaScript is not reliable. There are two methods of getting a script to run when as part of a page load: put the script in-line, or use the onLoad event as part of the BODY tag.

Macromedia Dreamweaver does it differently. Have a look at http://www.isocalc.com/isocalc.js and http://www.isocalc.com/index.htm for the JavaScript and onLoad events in motion. I find this is far more reliable than in-line scripts. The onLoad event is only triggered _after_ all of the page and its in-line images (mouse-off) have been loaded. Typically the throbber stops throbbing, but the status bar indicates another x images to download. Giveaway.

You are relying on the browser to preload the images by running in-line script in the Head. I don't think you can rely on that to work. It's quite likely that later IE versions cope, but IE is pretty resilient to poor HTML and the like. Opera and Navigator will probably reject such mistakes. You can try moving that if (document.images) { block into the BODY section (i.e. between the <body> and </body> tags), or wrap it up into its own function and then call that function as part of the onLoad event response:

function preloadImages( ) {
if (document.images) {
Button1MouseOff = new Image(); Button1MouseOff.src = "Button1.gif"
Button1MouseOver = new Image(); Button1MouseOver.src = "Button1MouseOver.gif"
Button2MouseOff = new Image(); Button2MouseOff.src = "Button2.gif"
Button2MouseOver = new Image(); Button2MouseOver.src = "Button2MouseOver.gif"
Button3MouseOff = new Image(); Button3MouseOff.src = "Button3.gif"
Button3MouseOver = new Image(); Button3MouseOver.src = "Button3MouseOver.gif"
Button4MouseOff = new Image(); Button4MouseOff.src = "Button4.gif"
Button4MouseOver = new Image(); Button4MouseOver.src = "Button4MouseOver.gif"
Button5MouseOff = new Image(); Button5MouseOff.src = "Button5.gif"
Button5MouseOver = new Image(); Button5MouseOver.src = "Button5MouseOver.gif"
}
}

<BODY onLoad="preloadImages[ );">

Hope this helps clear it up.

Cheers,

Nick Wilkinson.
http://www.isocalc.com/index.htm

Oh, bugger, this flippin' form removed the <head> tag that I'd constructed for you. It should have been:

<BODY onLoad="preloadImages( )">

Hmmm, that should be better.

Nick.

Clearly knowing more about the detail of the subject than I do I think I get the drift of what you are saying, except that having made the changes as detailed in my post above the problem seems to have reliably gone away.

I will accept that the way of preloading the images may not (in your opinion) be the best way and I can respect that, but at the end of the day what I am doing now does work.

Again, Xara Ltd in their wisdom (and this is fundamentally their code) chose this method for whatever reasons, and for someone like myself for whome this subject is more a means to an end than an interest in itself, we have to rely on others and accept what they say.

Thank you anyway for your interest, I am sure I will in time begin to tune my html by experience, for it is only because of people like you and the others in this forum, that this particular thread has produced a result, and no doubt added a little to everybodys experience on the way.

Alan