Pictures and Transition

[Chi]

Hi,
I would like to insert animations pictures in my pages. Please send me some
links, so I can search.
-------------------------------
I also like the Transition effect - Circle in. It is very nice when I use it
with web pages.
Are there some ways that I can apply the Transition effect -Circle in – with
the links

Thanks


Thanks
Chi

 

[Kevin Spencer]

For animated pictures, see
http://www.google.com/search?hl=en&q=Animated+GIFs.

I don't understand the second question.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.

 

[Chi]

Kevin,

Sorry! My English is very limited.
--------

Ex: www.parkland.edu.
When I click on the above link, I will see the circle in or out first
(transition), then I will see the home page of Parkland.

Thanks
Chi

Thanks
Chi
----------------------------------

 

[Kevin Spencer]

The transitions apply to the loading of a page. So, when a link links to a
page having a transition, that transition is applied. A hyperlink can not
have a transition.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.

 

[Trevor L.]

The transitions apply to the loading of a page. So, when a link links
to a page having a transition, that transition is applied. A
hyperlink can not have a transition.

Kevin,
Hi again from me in Canberra, Australia.

I am interested in this. I set up a transition between images in a slide
show using Filters
if (document.all)
{ document.images.slide.filters[0].apply()
document.images.slide.filters[0].play() }

This works OK (in IE6). But a couple of questions
1. (More or less a side issue)
Is this syntax correct?
Shouldn't it be: document.images["slide"].filters[0].apply() ?
I seem to remember that I read somewhere that it is an IE6 peculiarity that
one can use syntax such as document.images.slide. It works (I read) because
IE6 sets up a variable (or is it a property - I am not sure of the correct
wording) named slide within document.images when there is an element with
that id, and that other browsers which follow more strict HTML do not. (Of
course, in this case it wouldn't matter, because filters is also IE only.)
Is it valid syntax to mix using IDs e.g. "slide" and numbers e.g. 0?
I also note that sometimes one uses [] e.g. as above, and sometimes () e.g.
getElementById. This can be confusing.

2. (This is my main question.)
When I added a preload, the transition effect did not work
I added this just after the filters statements:
FP_preloadImgs(Slides[ss_ImgNum+1])

FP_preloadImgs is the standard FP preload function
Slides is an array holding images names e.g. "pic1.jpg", "pic2.jpg", etc.
ss_ImgNum is a variable holding the number of the image just displayed. So
the code is intended to load the next image while the current one is being
displayed

Why would the transition not work?
Should the preload be elsewhere?
Or does transition only work during load, meaning that because the image has
been loaded, it doesn't work?

 

[Kevin Spencer]

Hi Trevor,

1. (More or less a side issue)
Is this syntax correct?
Shouldn't it be: document.images["slide"].filters[0].apply() ?
I seem to remember that I read somewhere that it is an IE6 peculiarity
that one can use syntax such as document.images.slide. It works (I read)
because IE6 sets up a variable (or is it a property - I am not sure of the
correct wording) named slide within document.images when there is an
element with that id, and that other browsers which follow more strict
HTML do not. (Of course, in this case it wouldn't matter, because filters
is also IE only.)
Is it valid syntax to mix using IDs e.g. "slide" and numbers e.g. 0?
I also note that sometimes one uses [] e.g. as above, and sometimes ()
e.g. getElementById. This can be confusing.

You have a few different issues here. I would be careful about designing for
IE6. You may want to download the beta version of IE7, which is slated to be
much more in line with the current HTML standards, in order to ensure that
your slide show will work in the future. No doubt some things that are not
standard (but not contrary to standards - just outside of them) will be
supported, but without checking it out, you're taking a chance.

IE6 does support some non-standard syntax. I'm not entirely sure what all it
entails, as I try to stick to things that work in all browsers, but that
does look familiar. I often use the following section of the MSDN Library
for an excellent reference on IE's spin on HTML:

http://msdn.microsoft.com/library/default.asp

As for the "[]" versus "()," the example you gave was with regards to an
array versus a function. Arrays use square brackets, but I believe in IE6
they also can use parentheses. Still, for maximum
cross-browser-compatibility, I would stick to square brackets for arrays.
Functions always use parentheses, in all browsers.

2. (This is my main question.)

This one I couldn't answer without looking at the code. I am not as familiar
with the type of code FrontPage writes as I am with coding in general, as I
am a programmer by trade, and use FrontPage not for its bells and whistles,
but for its excellent web mangagement and HTML development tools. If you can
provide a URL, I can take a look.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.

The transitions apply to the loading of a page. So, when a link links
to a page having a transition, that transition is applied. A
hyperlink can not have a transition.

Kevin,
Hi again from me in Canberra, Australia.

I am interested in this. I set up a transition between images in a slide
show using Filters
if (document.all)
{ document.images.slide.filters[0].apply()
document.images.slide.filters[0].play() }

This works OK (in IE6). But a couple of questions
1. (More or less a side issue)
Is this syntax correct?
Shouldn't it be: document.images["slide"].filters[0].apply() ?
I seem to remember that I read somewhere that it is an IE6 peculiarity
that one can use syntax such as document.images.slide. It works (I read)
because IE6 sets up a variable (or is it a property - I am not sure of the
correct wording) named slide within document.images when there is an
element with that id, and that other browsers which follow more strict
HTML do not. (Of course, in this case it wouldn't matter, because filters
is also IE only.)
Is it valid syntax to mix using IDs e.g. "slide" and numbers e.g. 0?
I also note that sometimes one uses [] e.g. as above, and sometimes ()
e.g. getElementById. This can be confusing.

2. (This is my main question.)
When I added a preload, the transition effect did not work
I added this just after the filters statements:
FP_preloadImgs(Slides[ss_ImgNum+1])

FP_preloadImgs is the standard FP preload function
Slides is an array holding images names e.g. "pic1.jpg", "pic2.jpg", etc.
ss_ImgNum is a variable holding the number of the image just displayed. So
the code is intended to load the next image while the current one is being
displayed

Why would the transition not work?
Should the preload be elsewhere?
Or does transition only work during load, meaning that because the image
has been loaded, it doesn't work?

 

[Trevor L.]

Kevin,
Many thanks. As always you give very clear answers and good advice.
Some comments/queries in-line

You may want to download the beta version of IE7,

I will do that

I often use the following section of the MSDN Library for an excellent
reference on IE's spin
on HTML:
http://msdn.microsoft.com/library/default.asp

Thanks. I will check the reference

As for the "[]" versus "()," the example you gave was with regards to
an array versus a function. Arrays use square brackets, but I believe
in IE6 they also can use parentheses. Still, for maximum
cross-browser-compatibility, I would stick to square brackets for
arrays. Functions always use parentheses, in all browsers.

This raises the question. What are the "standard" arrays known to HTML (or
should that be known to the DOM?)
I am thinking of code which I use such as:
document.forms['myForm'].no.focus()
document.images["Thumbs1"].src = Thumbnails
This implies that document.forms and document.images are arrays (as is
Thumbnails, but I defined this myself).

It would also be useful to know what are the standard functions
e.g. the code getElementById('slide') implies getElementById is a function

Is there a DOM reference which will list all these? (Perhaps I could/should
look in w3schools or the msdn reference above.)

This one I couldn't answer without looking at the code. I am not as
familiar with the type of code FrontPage writes as I am with coding
in general, as I am a programmer by trade, and use FrontPage not for
its bells and whistles, but for its excellent web mangagement and
HTML development tools. If you can provide a URL, I can take a look.

I too was a programmer, and I also mainly use FP for the things it does well
(e.g. publishing)
The FP preload function (I have renamed it) is:
//------------------------------
function preloadImgs()
{
var d = document, a = arguments
if(!d.imgs) d.imgs = new Array()
for (var i = 0; i < a.length; i++)
{ d.imgs = new Image
d.imgs.src = a }
}
//------------------------------

The JS code I am using is function chgImg(position) on
http://tandcl.homemail.com.au/scripts/slideshow.js
I just tried to access this in IE6 and got an error mesage saying can't
download, so the guts of the code follows

For this cut down code, assume chgImg() is called with the parameter '1'
(next) or '-1' (previous).
ss_ImgNum is a global variable
Slides is a global array of filenames (e.g. "pic1.jpg","pic2.jpg")
Captions is a global array of captions (e.g. "Sydney Harbour Bridge",
"Michelle at 5 months", etc.
//------------------------------
function chgImg(position)
{
if (!document.images) return
ss_ImgNum = (ss_ImgNum + position)
document.title = (ss_ImgNum + 1) + '/' + Captions.length + ' ' +
Captions[ss_ImgNum]
document.getElementById('slide').style.filter = "blendTrans(duration=3)"
document.images.slide.src = Slides[ss_ImgNum]
document.images.slide.title = Captions[ss_ImgNum]
if (document.all)
{ document.images.slide.filters[0].apply()
document.images.slide.filters[0].play() }
if (Math.abs(position) == 1)
preloadImgs(Slides[ss_ImgNum+1])
}
//------------------------------
HTML is in http://tandcl.homemail.com.au/slideshow.html but basically the JS
interacts with
<img id="slide" src="" alt="" title=""/>

So my question was:
Does transition only work during load, meaning that because the image has
been loaded, it doesn't work?

 

[Kevin Spencer]

Hi Trevor,

Good questions. I probably was not specific enough in my reply.

This raises the question. What are the "standard" arrays known to HTML (or
should that be known to the DOM?)
I am thinking of code which I use such as:
document.forms['myForm'].no.focus()
document.images["Thumbs1"].src = Thumbnails
This implies that document.forms and document.images are arrays (as is
Thumbnails, but I defined this myself).

The standard HTML Collections
(http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html#ID-1006298752)
are:

document:
----------
images
applets
links
forms
anchors

form:
--------
elements

select:
--------
options

table:
--------
rows
tBodies

tr:
--------
cells

map:
--------
areas

The following is not part of the DOM (window is above the DOM), but is
supported in all browsers:

window
--------
frames

Note that these are not the same as arrays, in that you can use an integer
or a string to reference an item in the Collection. In user-defined arrays,
you can only use the index (integer).

You may want to note that future versions of HTML will eliminate the name
attribute in favor of the id attribute, so the safest thing to do is to
assign both a name and id to any element you want to reference in a
Collection, and to give them the same string value. This is perfectly
"legal" to do, and will cause the reference to work in all present and
future browsers.

It would also be useful to know what are the standard functions
e.g. the code getElementById('slide') implies getElementById is a function

They are listed in the DOM reference below. document.getElementById(string)
is a function of the document object, which is quite often useful, as you
can assign an id attribute to any HTML element, and obtain a reference to it
in this way. Another useful one is document.getElementsByTagName(string),
which returns an array of all elements having a given tag name (e.g.
"TABLE").

Is there a DOM reference which will list all these? (Perhaps I
could/should look in w3schools or the msdn reference above.)
http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-html.html

The JS code I am using is function chgImg(position) on
http://tandcl.homemail.com.au/scripts/slideshow.js
I just tried to access this in IE6 and got an error mesage saying can't
download

Odd. When the exception occurred, I fired up Visual Studio.Net 2005, which
automatically loads all the included scripts, and it did. I checked the
URLs, and it is correct. however, for some reason, I was unable to obtain it
via IE (by typing in the URL).

HTML is in http://tandcl.homemail.com.au/slideshow.html but basically the
JS interacts with
<img id="slide" src="" alt="" title=""/>

So my question was:
Does transition only work during load, meaning that because the image has
been loaded, it doesn't work?

Well, you're mixing up a couple of things here. Filters and transitions are
2 different things. A transition is an IE effect that is applied to a page.
A filter is an IE-proprietary JavaScript object that is used to filter
images and other objects programmatically. You are not using transitions in
your slide show page. You are using JavaScript to create a slide show with
filters and pre-loaded images.

There are several bugs in your scripting. The first is caused by a script
that runs on load:

<script type="text/javascript">
var firstslide = qsobj(0)
var lastslide = qsobj(1)

window.onbeforeunload = unloadMess;
</script>

This calls the following function:

//-------------------------------
function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\+/g," ")) : null
}
//------------------------------

This function looks for parameters in the URL of the page, of which there
are none. This causes the error, since the script assumes that there are.

Since the code I posted first sets "firstslide" and "lastslide" and they are
both null because of the error, the following code fails also:

ss_ImgNum = (ss_ImgNum > (lastslide - 1)) ? (firstslide - 1)
: (ss_ImgNum < (firstslide - 1)) ? (lastslide - 1)
: ss_ImgNum

var w = 0 , h = 0 , top = 0
switch (Pictures[ss_ImgNum].substr(0,1))

ss_ImgNum is -1, and -1 is not an index into the Pictures array.

Seems I cautioned you about trying to write (or paste) a whole bunch of code
and then run it before. Tsk, tsk. As I recall, my admonition mentioned
something about how hard it is to find errors when you have so much code to
look through, and I mentioned something about "unit testing," that is,
testing little pieces, one at a time... As a retired developer, you ought to
know this, Trevor! I'm shocked! ;-)

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.

 

[Trevor L.]

Well, you're mixing up a couple of things here. Filters and
transitions are 2 different things. A transition is an IE effect that
is applied to a page. A filter is an IE-proprietary JavaScript object
that is used to filter images and other objects programmatically. You
are not using transitions in your slide show page. You are using
JavaScript to create a slide show with filters and pre-loaded images.

Sorry for my confusion. I think that using a filter is is what I want. I
will research what a transition does as another issue.

This function looks for parameters in the URL of the page, of which
there are none. This causes the error, since the script assumes that
there are.

When I call the code, it sets the two parameters. It is a bit complex:
album.html calls SetupSShow() in album.js and it calls slideshow.html with
the two parameters e.g. (1,38)

ss_ImgNum is -1, and -1 is not an index into the Pictures array.

ss_ImgNum is set to -1 initially because the first call to the function sets
it to zero or a positive number (e.g. ss_ImgNum + position, where position
is 1), at least that is what I intend.

Seems I cautioned you about trying to write (or paste) a whole bunch
of code and then run it before. Tsk, tsk. As I recall, my admonition
mentioned something about how hard it is to find errors when you have
so much code to look through, and I mentioned something about "unit
testing," that is, testing little pieces, one at a time... As a
retired developer, you ought to know this, Trevor! I'm shocked! ;-)

Thanks for the kindly warning. I tried to cut down the amount of code I
posted. You actually need to see (and know) the entire code for diagnosing
any errors and that is very time consuming. It was developed in stages and
doesn't return errors that I am aware of. Whenever I see errors in IE - the
little yellow triangle - I keep searching for and correcting errors until I
resolve the problem.

Yes, even as an active developer, I could sometimes charge ahead without
testing to death all posssibilities. Oh well, I got the job done most of the
time and I was always on hand to pick up on any remaining errors - I had the
luxury of being in-house: my clients were part of the same orgnanisation,
only a phone call or a minutes walk away in the same building

I am thinking that there may be too much code for an outsider not familiar
with it to comment

Is it still worth asking the (amended) question:
Does the filter effect only work when the images is loaded, meaning that
because the image has been preloaded, it doesn't work?
Interstingly the first time a new image is called for, there is a filter
effect, so maybe I am correct in this assumption

Again, many thanks for your time

 

[Kevin Spencer]

Hi Trevor,

Is it still worth asking the (amended) question:
Does the filter effect only work when the images is loaded, meaning that
because the image has been preloaded, it doesn't work?

I'm not sure I communicated well. Let me explain a bit further:

When I call the code, it sets the two parameters. It is a bit complex:
album.html calls SetupSShow() in album.js and it calls slideshow.html with
the two parameters e.g. (1,38)

I'm not sure what you mean by "when I call the code," but here's what I
meant about it expecting parameters:

function qsobj(parm)
{
var qpairs = document.location.search.substring(1).split("&")
var qvbl = qpairs[parm].split("=")
return qvbl[1] ? unescape(qvbl[1].replace(/%20|\+/g," ")) : null
}

This function looks at the URL of the page. In this case, the URL is:

http://tandcl.homemail.com.au/slideshow.html

The document.location property is the URL of the page. The "search" property
of the location object is the query string after the question mark (if any).
A URL can have parameters (query string) in it, which are name=value pairs.
The parameter list begins with a "?" character, and the name=value pairs are
separated by "&" characters. Example:

http://tandcl.homemail.com.au/slideshow.html?param1=this&param2=that

I'm not sure what it's looking for specifically, but it expects 2 parameters
(like I've illustrated above) to be in the string. I expect that the
parameter values are the names of the image files, the first and the last,
or their labels, I don't know for sure right now. In any case, as there are
no parameters, it throws an exception. The code that calls this function,

var firstslide = qsobj(0)
var lastslide = qsobj(1)

is 2 function calls, the first looking for the first parameter, and the
second looking for the second parameter. Since the first code failed, the
code calling it failed, and the whole mess came tumbling down.

I checked to see whether your image and related arrays had been populated,
and indeed they had.

Now, as to whatever might be going wrong after this, I cannot say. I can
assure you, however, that preloading the images is not going to preclude
using filters on them. The image object is an in-memory object, regardless
of whether it is loaded as an embedded image in the page, or whether it is
pre-loaded into the DOM via JavaScript. There is no difference. If, perhaps,
we could get past the initial error, I could debug further, and do some more
analysis for you, and I would be happy to.

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.

 

[Trevor L.]

Kevin,

This is a great intellectual exercise - how to communicate meaning purely by
written word, without the chance to interact directly while the
communication occurs - only after it has all been recieved. I am sure there
are many academic studies on this process, which would have a bearing on the
whole subject of Internet communication.
That's my philosophical rambling for today )

Replies in-line

I'm not sure what you mean by "when I call the code"

What I mean by "when I call the code," is this process:
"album.html calls SetupSShow() in album.js and it calls slideshow.html with
the two parameters e.g. (1,38)"

The word "calls" may not be correct in every case. album.html does indeed
call the function SetupSShow(). But this function executes a window.open of
slidehow.html with the two parameters attached
e.g.
window.open('slideshow.html?firstslide=1&lastslide=38','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=no')

The document.location property is the URL of the page. The "search"
property of the location object is the query string after the
question mark (if any). A URL can have parameters (query string) in
it, which are name=value pairs. The parameter list begins with a "?"
character, and the name=value pairs are separated by "&" characters.
Example:
http://tandcl.homemail.com.au/slideshow.html?param1=this&param2=that

Thanks for this explanation. I believe I did use these properties
correctly - I hope so, anyway ;-)
I wonder whether it would be possible to build into my code a test to see
whether the search string is present. I don't think I need it but it
wouldn't hurt to use such a test.

Now, as to whatever might be going wrong after this, I cannot say. I
can assure you, however, that preloading the images is not going to
preclude using filters on them. The image object is an in-memory
object, regardless of whether it is loaded as an embedded image in
the page, or whether it is pre-loaded into the DOM via JavaScript.
There is no difference. If, perhaps, we could get past the initial
error, I could debug further, and do some more analysis for you, and
I would be happy to.

As I said, I find no errors in the complete code, so I may work on why the
filter doesn't work. It may be completely unrelated to anything we have
looked into. The fact that it works at first and then not later may be a
clue.

 

[Kevin Spencer]

Hi Trevor,

It's a bit late for me tonight, but after seeing your post, I think I might
be able to check it out tomorrow by adding a couple of query string
parameters to the web site URL. If so, I can provide some further diagnosis.
But as I said, it's a little late for me this evening. Remind me tomorrow if
I forget!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.

 

[Kevin Spencer]

Hi Trevor,

I was able this morning to load the page with the URL
http://tandcl.homemail.com.au/slideshow.html?firstslide=1&lastslide=38. Then
I used the debugger in VS.Net 2005 to take a look at the code and how it
preloads the images. In fact, it doesn't. Instead, it creates an array of
strings, each containing a URL of an image. Then the image swapping routine
sets the "src" property of the image in the page to each of those strings,
in order. That is, rather than creating an array of Image objects, you're
creating an array of strings, and your page is loading each when it swaps
out the image in the page.

I did find a preload script that works in a similar way, in your
slidelist.js file:

//------------------------------
function preloadSlides()
{
var preload_Slides = new Array()
var preload_Thumbnails = new Array()

for (var i = 0; i < Pictures.length; i++)
{
preload_Slides = new Image()
preload_Slides.src = Slides

preload_Thumbnails = new Image()
preload_Thumbnails.src = Slides
}
}
//--------------------------------------
// preloadSlides()
//---------------------

Note the function call below the function definition, which is remarked out.
It is never called. The way this function works is to preload an array of
images which is scoped to the function. The effect of this is that, while an
array of Image objects is not retained, each image must be downloaded to
create the Image objects in the array, which results in their being cached.
If this function were called, the images would be cached, and the array of
string URLs would work, because the images, while not in an Image array,
would be cached on the client, and not require downloading.

There is another function defined in the "external.js" file:

//------------------------------
function preloadImgs()
{
var d = document,
a = arguments
if(!d.imgs)
d.imgs = new Array()
for (var i = 0; i < a.length; i++)
{ d.imgs = new Image
d.imgs.src = a }
}

It is never called, however, and I'm not entirely sure how well it would
work. I would have to research it, but, since it isn't used, I didn't.

The following is a link to an article about preloading images that you may
find helpful:

http://www.htmlite.com/JS020.php

I think I would go with an array of Image objects myself, as it would
preclude re-fetching images from the browser cache on the local machine, and
I believe result in better performance. This could be achieved with the
function that is being used, but putting the array it populates outside the
function, in global scope.

Let me know if you need any further help. And in case I don't hear from you
before the holidays, Merry Christmas!

--
HTH,

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.

 

[Trevor L.]

Kevin Spencer wrote lots of very good stuff, including:

I did find a preload script that works in a similar way, in your
slidelist.js file:
function preloadSlides()
........
It is never called
........
If this function were called, the images would be cached, and the array of
string URLs would work, because the images, while not in an Image array,
would be cached on the client, and not require downloading.

This is one which I had used in the past

There is another function defined in the "external.js" file:
function preloadImgs()

This is the standard FP_preloadImgs function.

The following is a link to an article about preloading images that
you may find helpful:

http://www.htmlite.com/JS020.php

Very useful, thank you. It reinforces what you have said, and this is
exactly what I need

I think I would go with an array of Image objects myself,

I have modified function preloadSlides() to only preload those images
required by each slideshow - there are 5 different ones at the moment; this
could/will expand in the future. With the modified function, the filters
works perfectly. I will be uploading to the web after I post this so you can
see my changes if you are interested.

My next project will be to frame all photos in a standard format so that all
fade in without altering the dimensions when a photo goes from vertical to
horizontal.
I'll place all in a 640*640 frame, so that I can fit 600*400, 400*600,
640*480 and 480*640.

Let me know if you need any further help.

I think all works well, now. Thank you for the interest you have shown and
the help you have given. It is really great to have a professional opinion,
and from a person who doesn't berate me too much for my lack of
knowledge

And in case I don't hear
from you before the holidays, Merry Christmas!

A Happy Christmas to you and yours as well, but I am sure I will be here
again in the next 3 weeks.

 

[Kevin Spencer]

Hi Trevor,

It is always a pleasure to help someone who can take the information I
provide and further his/her own self-education. I can see that you are well
on the way to becoming a JavaScript and DHTML wizard!

I'll try not to give you as hard a time in the future! ;-)

--

Kevin Spencer
Microsoft MVP
..Net Developer
You can lead a fish to a bicycle,
but you can't make it stink.