[EDGE] Tags sur la page d'accueil

non pas vraiment fait en fonction des images

non pas vraiment fait en fonction des images

Ben quand même, c'est pas à moi de trouver le texte, les pieds ne me parlent pas moi

ok un texte unique ou un mot pour toutes les images c'est bon

J'ai déposé Photo comme texte,
exemple
Photo 1
Photo 2
etc etc

Chaque bouton est interprété ainsi à 15 reprises:

Code:


<div class="M14_tag_img un color-primary">
<img src="https://www.zupimages.net/up/20/04/hw9a.jpg" />    
<span>Photo 1</span>                                                              
</div>


Au clic sur le texte "Photo", l'image viendra s'afficher au dessus.


A l'extrême droite tu auras un bouton "Reset" qui masquera toutes les images.

Le style est intégré entre les balises:

Code:

<style> et </style>

Affichage/Page d'acceuil/Généralités/Message sur la page d'accueil

Déposes ceci:

Code:

<div id="M14_tag_img">
                                                                                                                            
 <div class="M14_tag_img un color-primary">
                                     <img src="https://www.zupimages.net/up/20/04/hw9a.jpg" />     <span>Photo 1</span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img deux color-primary">
                                <img src="https://zupimages.net/up/20/04/oboy.jpg" />                                     <span>Photo 2</span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img trois color-primary">
                              <img src="https://zupimages.net/up/20/04/4d4v.jpg" />                                     <span>Photo 3 </span>                                                                
 </div>
                                                                                                                            
 <div class="M14_tag_img quatre color-primary">
                     <img src="https://zupimages.net/up/20/04/ur15.jpg" />                                            <span>Photo 4 </span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img cinq color-primary">
                     <img src="https://zupimages.net/up/20/04/wnbm.jpg" />                                           <span>Photo 5</span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img six color-primary">
                      <img src="https://zupimages.net/up/20/04/azus.jpg" />                                           <span>Photo 6</span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img sept color-primary">
                      <img src="https://zupimages.net/up/20/04/uasj.jpg" />                                           <span>Photo 7</span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img huit color-primary">
                      <img src="https://zupimages.net/up/20/04/6eop.jpg" />                                           <span>Photo 8 </span>                                                                
 </div>
                                                                                                                            
 <div class="M14_tag_img neuf color-primary">
                      <img src="https://zupimages.net/up/20/04/nfk3.jpg" />                                           <span>Photo 9 </span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img dix color-primary">
                      <img src="https://zupimages.net/up/20/04/9qy0.jpg" />                                           <span>Photo 10</span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img onze color-primary">
                      <img src="https://zupimages.net/up/20/04/lmsj.jpg" />                                           <span>Photo 11</span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img douze color-primary">
                      <img src="https://zupimages.net/up/20/04/puao.jpg" />                                           <span>Photo 12</span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img treize color-primary">
                      <img src="https://zupimages.net/up/20/04/nvjh.jpg" />                                           <span>Photo 13 </span>                                                                
 </div>
                                                                                                                            
 <div class="M14_tag_img quatorze color-primary">
                      <img src="https://zupimages.net/up/20/04/f981.jpg" />                                           <span>Photo 14 </span>                                                              
 </div>
                                                                                                                            
 <div class="M14_tag_img quinze color-primary">
                      <img src="https://zupimages.net/up/20/04/9pv0.jpg" />                                           <span>Photo 15</span>                                                              
 </div>
              
 <div class="M14_tag_img reset color-primary">
       <span>Reset</span>                                                              
 </div>
                                                                                                                              
</div>
 <style>
#M14_tag_img{width:100%;padding:5px;text-align:center;}
.M14_tag_img{width:64px;height:20px;line-height:20px;display: inline-block;text-align:center;margin:2px;padding:2px;border-radius:4px;cursor:pointer;}
.M14_tag_img img
{
display:none;
position:absolute;
width:64px;
height:64px;
margin-top: -66px;
border-bottom: none;
margin-left: -1px;
border:1px solid #069;
}
.M14_tag_img span{color:white;}
</style><script>
jQuery(function(){
jQuery('.M14_tag_img:not(.reset)').find('span').each(function(){
var text =jQuery(this).text();
jQuery(this).hover(function(){

jQuery(this).text('Cliquez');
}, function(){
jQuery(this).text(text);
});});

jQuery('.M14_tag_img.reset').click(function(){
jQuery(this).closest('#M14_tag_img').find('img').fadeOut();});
jQuery('.M14_tag_img:not(.reset)').each(function(){
var infobulle=jQuery(this).find('span').text();
jQuery(this).find('img').attr('title',infobulle);
var color =jQuery(this).css('backgroundColor');
jQuery(this).find('img').css('borderColor',color);
jQuery(this).click(function(){
jQuery(this).find('img').slideToggle();});});

});
</script>

Penses a cliquer sur le bouton ;

Ou alors aussi celui-ci qui va te permettre de tout afficher en cliquant sur le bouton "+" et de tout masquer en cliquant sur le bouton "-":

Code:

<div id="M14_tag_img">
      
   <div class="M14_tag_affich color-primary" title="Tout afficher">
          <span>+</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img un color-primary">
                                              <img src="https://www.zupimages.net/up/20/04/hw9a.jpg" />    <span>Photo 1</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img deux color-primary">
                                          <img src="https://zupimages.net/up/20/04/oboy.jpg" />                                    <span>Photo 2</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img trois color-primary">
                                        <img src="https://zupimages.net/up/20/04/4d4v.jpg" />                                    <span>Photo 3 </span>                                                                   
   </div>
                                                                                                                                      
   <div class="M14_tag_img quatre color-primary">
                              <img src="https://zupimages.net/up/20/04/ur15.jpg" />                                            <span>Photo 4 </span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img cinq color-primary">
                              <img src="https://zupimages.net/up/20/04/wnbm.jpg" />                                          <span>Photo 5</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img six color-primary">
                                <img src="https://zupimages.net/up/20/04/azus.jpg" />                                          <span>Photo 6</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img sept color-primary">
                                <img src="https://zupimages.net/up/20/04/uasj.jpg" />                                          <span>Photo 7</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img huit color-primary">
                                <img src="https://zupimages.net/up/20/04/6eop.jpg" />                                          <span>Photo 8 </span>                                                                   
   </div>
                                                                                                                                      
   <div class="M14_tag_img neuf color-primary">
                                <img src="https://zupimages.net/up/20/04/nfk3.jpg" />                                          <span>Photo 9 </span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img dix color-primary">
                                <img src="https://zupimages.net/up/20/04/9qy0.jpg" />                                          <span>Photo 10</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img onze color-primary">
                                <img src="https://zupimages.net/up/20/04/lmsj.jpg" />                                          <span>Photo 11</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img douze color-primary">
                                <img src="https://zupimages.net/up/20/04/puao.jpg" />                                          <span>Photo 12</span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img treize color-primary">
                                <img src="https://zupimages.net/up/20/04/nvjh.jpg" />                                          <span>Photo 13 </span>                                                                   
   </div>
                                                                                                                                      
   <div class="M14_tag_img quatorze color-primary">
                                <img src="https://zupimages.net/up/20/04/f981.jpg" />                                          <span>Photo 14 </span>                                                                 
   </div>
                                                                                                                                      
   <div class="M14_tag_img quinze color-primary">
                                <img src="https://zupimages.net/up/20/04/9pv0.jpg" />                                          <span>Photo 15</span>                                                                 
   </div>
                        
   <div class="M14_tag_img reset color-primary" title="Tout masquer">
                <span>-</span>                                                                 
   </div>
                                                                                                                                        
</div>
 <style>
#M14_tag_img{width:100%;padding:5px;text-align:center;}
.M14_tag_affich,.M14_tag_img{width:64px;height:20px;line-height:20px;display: inline-block;text-align:center;margin:2px;padding:2px;border-radius:4px;cursor:pointer;}
.M14_tag_img img
{
display:none;
position:absolute;
width:64px;
height:64px;
margin-top: -66px;
border-bottom: none;
margin-left: -1px;
border:1px solid #069;
}
.M14_tag_img span{color:white;}
</style><script>
jQuery(function(){
jQuery('.M14_tag_img:not(.reset)').find('span').each(function(){
var text =jQuery(this).text();
jQuery(this).hover(function(){

jQuery(this).text('Cliquez');
}, function(){
jQuery(this).text(text);
});});
jQuery('.M14_tag_affich').click(function(){
jQuery(this).closest('#M14_tag_img').find('img').fadeIn();});
jQuery('.M14_tag_img.reset').click(function(){
jQuery(this).closest('#M14_tag_img').find('img').fadeOut();});
jQuery('.M14_tag_img:not(.reset)').each(function(){
var infobulle=jQuery(this).find('span').text();
jQuery(this).find('img').attr('title',infobulle);
var color =jQuery(this).css('backgroundColor');
jQuery(this).find('img').css('borderColor',color);
jQuery(this).click(function(){
jQuery(this).find('img').slideToggle();});});

});
</script>

bonjour Phil
c'est cool c'est ce que je voulais 
un grand merci 

Hello Emeline,
de rien chère amie.