|
|
|
|
|
|
|
Intro |
|
|
 Ce qu'il faut savoir pour une bonne mâitrise du script : (Lire Attentivement)
Prochainement, un descriptif des balises HTML avec exemples...
 Pour Colorer un texte on utilise la balise, <font color="#999999">Viperscott.fr</font>
Exemple : Viperscott.fr, Viperscott.fr, Viperscott.fr.
Pour personnaliser les vôtres, il vous suffit de remplacer #999999, par le nom d'une couleur en anglais, ou bien par un
Code Couleur.
Pour passer à la ligne en HTML, la balise est <br />
Pour afficher une images on utilise la balise, <img src="URL/URL/URL.jpg" />
Pour créer un lien sur un texte ou une image, on utilise la balise <a href="URL.html"></a>
Grâce à cette balise, plusieurs choses sont possibles, nous allons en voir quelques unes :
 <a href="URL.html">Cliquer IcI</a> est un lien texte normal.
<a target="_blank" href="URL.html">Cliquer IcI</a> permet d'ouvrir une nouvelle page.
<a border="1" href="URL.html"><img src="./images/puce/puce.gif"/></a> permet d'ajouter une bordure au lien.
Exemple :  | Image Normale :
Variante : <img border="1" src="./images/puce/puce.gif"/> Pour une image.
Exemple : | Image Normale :
La valeur de la bordure peut être changée selon votre choix...
C'est sur, en noir c'est po Zolie, changeons tout ça !
<img border="5" style="border-color:#999999" src="./images/puce/puce.gif"/> | Exemple :
Pour personnaliser les vôtres, il vous suffit de remplacer #999999, par le nom d'une couleur en anglais, ou bien par un
Code Couleur.
<img alt=" TEXTE DE REMPLACEMENT " border="1" src="./images/puce/puce.jpg"/> En cas D'Erreur ou pour les personnes mal voyante, le texte s'affiche... (ceci est aussi utilisé pour le référencement par les robots, ex: google :) )
Exemple : 
Pour Annoter votre code source, vous avez la possibilité de mettre des commentaires,
Pour cela, il existe des balises qui empêchent l'exécution du code à l'intérieur de celle-ci
| HTML : |
CSS : |
| Balise Ouvrante |
Balise Fermante |
Balise Ouvrante |
Balise Fermante |
| <!-- |
--> |
/* |
*/ |
Grâce à ces balises, vous pouvez Annoter un code rajouté de façon à le retrouver facilement en cas de modification, erreur,
suppression, ou tout simplement pour commenter votre code pour plus de clarté.
Exemple :
" <!-- ViperScott.Fr --> "
Cela donne :
" "
|
Je sais, vous allez me dire, pourquoi le premier apparait et pas l'autre, pourtant tu as écris
deux fois la même chose...
Heu, Oui et Non, pour afficher la balise sur le site "<!--" qui annule la suite,
il me faut taper le code HTML de "<" ce qui permet de ne pas annuler le code.
Po compris ?!? Regarde en dessous :)
|
Dernière chose TRÈS IMPORTANTE. Il vous faut 3 Images pour ce script.
Une petite, une moyenne et l'image en taille normale. (miniature, apercu et normal)
|
|
|
|
|
|
Partie 1 |
|
|
CODE CSS : A mettre le plus haut possible :) <body>
Le code peut être copier/coller, cf: Intro (" /* */ ")
<!-- PREMIERE PARTIE DE SCRIPT :) -->
<style type="text/css">
/* Credits: Dynamic Drive CSS Library */
/* URL: http://www.dynamicdrive.com/style/ */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /* FENETRE QUI APPARAIT */
position: absolute;
background-color: #eeeeff; /* Couleur de fond */
padding: 5px; /* Espacement entre la bordure et la photo a l'intérieur */
left: -1000px; /* Positionnement, mais bon pas trop besoin d'y toucher je pense */
border: 1px solid blue; /* Taille en pixel et couleur de la bordure */
visibility: hidden;
color: black; /* La couleur du texte */
text-decoration: none;
}
.thumbnail span img{ /* CSS Propriétés de l'image */
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /* CSS Pour L'apercu au survol de la souris */
visibility: visible;
top: 0;
left: 60px; /* Décalage de l'aperçu à l'horizontal :) */
}
</style>
<!-- PREMIERE PARTIE DE SCRIPT :) -->
|
|
|
|
|
|
Partie 2 |
|
|
CODE HTML : A mettre où vous voulez ;) <body>
Le code peut être copier/coller, cf: Intro ("<-- -->")
Ce n'est qu'une répétition de ce paragraphe (de 3 lignes) pour l'affichage d'une photo :)
<!-- DEUXIEME PARTIE DE SCRIPT :) -->
<div class="gallerycontainer"> <!-- DEBUT DE LA GALERIE -->
<a class="thumbnail" target="_Blank" href="./images/Script_Test/01.jpg">
<!-- l'URL de la grande image à ouvrir en cas de clic -->
<img style="border-color:#336699" border="1" alt="Retouche Photo" src="images/Script_Test/01_miniature.jpg" /><span>
<!-- la ligne pour la miniature -->
<img alt="Images 3D" src="./images/Script_Test/01_apercu.jpg" /><br /><font color="darkblue">http://viperscott.fr Picture ©</font></span></a>
<!-- la ligne pour l'apercu, avec le texte qui s'affiche en dessous de l'image :) -->
<a class="thumbnail" target="_Blank" href="./images/Script_Test/02.jpg">
<img style="border-color:#336699" border="1" alt="Retouche Photo" src="images/Script_Test/02_miniature.jpg" /><span>
<img alt="Images 3D" src="./images/Script_Test/02_apercu.jpg" /><br /><font color="darkblue">http://viperscott.fr Picture ©</font></span></a>
<br /> <!-- Passage à la ligne, bah vi normal, c'est marqué au dessus ;) -->
<a class="thumbnail" target="_Blank" href="./images/Script_Test/03.jpg">
<img style="border-color:#336699" border="1" alt="Retouche Photo" src="images/Script_Test/03_miniature.jpg" /><span>
<img alt="Images 3D" src="./images/Script_Test/03_apercu.jpg" /><br /><font color="darkblue">http://viperscott.fr Picture ©</font></span></a>
<a class="thumbnail" target="_Blank" href="./images/Script_Test/04.jpg">
<img style="border-color:#336699" border="1" alt="Retouche Photo" src="images/Script_Test/04_miniature.jpg" /><span>
<img alt="Images 3D" src="./images/Script_Test/04_apercu.jpg" /><br /><font color="darkblue">http://viperscott.fr Picture ©</font></span></a>
</div> <!-- FIN DE LA GALERIE -->
<!-- Si un problème persiste, contacter le Webmaster ^^ -->
<!-- DEUXIEME PARTIE DE SCRIPT :) -->
|
|
|
|
|
|
|
|
|
|
|
|
|
Si vous rencontrez des liens morts ou des images qui ne s'affichent pas, merci de me contacter... 
|
|
© Tout droit réservé - Viperscott.fr - Les textes et Images présentées sont la propriété de leurs auteurs et
ont été autorisés sur ce site.
|
|
|
|
|
|
|
|
Cartes de Visite 
Script Galerie D'images
|
