Constat
Nous nous sommes tous lancé(e)s dans les blogs, expression et moyen nouveau pour partager nos choix, sortir de notre isolement ou pour tout autre raison et puis, comme dans tout, dans ce
monde moderne qui bouge trop vite et nous fait ne plus nous attacher à ce que nous avons mais rechercher la nouveauté , les blogs ne nous amènent plus ce que nous avions cru y
trouver.
Ce serait peut-être un constat qu'il faudrait faire sur ce sujet et sur celui de nos conditions de vie; si elles sont devenues plus faciles, n'y avons pas perdu beaucoup ?
La société de consommation qui nous fait toujours miroiter autre chose de mieux n'est-elle pas en train de nous faire perdre nos raisons de vivre, d'aimer, de profiter de ce que nous
avons, du monde qui nous entoure ? Le voyons-nous d'ailleurs encore ou nos regards ne sont-ils déjà plus loin, vers des mirages ?
Reprenons notre montage pour ajouter une animation à chaque image; les positionnements sont faits et il n'y a plus qu'à écrire les codes d'animation pour chaque image dont l'adresse individuelle
apparait en fenêtre html.
Différentes possibilités:
- soit faire apparaitre l'image agrandie dans une fenêtre indépendante (pop-up), au clic ou au survol.
- soit faire une animation au survol de chaque image par les nouvelles possibilités de nos navigateurs.
- soit faire un lien, au clic ou au survol vers une page quelconque (net ou de notre blog)...vous savez faire !
Pour les deux premières photos sur la gauche, au clic et au survol, elles s'affichent au centre de l'écran en fenêtre indépendante; j'ai cliqué sur l'image dans l'article, pour la sélectionner;
j'ai utilisé l'icone maillon de chaine; choisi l'onglet pop-up, coché la case javascript, collé l'adresse de l'image dans la case adresse, indiqué ses dimensions dans les cases dimensions, écrit
"c" (centrée) dans les cases positionnement et validé.
Ceci a créé, en automatique dans la fenêtre html, le code pour ouvrir l'image au clic; <a onclick="window.open(...adresse image
Pour la première, j'ai modifié la < onclick=" par <a onmouseover=" et c'est devenu un affichage de la grande photo au survol...tout
simple, non ? La seconde restant au clic avec possibilté d'agrandissement par zone, selon position du curseur.
Pour la troisième (centrale), j'ai mis une animation (agrandissement=scale(échelle)) au survol, en lui donnant un nom (ph3) et en ajoutant
ces lignes de codes:
<img class="ph3" src="http://www.photo-libre.fr/paysage/Med/Rz_36.jpg" style="margin: 0px 0px -20px -100px; width: 200px; border: 4px solid
white;" />
<style><!--
.ph3 {
-webkit-transition: -webkit-transform 2s linear 0s;
-moz-transition: -moz-transform 2s linear 0s;
}
.ph3:hover {
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
--></style>
Pour la quatrième, je lui ai donné le nom: ph4 et ajouté ces lignes de code:
<img class="ph4" src="http://www.photo-libre.fr/paysage/Med/Rz_37.jpg" style="margin: 0px 0px -40px -110px; width: 200px; border: 4px solid
white;" />
<style><!--
.ph4 {
-webkit-transition: -webkit-transform 2s linear 0s;
-moz-transition: -moz-transform 2s linear 0s;
}
.ph4:hover {
-webkit-transform: scale(1.5) rotate(25deg) translate(0px, 20px);
-moz-transform: scale(1.5) rotate(25deg) translate(0px, 20px);
--></style>
La cinquième avec un autre nom (ph5) et une autre animation
<img class="ph5" src="http://www.photo-libre.fr/paysage/Med/Rz_54.jpg" style="margin: 0px 0px 15px -100px; width: 200px; border: 4px solid
white;" />
<style type="text/css"><!--
.ph5 {
border: 4px solid white;
-webkit-transition: -webkit-transform 2s linear 0s;
-moz-transition: -moz-transform 2s linear 0s;
}
.ph5:hover {
border:4px solid red;
-webkit-transform: scale(1.5) rotate(-35deg) translate(-120px, 20px) skew(15deg,15deg);
-moz-transform: scale(1.5) rotate(-35deg) translate(-120px, 20px) skew(15deg,15deg);
--></style>
