PDA

Click to See Complete Forum and Search --> : images rollover gone after opening new window

brickwallfish
09-30-2004, 03:24 PM
So, I'm sure there is a very simple and solid solution to this problem (I'm hoping it's not "It can't be helped" :) ) but it seems to be hiding from me at the time :P

So I'm hoping maybe one of you guys know how to deal with it!

So here's the problem:
I'm using onmouseover and onmouseout to change the images, and ahm... It's best to show an example (I suck at explaining :/ )

<HTML>
<HEAD><TITLE></TITLE>
<SCRIPT language="JavaScript">

Link1_1= new Image()
Link1_1.src="Animations/Refined/MenuItem_01Ani.gif"
Link1_2= new Image()
Link1_2.src="Animations/Refined/MenuItem_01.gif"
//etc...
</SCRIPT>
</HEAD>
<BODY>

<A href="whatever.html" target="Frame1"><IMG onmouseover="document.all.[Link1].src=Link1_1.src" onmouseout="document.all.[Link1].src=Link1_2.src" src="Animations/Refined/MenuItem_01.gif" title="Description for link 1" id="Link1" border="0"></A>

<A href="Images/Image1.jpg" target="new">Some link</A>

</BODY>
</HTML>

The preloading works all fine, there's nothing wrong with it. It's just that, when I click on "Some link" (any link that opens a new window) and return to the original page (in other words, close or minimalize the newly opend window), the images for the button have to be loaded again onmouseover/onmouseout.

It's not like the preloaded image HAS to be loaded from the web/server again, the computer already has it stored in it's temp files. Can't I just tell it to use that image instead?

So much for the first problem. On to the second.

The second is much easier, I think. I'm using the "scrollBy(x,y)" function instead of the scrollbar. I thought this function was supported by all browsers? But it seems to work only on mine :S (IE 6)

anyone suggestions/thougths on that one?

I really REALLY appreciate some help here ^_^

Greetz,

Marius.
Kor
10-01-2004, 03:19 AM
I thought this function was supported by all browsers? But it seems to work only on mine :S (IE 6)


Nor your rollover will work on other browser except IE...:D

1. First at all, you should have used a code based on document.getElementById(id) reference (works on IE5+, NS6+, Mozilla, Opera5+ and compatible with these) not on document.all[id] reference. If you still need your code to work with IE4 and/or NS4 you may use a short method detector to make it cross-browser

2. ASAIK there is no guarantee preload code, as the loading process is controlled rather by the connection speed.

3. Check wether you browser is or is not set to load page/images from server or from cache

In IE6
Tools - Internet Options - Temporary Internet Files - Settings - Chcek for newer version of stored pages

If it is set on "Every visit to the page" your browsers will load the pictures form server again every time you open the page... Make it Automatically or Never if you want to load them from cache. Anyway, keep in mind that some users might have different settings, so this is the reason for I have told you that there is no guarantee method to preload images.

4. Think about using normal browser's scroll instead of scrollBy() method. What about those which have disabled (even from stupid reasons) javascript? How will they be able to scroll your page?

By the way, scrollBy() should work for other browsers too (NS6+,Moz, Op5...) as well as for IE6. But you must use it as a window method not a document or document.body method. If you still need the scrollBy for good reasons, show us your code to see wether is something wrong or not in it.
brickwallfish
10-01-2004, 01:42 PM
Ah, thanks. Well, that explains why the browser keeps reloading the images :)

As for the scrollBy(), it's not all that neccesary, I can simply use the default scrollbar. It just would have looked better, that's all ^^

And thanks for pointing out the getelementbyid! Didn't know that 'cuz I'm kinda new to javascripting...

Greetz,

Marius.
JPnyc
10-01-2004, 02:17 PM
As he pointed out, your mouseovers as they are, will also not work in any browser but IE.
Kor
10-04-2004, 03:31 AM
Presuming that your all images are something like

rollonimage.gif = rolloffimageAni.gif

You may try this kinda rollover script which uses direct reference of objects with this as a self reference passed parameter (I think it should work for all browsers as well).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script language="JavaScript" type="text/JavaScript">
function rollOn(obj,img){
oldimg=img;
img=img.split('.');
obj.src=img[0]+'Ani.'+img[1];
}
function rollOff(obj,img){
obj.src=oldimg;
}
</script>
</head>
<body>
<a href="whatever.html" target="Frame1"><img src="Animations/Refined/MenuItem_01.gif" width="40" height="55" border="0" title="Description for link 1" onmouseover="rollOn(this,this.src)" onmouseout="rollOff(this,this.src)"></a>
</body>
</html>


Note that in this case you don't need to modify the script when adding other pictures in your page nor using id's or names for your objects.