David Dugdale

Email conversation

From	David Dugdale
To	Me
Subject	New page after a gif finishes one iteration.
Date	13 September 2004 22:57

Dear Sir,

(I have looked for your name on your tutorials, but seem to have missed 
seeing it.)

I would like to make a page with a gif of a door that opens when clicked 
upon. After the door opens I would like the viewer to be taken to a new page.

To this end, I have made the gif of the opening door and begun using it, but...

I  tried some simple HTML code to begin the process that required two 
almost identical pages to be built, one with a stationary gif and the other 
with a moving gif. The code caused the door to work when clicked on in 
Opera 7 but opened the door twice in IE6 and Netscape 7. At this point I 
started searching for some javascript information because I realised that, 
to implement the plan properly, some more clever code was needed A/ to 
start the door opening and B/ after a time delay move the viewer to the 
next page.

I then found your pages and started reading.

Because I do not yet understand the meaning of Javascript terms as well as 
I would like, and am still pretty much at the cut and paste level, I am 
unable to tell how to adapt one of your your scripts to open, not a popup, 
but a new page.

If you could perhaps point me in the right direction I could carry on using 
your tutorials and perhaps succeed without bothering you too much. I 
believe that I can sort out the code for a mousedown change from a static 
gif  to a second (moving)  gif, and, after that I might even manage to add 
the time delay and test it to open a third gif, but I cannot see how to 
write the name of the function call that would open a new page but not a 
new window.

Any assistance would be much appreciated.

Thank you.

Regards,

David Dugdale

From	Me
To	David Dugdale
Subject	Re: New page after a gif finishes one iteration.
Date	14 September 2004 08:32

David,

No need for the two almost identical pages. This is fairly simple to do
with just one.

You will need two images, one of a closed door, and one of the animation of
the door opening. The animation should be set not to loop (one of the
settings of the GIF file - you should be able to set this in your GIF
editor) - otherwise, the animation will loop while the new page is loading.

For the sake of argument, I will call these 'closed.gif' and 'opening.gif',
and the page to be loaded 'newAddress.html'.

There are three ways to load a new page.
location.href = 'newAddress.html';
location.replace('newAddress.html');
window.open('newAddress.html','_self');

The first is equivalent to clicking on a link, and is probably what you
want.
The second replaces the history entry from the first page (so the back
button does not work).
The third is like the first, but it can also open popups, so it may well be
blocked.

Put this between the <head> and </head> tags:

<script type="text/javascript"><!--

var animationTime = 1000; //assuming the door takes 1 second to open
var openAni = new Image(); openAni.src = 'opening.gif'; //preload the animation

function animateDoor(oLink) {
 if( document.images && document.images['doorPicture'] ) {
   document.images['doorPicture'].src = openAni.src;
 }
 window.setTimeout('location.href=\''+oLink.href+'\';',animationTime);
}

//--></script>

... now, put the image somewhere in the page:

<a href="newAddress.html" onclick="animateDoor(this);return false;">
<img src="closed.gif" name="doorPicture" alt="load the page"></a>


Hope this helps


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	David Dugdale
To	Me
Subject	Thanks for new page after a gif finishes one iteration.
Date	17 September 2004 12:37

Mark,

Thank you very much for your swift reply to my questions.

I must apologise for the not so swift reply and will explain that two 
things happened. On the 15th it was my birthday and a hurricane came really 
close to us. (We live in the British Virgin Islands) In the last few days 
FRANCES has made us wet, IVAN missed us completely and JEANNE has just 
advanced away from us after producing some wind (It was only a Tropical 
Storm as it passed by us), but much rain, beyond belief.  I am just 
now  back into opening email. A quick look at [the weather map] shows
Tropical Storm KARL in mid Atlantic.

I shall continue building my web pages, put your scripts to work and let 
you know how it transpires.

Thank you for the assistance, and, perhaps "Be glad you don't live in the 
tropics." ! !

David

David Dugdale

Navigation

Search

Site navigation

Email conversation