Je te donne tous les codes ici, si tu veux regarder par toi-même.
Donc j'ai mis ce code dans Templates - index_body
- Code:
-
<div class="cou">
<div id="Iconeimage1"></div>
<div class="cou-hidden">
LALALALALALALALA<br />
<img src="" /><br />
LILILILILILI
</div>
</div>
<div class="chat">
<div id="Iconeimage2"></div>
<div class="chat-hidden">
LALALALALALALALA<br />
<img src="" /><br />
LILILILILILI
</div>
</div>
<div class="serp">
<div id="Iconeimage3"></div>
<div class="serp-hidden">
LALALALALALALALA<br />
<img src="" /><br />
LILILILILILI
</div>
</div>
<div class="colo">
<div id="Iconeimage4"></div>
<div class="colo-hidden">
LALALALALALALALA<br />
<img src="" /><br />
LILILILILILI
</div>
</div>
<div class="infi">
<div id="Iconeimage5"></div>
<div class="infi-hidden">
LALALALALALALALA<br />
<img src="" /><br />
LILILILILILI
</div>
</div>
<div class="psy">
<div id="Iconeimage6"></div>
<div class="psy-hidden">
LALALALALALALALA<br />
<img src="" /><br />
LILILILILILI
</div>
</div>
<div class="gar">
<div id="Iconeimage7"></div>
<div class="gar-hidden">
LALALALALALALALA<br />
<img src="" /><br />
LILILILILILI
</div>
</div>
<div class="med">
<div id="Iconeimage8"></div>
<div class="med-hidden">
LALALALALALALALA<br />
<img src="" /><br />
LILILILILILI
</div>
</div>
</div>
Dans le CSS, j'ai mis ça :
- Code:
-
#Iconeimage1 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861095-couronne01.png);
width: 73px;
height: 72px;
position: relative;
top: -300px;
left: 20px;
}
#Iconeimage2 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861096-chat01.png);
background-repeat: no-repeat;
width: 56px;
height: 72px;
position: relative;
top: -373px;
left: 96px;
}
#Iconeimage3 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861097-serpent01.png);
background-repeat: no-repeat;
width: 55px;
height: 72px;
position: relative;
top: -446px;
left: 152px;
}
#Iconeimage4 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861095-colombe01.png);
background-repeat: no-repeat;
width: 38px;
height: 72px;
position: relative;
top: -514px;
left: 211px;
}
#Iconeimage5 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861096-infirmier01.png);
background-repeat: no-repeat;
width: 58px;
height: 72px;
position: relative;
top: -586px;
left: 250px;
}
#Iconeimage6 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861097-psychiatre01.png);
background-repeat: no-repeat;
width: 62px;
height: 66px;
position: relative;
top: -668px;
left: 313px;
}
#Iconeimage7 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861096-gardien01.png);
background-repeat: no-repeat;
width: 56px;
height: 72px;
position: relative;
top: -736px;
left: 378px;
}
#Iconeimage8 {
background: none;
background-image:url(http://image.noelshack.com/fichiers/2016/17/1461861095-medecin01.png);
background-repeat: no-repeat;
width: 48px;
height: 72px;
position: relative;
top: -810px;
left: 436px;
}
.cou {
position: relative;
cursor: pointer;
}
.cou .cou-hidden {
right:27px;
display: none;
position: absolute;
top: -450px;
left: 20px;
font-family: georgia;
border: 2px solid none;
border-radius: 5px;
background-color: red;
width: 465px;
height:145px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
.cou:hover .cou-hidden {
display: block;
}
.chat {
position: relative;
cursor: pointer;
}
.chat .chat-hidden {
right:27px;
display: none;
position: absolute;
top: -522px;
left: 20px;
font-family: georgia;
border: 2px solid none;
border-radius: 5px;
background-color: red;
width: 465px;
height:145px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
.chat:hover .chat-hidden {
display: block;
}
.serp {
position: relative;
cursor: pointer;
}
.serp .serp-hidden {
right:27px;
display: none;
position: absolute;
top: -594px;
left: 20px;
font-family: georgia;
border: 2px solid none;
border-radius: 5px;
background-color: red;
width: 465px;
height:145px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
.serp:hover .serp-hidden {
display: block;
}
.colo {
position: relative;
cursor: pointer;
}
.colo .colo-hidden {
right:27px;
display: none;
position: absolute;
top: -666px;
left: 20px;
font-family: georgia;
border: 2px solid none;
border-radius: 5px;
background-color: red;
width: 465px;
height:145px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
.colo:hover .colo-hidden {
display: block;
}
.infi {
position: relative;
cursor: pointer;
}
.infi .infi-hidden {
right:27px;
display: none;
position: absolute;
top: -738px;
left: 20px;
font-family: georgia;
border: 2px solid none;
border-radius: 5px;
background-color: red;
width: 465px;
height:145px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
.infi:hover .infi-hidden {
display: block;
}
.psy {
position: relative;
cursor: pointer;
}
.psy .psy-hidden {
right:27px;
display: none;
position: absolute;
top: -810px;
left: 20px;
font-family: georgia;
border: 2px solid none;
border-radius: 5px;
background-color: red;
width: 465px;
height:145px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
.psy:hover .psy-hidden {
display: block;
}
.gar {
position: relative;
cursor: pointer;
}
.gar .gar-hidden {
right:27px;
display: none;
position: absolute;
top: -876px;
left: 20px;
font-family: georgia;
border: 2px solid none;
border-radius: 5px;
background-color: red;
width: 465px;
height:145px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
.gar:hover .gar-hidden {
display: block;
}
.med {
position: relative;
cursor: pointer;
}
.med .med-hidden {
right:27px;
display: none;
position: absolute;
top: -948px;
left: 20px;
font-family: georgia;
border: 2px solid none;
border-radius: 5px;
background-color: red;
width: 465px;
height:145px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
text-align: center;
}
.med:hover .med-hidden {
display: block;
}
Si tu veux voir par toi-même en profondeur, tu as le mdp que je vais t'envoyer sur Skype.