1 Javascript sur la PA 17/3/2010, 14:05
Stiich*
(Membre)
Bonjour,
Je rencontre quelque souci avec du java, je crois que le mieux est encore d'illustrer : http://japan.keuf.net/index.htm
Lorsque l'on survole l'un des boutons de la PA, une zone de texte s'ouvre, jusque-là tout est normal, seulement si je veux amener ma souris dans la dite zone, celle-ci disparait Pas très pratique donc quand on sait que je compte mettre des liens etc.
Ce que je voudrais c'est qu'en survolant un bouton la zone correspondante apparaisse, que je suis aller promener ma souris dessus, cliquer etc. et qu'elle disparaisse seulement quand je survole un autre bouton, qui lui laissera apparaisse la zone qui y correspond
Voilà... Est-il possible de réaliser cela ? Et si oui, comment faut qu'il procéder ? Je ne mis connais pas très bien en java et j'ai modifier un code trouvé sur le net (que je ne retrouve plus. malheureusement pour moi >.<) du coup je suis perdue
voici mes codes :
HTML (le rappel du java vient d'un autre forum à moi)
EDIT FB : Ajout du "spoiler" pour une meilleure lisibilité du tuto.
Je rencontre quelque souci avec du java, je crois que le mieux est encore d'illustrer : http://japan.keuf.net/index.htm
Lorsque l'on survole l'un des boutons de la PA, une zone de texte s'ouvre, jusque-là tout est normal, seulement si je veux amener ma souris dans la dite zone, celle-ci disparait Pas très pratique donc quand on sait que je compte mettre des liens etc.
Ce que je voudrais c'est qu'en survolant un bouton la zone correspondante apparaisse, que je suis aller promener ma souris dessus, cliquer etc. et qu'elle disparaisse seulement quand je survole un autre bouton, qui lui laissera apparaisse la zone qui y correspond
Voilà... Est-il possible de réaliser cela ? Et si oui, comment faut qu'il procéder ? Je ne mis connais pas très bien en java et j'ai modifier un code trouvé sur le net (que je ne retrouve plus. malheureusement pour moi >.<) du coup je suis perdue
voici mes codes :
HTML (le rappel du java vient d'un autre forum à moi)
- Spoiler:
- Code:
<script type="text/javascript" src="http://pokemon-khoto.forumactif.org/pagedaccueil-h3.htm"></script>
<table width="100%">
<tbody>
<tr>
<td style="font-family: Georgia;" width="20%"><div class="PA" onmouseover="javascript:showBienvenue()" onmouseout="javascript:hideBienvenue()">BIENVENUE</div></td>
<td style="font-family: Georgia;" width="20%"><div class="PA" onmouseover="javascript:showStaff()" onmouseout="javascript:hideStaff()">STAFF</div></td>
<td style="font-family: Georgia;" width="20%"><div class="PA" onmouseover="javascript:showPartner()" onmouseout="javascript:hidePartner()">AFFILIES ET REFERENCEMENT</div></td>
<td style="font-family: Georgia;" width="20%"><div class="PA" onmouseover="javascript:showCredits()" onmouseout="javascript:hideCredits()">CREDITS</div></td>
</tr><table>
<table width="100%">
<tbody>
<tr width=100%">
<td width="100%">
<div>
<div class="PA_1" id="Bienvenue" style="display: none;">M Y S T E R E</div>
<div class="PA_1" id="Staff" style="display: none;">H E LL U</div>
<div class="PA_1" id="Partner" style="display: none;">H E LL Ujhgfdsq</div>
<div class="PA_1" id="Credits" style="display: none;">tatti quanti</div>
</div>
</td>
</tr>
</tbody>
</table>
CSS relarif
- Code:
.PA {
background-color: #D1D3D2;
border-right: 5px solid #2C3F39;
border-left: 5px solid #2C3F39;
border-top: 1px dotted #2C3F39;
border-bottom: 1px dotted #2C3F39;
font-weight: bold;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
text-color: #FFFFFF;}
.PA_1 {
background-color: #D1D3D2;
border-right: 5px solid #2C3F39;
border-left: 5px solid #2C3F39;
border-top: 1px dotted #2C3F39;
border-bottom: 1px dotted #2C3F39;
font-weight: bold;
height:300px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 0px;
padding-right: 0px;
text-align: center;
text-color: #FFFFFF;}
.PA:hover {
border-right: 5px solid #000000 ;
border-left: 5px solid #000000 ;}
Javascript
- Code:
function showBienvenue(){
var objMysere = document.getElementById('Bienvenue');
if(objMysere){
objMysere.style.display = 'block';
}
}
function hideBienvenue(){
var objMysere = document.getElementById('Bienvenue');
if(objMysere){
objMysere.style.display = 'none';
}
}
function showStaff(){
var objMysere = document.getElementById('Staff');
if(objMysere){
objMysere.style.display = 'block';
}
}
function hideStaff(){
var objMysere = document.getElementById('Staff');
if(objMysere){
objMysere.style.display = 'none';
}
}
function showPartner(){
var objMysere = document.getElementById('Partner');
if(objMysere){
objMysere.style.display = 'block';
}
}
function hidePartner(){
var objMysere = document.getElementById('Partner');
if(objMysere){
objMysere.style.display = 'none';
}
}
function showCredits(){
var objMysere = document.getElementById('Credits');
if(objMysere){
objMysere.style.display = 'block';
}
}
function hideCredits(){
var objMysere = document.getElementById('Credits');
if(objMysere){
objMysere.style.display = 'none';
}
}
EDIT FB : Ajout du "spoiler" pour une meilleure lisibilité du tuto.