RESSOURCES |
Entre deux manifestations de sadisme inimaginables(que pourtant je vous laisserai imaginer), Youma Doom a décidé d'être gentille! J'offre donc quelques graphiques à qui en voudra bien, quelques fonds, séparateurs, modèles de bannières, et tout ce que je trouverai de valable. Si pour un matériel en particulier un code moins courant que les balises de base est nécessaire, je propose un script. Tout ce que j'ai mis ici a été créé par moi, vous êtes, bien entendu, libre d'utiliser tout le matériel désiré, à la condition que ce ne soit pas pour votre propre banque de graphiques. Un lien vers mon site en retour serait apprécié, mais bien sûr je ne peux pas vous y forcer.
Between two unimaginable acts of sadism(witch I'll let you imagine aniway), Youma Doom decided to be nice! So I offer a couple of graphics who whoever want of it, backgrounds, separators, banner models, and anything I'll come up with. If for some material a code less common than the basic tags is required, I provide an example script. Everything I've put here has been created by me, you are, of course, free to use anything as you want, at the condition that it's not for your own graphic library. A link to my site in return would be nice, but of course I can't force you.

Alphabets :
Ce ne sont pas des polices. Ce sont des documents image qui ne servent définitivement pas à remplacer du texte.
e premier est une série de lettres majuscules, elles servent comme début de chapitre, comme les livres antiques. Elles pourraient aussi servir à éppeler un mot ou deux comme titre, mais je les trouve plus jolies seules. Vous pouvez les télécharger individuellement à l'aide du bouton de droite de votre souris et de l'image de prévue, sinon une archive .zip les renferme tous.
Those aren't fonts. They're image documents, and not intended to replace text.
The first is a serie of capitalized characters, they're to be used at the beginning of chapters, like in the old books. They could be used to spell whole words, in a title by example, but I think they look better alone. You may download them individually by right-clicking on the preview image, or you can get them all at once in this .zip archive.
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
| Pour positionner l'image par rapport au texte comme dans le paragraphe précédent: | To position the image in the text in the paragraph above: |
| <IMG SRC="a.jpg" ALIGN="left"> | |
Le second alphabet est Japonais. Si le plus gros de votre site est français et vous vouliez ajouter quelques mots japonais sans forcer vos visiteurs à avoir un programme de support de texte pour visionner la page correctement, un document image est la solution. Je n'ai pas les kanji, bien sûr, j'aurais pris l'éternité à l'amasser! J'ai les katakana(pour mots étrangers comme français et anglais) et les hiragana(pour mots japonais). Il est facile de savoir lequel afficher même sans les connaître, le nom de document commence par h ou k, pour sélectionner l'alphabet, un trait d'union, puis la syllabe voulue et enfin l'extension, par exemple k-ka.gif sera la sylabe ka en katakana.
Je ne ferai pas d'image de prévue pour chaque caractère comme ci-haut, ça ferait près de 150 liens, j'en montre quelques-uns et l'ensemble est contenu dans un document .zip.
The second alphabet is japanese. If most of your site is english and you want to put a few japanese words without forcing your visitors to have a text support program to view it right, an image document is the solution. I don't have the kanji, of course, it would have taken the eternity to gather! I have katakana(for foreign words like english) and hiragana(for japanese words). Even without knowing them, it's easy to display them, the document name begins by h or k to choose the alphabet, then a -, then the sylab, and finally the extension. So k-ka.gif if the sound ka in katakana.
I'm not making a preview image as above, it would make almost 150 links, I'm just showing some and the whole thing is in a .zip file.











(I am Youma Doom)

Séparateurs :
Personnellement, j'en ai marre des séparateurs avec un petit personnage assis dessus. Ceux-ci sont sans thème, certains symétriques, d'autres sont dirigés vers le haut ou vers le bas. Ce sont tous des .gif transparents.
Personnally, I'm bored with separators with a little character sitting on it. These ones are themeless, some symetric and other turned up or down. They are all transpearant .gif.
![]()
Dorures/haut Dorures/bas Vigne roses/bas roses/haut Dentelle noire/bas Dentelle noire/haut

Fonds :
Les fonds sont aussi sans thème pour la plupart. Ceux qui sont ici sont de taille modeste et d'une couleur assez unie en général. La description des liens inclue la texture et la couleur moyenne de l'image. Avec explorer, le fond de la page changera et la série d'échantillons d'écriture à gauche montre la lisibilité de quelques couleurs sur le fond voulu. Un astérisque indique que le fond ne doit pas être utilisé dans une page où le texte est prédominant.
The backgrounds also don't have a theme for most. These are small and generally of a uniform color. The link description includes the texture and the average color of the image. With explorer, the page background changes and the colour samples on the left shows the legibility of some colours on the chosen background. A * indicates that the background isn't to be used on a page where there is mostly text.
|
Noir
| Feuille lignée/grisâtre--lined paper/grayish Démineur/brun--minesweeper/brown Dentelle/rose--Lace/pink Fractal/mauve foncé--fractal/dark mauve Dégradé/gris--fade/grey Colonne/gris--column/grey* Banane/jaune--banana/yellow Bois/beige--wood/beige Fractal/bleu--fractal/blue Lettres/rose--letters/pink Marbre/bleu--marble/blue Marbre/rouge--marble/red Marbre/vert--marble/green Papier/beige--paper/beige Cuir/brun--leater/brown Papier froissé/beige--wrinkled paper/beige |
Fonds, bordure :
Les fonds ci-haut s'appliquent à la page entière(ou à un tableau), mais qu'en est-il de ces fonds qu'on voit en bordure de certaines pages? Une erreur qu'on voit souvent est un énorme fond dont une partie unie plus large que l'écran afin qu'il ne se répète pas. C'est une erreur, il n'y a aucun autre mot pour désigner ça. Il existe un langage simple appelé Cascading Style Sheet(CSS). Si un navigateur ne le supporte pas, le fond s'affichera normalement, en se répétant.
Le code ci-dessous fonctionne, mais j'en ai enlevé l'instruction background-image: url(); vu un bogue qui empêche certaines versions d'explorer de le reconnaître. Utilisez plutôt la fonction normale du HTML "BACKGROUND", dans la balise <BODY>, en plus d'être plus simple elle permettra à explorer 5.5 de voir votre fond.
Si vous voulez utiliser deux images de fond, c'est toujours possible en mettant votre texte dans un tableau qui aura son propre fond.
The previous backgrounds are applied to the whole page(or a table), but what about those border backgrounds we often see? A common mistake is to use an enormous background including a huge uniform part to prevent the border image from repeating. A mistake, there is no other word to call that. There is a simple language called Cascading Style Sheet(CSS). If it isn't supported the background will simply display normally, repeating itself.
The code below functions, but I removed the instruction background-image: url (); due to a bug in some versions of explorer that doesn't recognize it. Instead, use the HTML function "BACKGROUND" in the <BODY> tag. Aside from being simpler, it allows explorer 5.5 to view it.
If you want to use two images, it's always possible by putting the text in a table witch have its own background image.
| Pour installer une image de fond en bordure gauche de l'écran : | To install a background in the left border of the screen: |
<STYLE TYPE="text/css">
body { background-color: #000000;
background-repeat: repeat-y;
background-attachment: fixed;
background-position: left; }
</STYLE>
Plus: <BODY ... BACKGROUND="x.jpg"> | |
Javascript :
Des codes! Des codes pour tout le monde!!! Ce sont des fonctions assez communes, rien d'extraordinaire, mais qui ont la propriété de fonctionner sur explorer et netscape, et qui sont en règle générale assez utiles sur un site web.
Codes! Codes for everyone!!! These are common functions, nothing extraordinary, bur they work on both explorer and netscape and they're generally useful enough on a website.
| Toutes les fonctions javascript doivent être inclues entre ces balises : | All javascript functions must be included between these tags: |
<SCRIPT LANGUAGE="JavaScript"> | |
Changement d'image...
document.nom et document[nom] ne veulent pas dire la même chose, le premier appelle l'objet nommé "nom" et le second l'objet dont le nom est contenu dans la variable "nom".
Lorsque vous y mettez la souris, l'image1 deviendra oui.gif et en l'enlevant, elle redeviendra non.gif. Lorsque vous cliquerez, vous irez à chez-vous.html normalement. Mais on n'a pas à créer une fonction pour un effet aussi simple.
L'effet sera en tout point identique. |
Change image...
document.nom and document[nom] don't mean the same thing, the first calls the object named "nom" and the second the object witch name is contained in the variable "nom".
When you point with the mouse, image1 becomes oui.gif and when you take out the mouse, it becomes non.gif again. When you click, you go to chez-vous.html normally. But for an effect that simple, creating a function isn't necessary.
It will do exactly the same. |
Animation
Le code précédent peut facilement créer une animation si la fonction se répète d'elle-même. La fonction suivante est une des plus simples, il suffit d'ajouter des "laquelle[]" selon le nombre d'images et de remplacer le 6 ci-dessous par ledit nombre. La vitesse ici est 250(une seconde = 1000), elle peut être changée sans problème. Notez qu'il vaut mieux mettre une copie de chaque image quelque part sur le document, en ajustant leur taille à un pixel par un (WIDTH et HEIGHT), elles seront pratiquement invisibles. Pour démarrer l'animation automatiquement, mettre ONLOAD="animation()" dans la balise BODY, sinon un lien pourrait avoir HREF="javascript:animation()" ou alors un INPUT un ONCLICK="animation()".
The previous code can easily create an animation if the function calls itself. The following function is of the simplest, you just need to add some "laquelle[]" as below for the number of images and change the 6 for that number. The speed here is 250(one second = 1000), it can be changed no problem. Note that it's better to put a copy of each image on the page, by adjusting their size(WIDTH and HEIGHT) to one pixel they'll be nearly invisible. To start the animation automatically, put ONLOAD="animation()" in the BODY tag, otherwise a link could have HREF="javascript:animation()" or an INPUT a ONCLICK="animation()".
var laquelle = new Array(); |
Anti-frames
Le script suivant n'est pas par moi, mais je le trouve très utile. Souvent des sites avec des cadres ont une page de liens, mais ces liens s'affichent à l'intérieur des cadres(pensez juste à hotmail)!!! Si un visiteur voit votre page dans un cadre, ce script l'en libérera. Remplacez mon adresse par la vôtre et le tour est joué!
This script isn't by me, but I find it very useful. Often sites with frames have a link page, but the links are opened in the frame(just think about hotmail)!!! If a visitor sees your page through frames, this script will free it. Replace my adress by yours and it'll work.
changePage() |
Ceci n'est bien évidemment pas un cours complet de javascript ou HTML! Ce n'étaient que des fonctions que j'utilise souvent. Si vous voulez des informations plus consistantes, les adresses suivantes seront plus utiles.
This doesn't intend to be a complete course of javascript or HTML. It was just some functions I use often. If you want more complete informations, the following adresses will be more useful.
Autre :
Seulement deux choses pour l'instant.
Un, l'image qui me sert le plus dans toutes mes présentations, un pixel transparent, en utilisant les propriétés WIDTH et HEIGHT, ça permet de réaliser un espacement, en plus de pouvoir servir avec un script de changement d'image si on veut que l'image "apparaîsse". Si vous regardez la source de cette page, vous verrez qu'elle sert ces deux usages. C'est plutôt pour vous donner l'idée que je la mets ici, je sais bien que n'importe qui peut en faire une pareille.
First an image I use very often in my presentations, a transpearant pixel, using the IDTH and HEIGHT properties, it can be used as a spacer or with an image changing script, if the second image have to "appear". If you look at the source of this page, you'll see I use both. It's more to give you the idea I'm putting it here, I know anyone can create a similar image.