Une modification... Bouton_activeUne modification... Bouton_hoverUne modification... Fb-hoverUne modification... Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Une modification... EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Une modification... EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Une modification... EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Une modification... EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Une modification... EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Une modification... EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Une modification... EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Une modification... EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment : -20%
Drone Dji DJI Mini 4K (EU)
Voir le deal
239 €

Partagez
 

Une modification...

Voir le sujet précédent Voir le sujet suivant Aller en bas 
http://yugioh-tagforce.frenchboard.com/
Mister-Kick
{ Membre }
{ Membre }

Masculin Messages : 7



Une modification... Empty
Voilà: une amie m'a passé un code de page d'accueil qui permet de créer plusieurs onglets pour changer l'information de la page d'accueil.
Mon problème c'est que la page ne change que par passage de souris et revient à l'origine lorsque la souris quitte l'onglet...
J'aimerais trouver un moyen de rendre "stable" la page: c'est à dire que quand je passerai ma souris ou cliquerai sur l'onglet, , ma page restera sur la page de l'onglet et ne changera que par clic sur un autre onglet.

Accessoirement j'aimerais que les onglets soient placés au dessus de la "page" qu'ils changent au lieu qu'ils soient à gauche...

Voici le code de base: (je précise l'auteur: Mr H):

Code:
/*---survol---*/
#drh{
background-color:#D1D7DC;
border:2px solid #5493B4;
font-size:12px;
padding-left:5px;
padding-right:5px;
padding-top:5px;
width:550px;
height:160px;
-moz-border-radius : 5px 5px 5px 5px;
-webkit-border-radius : 5px 5px 5px 5px;
}

.drh1{
border:1px solid #5493B4;
background-color:#D1D7DC;
-moz-border-radius : 5px 5px 5px 5px;
-webkit-border-radius : 5px 5px 5px 5px;
width:200px;
margin-bottom:5px;
}

.drh2{
width:200px;
height:50px;
border:0px solid #5493B4;
background-color:#;
-moz-border-radius : 5px 5px 5px 5px;
-webkit-border-radius : 5px 5px 5px 5px;
}

Code:
<html>
<head>
<script type="text/javascript">
function afficher(element){
  document.getElementById(element).style.display = "block";
}

function cacher(element){
  document.getElementById(element).style.display = "none";
}
</script>
</head>
<body>
  <table width="800"><tr><td width="200"><a href="#" onMouseOver="javascript:afficher('message1');" onMouseOut="javascript:cacher('message1');" >
      <input type="button" value="Onglet 1" class="drh1"/>
  </a><br>
 
  <a href="#" onMouseOver="javascript:afficher('message2');" onMouseOut="javascript:cacher('message2');" >
      <input type="button" value="Onglet 2" class="drh1" />
  </a><br>
 
  <a href="#" onMouseOver="javascript:afficher('message3');" onMouseOut="javascript:cacher('message3');" >
      <input type="button" value="Onglet 3" class="drh1" />
      </a><br>
 
  <a href="#" onMouseOver="javascript:afficher('message4');" onMouseOut="javascript:cacher('message4');" >
      <input type="button" value="Crédits" class="drh1" />
      </a>
 

  <div></td>
   
                <td width="600" rowspan="2"><div id="drh">
      <div id="message2" style="display: none;" >Contenu onglet 2</div>
      <div id="message1" style="display: none;" >Contenu onglet 1</div>
      <div id="message3" style="display: none;" >Contenu onglet 3</div>
      <div id="message4" style="display: none;" >Codage par Dr H pour l'Atelier<br><br>Codage en libre service<br>Merci de ne pas modifier cette partie<br><br></div>
      </div>
  </div></td></tr>
<td width="200" class="drh2"></td>
</table>
</body>
</html>

Un grand merci d'avance!
Si vous voulez des précisions, je suis à votre disposition Bravo !


Dernière édition par Mister-Kick le Sam 29 Jan 2011, 10:47, édité 1 fois
MessageSujet: Une modification...   Une modification... EmptySam 15 Jan 2011, 09:40
Revenir en haut Aller en bas
Invité
Invité




Une modification... Empty
Bonjour ^^

Pour ton problème de changement d'onglet, il te faudra rempalcer tous tes onMouseOut & onMouseOver, il me semble, par des onClik

^^

Et pour le second, tu pourrais afficher le résultat aussi ^^ ?
*A tous ses forums test d'occupé x_x *
MessageSujet: Re: Une modification...   Une modification... EmptyMer 19 Jan 2011, 12:37
Revenir en haut Aller en bas
Phantasmagoria
Phantasmagoria
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1636



Une modification... Empty
Bonsoir ^^

Le problème est-il toujours d'actualité? S'il est résolu je te prie d'éditer ton premier message et de cocher l'icône Une modification... Resolu

Merci Wink
MessageSujet: Re: Une modification...   Une modification... EmptyMar 25 Jan 2011, 19:06
Revenir en haut Aller en bas
http://elegance-design.forumactif.com
Sayuri
Sayuri
{ Membre }
{ Membre }

Féminin Messages : 179



Une modification... Empty
vu le problème je me permets de dire qu'il y a un tutoriel ici : http://www.css-actif.com/t4747-organisation-par-onglet
MessageSujet: Re: Une modification...   Une modification... EmptyJeu 27 Jan 2011, 18:06
Revenir en haut Aller en bas
http://yugioh-tagforce.frenchboard.com/
Mister-Kick
{ Membre }
{ Membre }

Masculin Messages : 7



Une modification... Empty
Merci à tous, ça va me servir pour un autre projet finalement =)
J'ai utilisé un autre code mais celui-là me sera tout de même utile! Merci à tous j'édite et je met résolu!
MessageSujet: Re: Une modification...   Une modification... EmptySam 29 Jan 2011, 10:46
Revenir en haut Aller en bas
Phantasmagoria
Phantasmagoria
{ Membre hyper-actif }
{ Membre hyper-actif }

Féminin Messages : 1636



Une modification... Empty
    Je classe Wink
MessageSujet: Re: Une modification...   Une modification... EmptySam 29 Jan 2011, 11:07
Revenir en haut Aller en bas
http://www.school-of-pub.net/forum.htm
Murtagh
Murtagh
{ Modérateur }
{ Modérateur }

Masculin Messages : 1492



Une modification... Empty
Bonjour ! Smile

Merci d'avoir édité le sujet. Smile Je déplace vu que c'est résolu. ^^
Bonne continuation ! Smile
MessageSujet: Re: Une modification...   Une modification... EmptySam 29 Jan 2011, 11:08
Revenir en haut Aller en bas
Contenu sponsorisé




Une modification... Empty
MessageSujet: Re: Une modification...   Une modification... Empty
Revenir en haut Aller en bas
 

Une modification...

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Modification
» Modification de mon qui est en ligne.
» Modification QUEEL
» Modification contours
» Modification possible sur un CSS [Résolu]

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: De la théorie à la pratique :: Aide CSS & xHTML :: Problèmes résolus-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit