Image transition effects on a web page.
Can view it with Internet Explorer.



Thanks to Holder for verification of the tutorial and the correction of the text.

Open a folder and name it: transition
You will find the zip file
here code_transition.
Unzip it and place the text in the folder: transition.
The code in the WordPad Editor.
This code allows us, depending on its configurations, to have different effects on an image.

To insert in a Web page.
(1) Open a folder in your site and place your image in GIF or JPEG (JPG).
(2) Open a new Web page and save it in the same folder where the image is found.
Obviously, this will be the source folder for linking to your image.

For an email.
Place an image in GIF or JPEG (JPG) in transition folder.
We will also find there the code_transition in WordPad.

In the example we will use the insertion in an email.
 

VIDEO

My transition folder has an image named: 1fille.
It is a 500 by 500 pixels 49 KB JPG image.
There is also the code_transition rtf text in WordPad

Let’s study the HTML code.

The code begins with  in blue, and it ends with in blue.
In Red, and located between two quotes, is the source of my image." "
Above we have this tag.

style = "FILTER: revealTrans (duration = 6, transition = 12); VISIBILITY: hidden"

These configurations (duration = 6, transition = 12) will give a “dissolving”
effect to the image.

First, what we need to change is the source image which is in red between quotes,
with the source of your image link.

To find your source link easily:
Open your email software. Here is Windows Mail.
Create a new message.
Select: View. Status bar: a check mark and edit source: checked.

In the status bar we have 3 tabs:
Edit, Source, Preview.
Select: Edit. Make a click in the body of the message.
Do: Insert, image. Find your folder: transition.
Select your picture. In my example is: 1fille. Open.

Select the source tab. We are in HTML.
Highlight the link source of your image located between the opening and closing
quotation marks.

Make a right click on the shaded in blue text. Choose: copy.
Find again the code_transition in WordPad, highlight the red text and the text
becomes shaded in blue.

Make a right click on the text and Paste.

That is done. Now you will paste the code into your message source.

Go to Edit and select all.
Edit/copy

Find the source of your message.

Position the cursor before the tag   and highlight everything until the end.
Make a right click on this text shaded blue, choose: Paste.

Select the Preview tab to see the result.
Return to the Edit tab to change the text, format it, or remove it.
In choosing: format, background we can insert a picture, a tile or a background color.

Select the Preview tab to view.

To change the effect on the image:
Select the Source tab.
Find the number after “duration” which is 6 and change to 4.
Duration is the speed.
Change the number of transition that is 12 to 10.
By changing the value of the transition, we have a different effect.
See Preview.

Return to the source and change the transition to 2.
See Preview.

Return to the source and change the transition to 22.
See Preview.
Finally... fun.Test other configurations.


Return to edit to send the message.
We do not see the effect in edit mode.

Below see a screenshot of the code.

Accueil

Galerie

Photos d'amis

PSP débutant

Namo

Les fonds de pages