BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] Bande d'images inter-actives
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] Bande d'images inter-actives

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] Bande d'images inter-actives
    Envoyé : 01 Mai 2018 à 13:25
Voici comment réaliser une bande de cinq images qui semblent interactives au passage du pointeur de la souris.

Affichage initial


Affichage sous le pointeur de la souris




É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. 

 






É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


Edité par Hobby001 - 01 Mai 2018 à 19:21
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Mai 2018 à 18:53
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 !!!
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Mai 2018 à 19:22
Très judicieux Maurice306, j'ai apporté quelques corrections.

Merci
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Maurice306 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Mai 2018 à 08:19
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 !!!
Haut de la page
thierry; allez vers le bas
Groupie
Groupie


Depuis le: 12 Feb 2017
Status: Inactif
Points: 42
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer thierry; Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 02 Mai 2018 à 10:43
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.
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.