Imprimer la Page | Close Window

[Tuto] Bande d'images inter-actives

Imprimé depuis: openElement Website
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: http://forum.openelement.com/en/forum_posts.asp?TID=23318
Date: Sep 19 2019 à 10:34pm
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: [Tuto] Bande d'images inter-actives
Posté par: Hobby001
Sujet: [Tuto] Bande d'images inter-actives
Posté le: May 01 2018 à 12:25pm
Voici comment réaliser une bande de cinq images qui semblent interactives au passage du pointeur de la souris.

Affichage initial

http://zupimages.net/viewer.php?id=18/18/r8tt.png" rel="nofollow">

Affichage sous le pointeur de la souris

http://zupimages.net/viewer.php?id=18/18/5nfx.png" rel="nofollow">



Étape 1

Insérer un panneau d'éléments en mode "absolute" à l'endroit désiré et de la dimension désirée sur votre page.

Pour mieux vous repérer, ajoutez-y une couleur de fond gris pâle.

Étape 2

Insérer dans ce panneau un bloc de code visuel de largeur 100% et hauteur 100% dans ce panneau.
Ajouter le code suivant au bloc de code:


<ul class="allImg">
<li class="img01">
<a>
<span>Image 1</span>
</a>
</li>
<li class="img02">
<a>
<span>Image 2</span>
</a>
</li>
<li class="img03">
<a>
<span>Image 3</span>
</a>
</li>
<li class="img04">
<a>
<span>Image 4</span>
</a>
</li>
<li class="img05">
<a>
<span>Image 5</span>
</a>
</li>
</ul>

Notes: 

  1. <span>Image 5</span> signifie que Image 5 sera affiché sur l'image

  2. Remplacer <a>  par <a href="http://adresse_de_mon_site"> pour qu'un click conduise à un lien de votre choix.
Étape 3

Ajouter un bloc de code CSS en position header sur la page et y insérer le code suivant:


ul{
list-style-type: none !important;
padding:0;
margin:0;
}

/* Paramétrage des images */
.allImg{
height:100%;
padding-top:68px
}

.allImg ul,.allImg li{
height:100%
}

.allImg li{
float:left;
width:20%:                   /* paramètre pour 5 images */
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s;
position:relative
}

.allImg li:before{
content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.4);
z-index:2;
-webkit-transition:.5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition:.5s
}

.allImg li.hover{
width:40%;                       /* largeur de l'image élargie  */
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s
}

.allImg li.hover:before{
background:rgba(255,255,255,0);
-webkit-transition:.5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition:.5s
}

.allImg li.nothover{
width:15%;                   /* paramètre pour les 4 autres images non-élargies */
-webkit-transition:1s;
-moz-transition:1s;
-ms-transition:1s;
-o-transition:1s;
transition:1s
}

/* Sélection des images */

.allImg li.img01{
background:transparent url(/Files/Image/anana.jpg) center center no-repeat;
background-size:cover
}

.allImg li.img02{
background:transparent url(/Files/Image/hands.jpg) center center no-repeat;
background-size:cover
}

.allImg li.img03{
background:transparent url(/Files/Image/plage.JPG) center center no-repeat;
background-size:cover
}
.allImg li.img04{
background:transparent url(/Files/Image/show.jpg) center center no-repeat;
background-size:cover
}

.allImg li.img05{
background:transparent url(/Files/Image/maison.jpg) center center no-repeat;
background-size:cover
}


/* paramétrage du texte */

.allImg li a{
font-size:22px;
width:100%;
height:100%;
position:relative;
z-index:3;
text-align:center;
display:-webkit-flex;
-webkit-align-items:center;
display:flex;
align-items:center;
color:#fff;
text-transform:uppercase
}
.allImg li a span{
display:inline-block;
width:100%;
height:20px;
-webkit-transition:.5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition:.5s;
line-height:46px
}
.allImg li.hover span{
background-color:rgba(224,182,179,0.8);
-webkit-transition:.5s;
-moz-transition:.5s;
-ms-transition:.5s;
-o-transition:.5s;
transition:.5s;
height:40px;
font-weight:bold
}


Note:

Les images devront être importées via 
Onglet Projet
Bouton Ressources
Ajouter des fichiers

Puis elle devront être publiées avec le petit bouton montrant un cube gris avec une flèche vers le haut. 

  http://zupimages.net/viewer.php?id=18/18/9bym.png" rel="nofollow">






Étape 4

Ajouter un bloc de code javascript en position endbody sur la page et i insérer le code suivant:


$('li').on(
'mouseenter', function(){
$('li').addClass('nothover');
$(this).removeClass('nothover').addClass('hover');
}
).on('mouseleave', function(){
$(this).removeClass('hover');
$('li').removeClass('nothover');
}
);


2018-05-01, version originale par Hobby001
2018-05-01, révision selon les commentaires de Maurice306


-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. <a href="http://denislafrance.net" rel="nofollow">http://denislafrance.net</a>



Réponses:
Posté par: Maurice306
Posté le: May 01 2018 à 5:53pm
Bonjour Hobby001,

Pour les NULs c'est quoi sur la page (End Body; Start Body; Start Document; etc.) la position est multiple et pour un nul pas évident sauf à faire des tests Confused

En tout cas c'est superbe comme travail Clap

Bonne continuation Beer


-------------
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!


Posté par: Hobby001
Posté le: May 01 2018 à 6:22pm
Très judicieux Maurice306, j'ai apporté quelques corrections.

Merci


-------------
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. <a href="http://denislafrance.net" rel="nofollow">http://denislafrance.net</a>


Posté par: Maurice306
Posté le: May 02 2018 à 7:19am
C'est "Super" pour tous

Merci Hobby001, pour tous ceux qui lisent ce forum c'est un travail que beaucoup aimeraient réaliser, en tout cas surement utiliser dans leurs créations.

Très compréhensif, et clair comme explications.


-------------
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!


Posté par: thierry;
Posté le: May 02 2018 à 9:43am
Bonjour hobby,

comme a dit maurice, c'est super pour tous

et avec les précisions sur l'emplacement des codes, c'est top pour les nuls comme moi
encore merci pour ton intérêt a ce sujet et au partage de ton travail.



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk