Sujet Précédent Sujet Suivant

Au secours !! Besoin d'aide javascript/css

Fermé
roxanita06 Messages postés 26 Date d'inscription lundi 1 décembre 2008 Statut Membre Dernière intervention 31 janvier 2012 - 29 janv. 2012 à 01:02
roxanita06 Messages postés 26 Date d'inscription lundi 1 décembre 2008 Statut Membre Dernière intervention 31 janvier 2012 - 31 janv. 2012 à 02:15
Bonjour à tous !

Bon voilà je me lance, je fais mon premier site et je suis déjà confrontée au problème suivant :

J'ai une liste de lien et je souhaite faire apparaitre une div à la droite de cette liste qui est remplacée par une autre lorsque je fais un rollover sur les liens (chaque lien à une div correspondante) pour compliquer la chose j'aimerais que lorsqu'on clique sur le lien la div reste fixe mais disparait et est remplacée par une autre lorsque je continuer à survoler les liens... (jespère que je suis claire :-S )

Je me débrouille en .html et css mais pour le javascript c'est une autre histoire (je débute tout juste)...

J'ai trouvé un bout de code que j'ai adapté, voir mon exemple ici: http://www.piscodesign.com/dev1
Mais même si je me rapproche ce n'est pas encore l'effet escompté... J'ai mis tout le code javascript et css dans la même page pour que vous puissiez le voir.

La personne qui saura m'aider aura ma reconnaissance éternelle !!

Merci d'avance !!

Roxanita06

A voir également:

2 réponses

Réponse 1 / 2
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 30/01/2012 à 13:48
Salut,

Tu veux qqch dans le genre ? 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Dance Styles</title>
 
 <style type="text/css">
body {
  background-color: #6FF;
}

#imgstyles {
  float:left;
  width: 200px;
}
#txtstyles {
  float:right;
  width: 465px;
}
#col1liststyles
{
  width:160px;
  float: left;
}


#col2liststyles 
{
  width:465px;
  height:100%;
  float: right;
}
#content
{
  width:625px;
  }
 </style>
</head>

<body>
<div id="content">

<div id="col1liststyles">
                                    
                    <ul id="menu">
                                        
                    <li><a href="#baladi" style="color:red">BALADI</a></li>
                    <li><a href="#ballet" style="color:black">BALLET</a></li>
                    <li><a href="#breakdance" style="color:black">BREAK DANCE</a></li>
                    <li><a href="#capoeira" style="color:black">CAPOEIRA</a></li>
                    <li><a href="#contemporain" style="color:black">CONTEMPORAIN</a></li>
                  
                                      </ul>
                                    
                  </div>
                                    
                                    <div id="col2liststyles">
<div id="baladi" style="display:block">
  <div id="txtstyles">
    <ul>
<p>
  Le BALADI est une danse orientale très ancienne issue du Moyen-Orient et des pays arabes. De façon générale, cette danse se caractérise par la dissociation des parties du corps (isolations) qui peuvent bouger indépendamment l'une de l'autre. Cet art compose aussi bien avec les rythmes saccadés que lents et fluides. Elle s'accompagne de costumes spécifiques et peut utiliser divers accessoires tels un voile (ou un double voile), des ailes d'Isis (voile plissé) ou encore un éventail aux plumes...
</p>
<p>
  Les avantages du style:
  <li>+ Exotisme Oriental</li>
  <li>+ Sensualité des mouvements</li>
  <li>+ Magnificence des costumes</li>
</p>
</ul>
</div>
</div>
<div id="ballet" style="display:none">
<div id="txtstyles">
<ul>
<p>
  Le BALLET a vu le jour à la cour italienne de la Renaissance où les mariages étaient somptueusement célébrés. Les principes fondamentaux de la technique du ballet visent l'esthétique du danseur: attitude générale du corps, position adéquate, danse sur les pointes et souplesse. Afin de réaliser les numéros de danse les plus exigeants, le danseur semble défier les lois de la pesanteur. Ce style classique offre des performances techniques alliant grâce, souplesse et fluidité.
</p>
<p>
  Les avantages du style:
  <li>+ Technique des danseurs</li>
  <li>+ Pureté des mouvements</li>
  <li>+ Cachet du style classique</li>
  </p>
  </ul>
  </div>
  </div>
  <div id="breakdance" style="display:none">
  <div id="txtstyles">
  <ul>
  <p>
    La BREAK DANCE est un style de danse développé à New York dans le sud du quartier du Bronx dans les années 1970. Ce style est caractérisé par son aspect acrobatique et ses figures au sol. La break dance est une danse qui se pratique en solo ou en équipe. Les danseurs dansent chacun à leur tour : ils font des passages et effectuent diverses figures au sol des plus acrobatiques. Les équipes de break dance se défient lors d'une « Battle ».
  </p>
  <p>
    Les avantages du style:
    <li>+ Acrobaties au sol impressionnantes</li>
    <li>+ Créativité des mouvements</li>
    <li>+ Style jeune et urbain</li>
  </p>
  </ul>
  </div>
  </div>
  <div id="capoeira" style="display:none">
  <div id="txtstyles">
  <ul>
  <p>
    La CAPOEIRA est un art martial afro-brésilien qui puise ses racines dans les méthodes de combat et les danses des peuples africains du temps de l'esclavage au Brésil. Elle se distingue des autres arts martiaux par son côté dansé et souvent acrobatique. Les « joueurs » peuvent prendre position en appui ou en équilibre sur les mains pour effectuer des acrobaties. Jouée et/ou luttée à différents niveaux du sol et à différentes vitesses, elle est accompagnée par des instruments, des chants et des clappements de mains.
  </p>
  <p>
    Les avantages du style:
    <li>+ Côté tribal exotique</li>
    <li>+ Acrobaties impressionnantes</li>
    <li>+ Style rythmé et coloré</li>
  </p>
  </ul>
  </div>
  </div>
  <div id="contemporain" style="display:none">
  <div id="txtstyles">
  <ul>
  <p>
    Le CONTEMPORAIN. La danse aujourd'hui nommée danse contemporaine naît en Europe et aux États-Unis après la Seconde Guerre mondiale. Elle est l'art de raconter une histoire avec son corps. Elle peut emprunter tous les styles, et son style diffère à chaque danseur. Elle à pour but de communiquer un message, une émotion. Abordant les problématiques du mouvement et du corps en représentation, ce style explore les capacités de mouvement du corps et d'expression personnelle.
  </p>
  <p>
    Les avantages du style:
    <li>+ Peut faire passer un message</li>
    <li>+ Riche en émotions</li>
    <li>+ Créativité des mouvements</li>
  </p>
  </ul>
  </div>
  </div>
  </div>
  </div>
</body>
<script type="text/javascript">
  var Interface = [];
  Interface.menu = {
    menu: document.getElementById('menu'),
    activeElement: "baladi",
    _initialize: function(){
      this.addEventsListener();
      return this;
    },

    addEventsListener: function(){
      var submenu = this.getSubmenu();
      var items = submenu.length;
      var self = this;
      for(var i = 0; i < items; i++){
        submenu[i].addEventListener("click", function(event){self.displayClick(event)} , false);
        submenu[i].addEventListener("mouseover", function(event){self.displayOver(event)}, false);
        submenu[i].addEventListener("mouseout", function(event){self.displayOut(event)}, false);
      }
    },

    displayOver: function(event){
      var target = event.target.hash;
      var targetId = this.getId(target);
      this.hideBlocks();
      document.getElementById(""+targetId+"").style.display = 'block';
    },

    displayOut: function(event){
      this.hideBlocks();
      document.getElementById(""+this.activeElement+"").style.display = 'block';
    },

    displayClick: function(event){
      this.hideBlocks();
      this.resetLinksColor();

      event.target.style.color = 'red';
      var target = event.target.hash;
      var targetId = this.getId(target);
      this.activeElement = targetId;
      document.getElementById(""+targetId+"").style.display = 'block';
    },

    hideBlocks: function(){
      var submenu = this.getSubmenu();
      var items = submenu.length;
      for(var i = 0; i < items; i++){
        var targetId = this.getId(submenu[i].getElementsByTagName('a')[0].getAttribute('href'));
        document.getElementById(""+targetId+"").style.display = 'none';
      }
    },

    resetLinksColor: function(){
      var submenu = this.getSubmenu();
      var items = submenu.length;
      for(var i = 0; i < items; i++){
        submenu[i].getElementsByTagName('a')[0].style.color = 'black';
      }
    },

    getId: function(string){
      return string.substring(0, 0) + string.substring(0 + 1, string.length);
    },

    getSubmenu: function(){
      var submenu = this.menu.getElementsByTagName('li');
      return submenu;
    }

  };

  var menu = Interface.menu._initialize();

    
</script>
</html>
1
roxanita06 Messages postés 26 Date d'inscription lundi 1 décembre 2008 Statut Membre Dernière intervention 31 janvier 2012
31 janv. 2012 à 02:15
Woohoo !! Super méga génial !! C'est exactement ça que je veux !!! trop fort ! Je l'adapte et je vous poste le lien sous peu !
Merci encore !
Comme promis tu as ma reconnaissance éternelle !! ;)
0
Réponse 2 / 2
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 312
30 janv. 2012 à 10:37
Bonjour,

C'est un effet bien compliqué en effet... donc je ne suis pas sûr de comprendre. Le mieux serait de te donner des pistes et après tu pourrais voir sur Internet des exemples et tu sauras comme les adapter.

Le javascript te permet de mettre des petites fonctions sur des éléments (dont des boutons). Pour tes effets, tu vas avoir besoin des commandes : onclick, onmouseover et onmouseout.

Ensuite, pour les fonctions (c'est-à-dire afficher la div à droite), il y a plusieurs manières de faire. La mieux, c'est que tes div sont déjà présentes, mais sont cachées par le css (tu les fais apparaître en changeant le css du display ou visibility grâce au js).

Pour savoir sur quelle div on travaille, on utilise la commande getElementById['id_element'].

Mon conseil est de commencer par quelque chose de simple, parce que pour vous aider, ce n'est pas facile =)
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse