IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

[XHTML] Comment réaliser cette boite ?


Sujet :

HTML

  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut [XHTML] Comment réaliser cette boite ?
    Bonjour tout le monde.
    1/ Je suis allé sur un site de l'olympique de marseille.
    Et je voudrai savoir comment réaliser çà ( je vous explique d'abord et je vous donne l'adresse du site après ) :
    -lorsque l'on clique sur les onglets "Informations" ou "Historique" ou "Palmarès" ou "en quelques mots" il y a des informations qui apparaissent sans qu'aucune nouvelle page se charge et réaparait.
    -de plus c'est pas du Flash

    Je ne sais pas si je me suis bien exliqué.

    (Voici le lien : ICI

    2/ Autre remarque quand vous regardez sur le coté droit sous la photo du joueur il y a les 30 EUROS qui clignote sans utilisation de Flash.

    Merci à tous.

  2. #2
    Membre Expert
    Avatar de Crayon
    Inscrit en
    Avril 2005
    Messages
    1 811
    Détails du profil
    Informations personnelles :
    Localisation : Autre

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 811
    Par défaut
    Citation Envoyé par °°° Zen-Spirit °°°
    2/ Autre remarque quand vous regardez sur le coté droit sous la photo du joueur il y a les 30 EUROS qui clignote sans utilisation de Flash.
    Il s'agit d'un GIF animé: http://openad.tf1.fr/ads/RealMedia/a...07_120x600.gif

    Moi j'utilise Ulead Gif Animator pour faire animer mes images.

  3. #3
    Membre Expert
    Avatar de Crayon
    Inscrit en
    Avril 2005
    Messages
    1 811
    Détails du profil
    Informations personnelles :
    Localisation : Autre

    Informations forums :
    Inscription : Avril 2005
    Messages : 1 811
    Par défaut
    Citation Envoyé par °°° Zen-Spirit °°°
    Bonjour tout le monde.
    1/ Je suis allé sur un site de l'olympique de marseille.
    Et je voudrai savoir comment réaliser çà ( je vous explique d'abord et je vous donne l'adresse du site après ) :
    -lorsque l'on clique sur les onglets "Informations" ou "Historique" ou "Palmarès" ou "en quelques mots" il y a des informations qui apparaissent sans qu'aucune nouvelle page se charge et réaparait.
    -de plus c'est pas du Flash
    Il s'agit de script CSS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="dTab1-0">
    	<ul class="listonglet">
    		<li class="informations actif"><a href="#">Informations</a></li>
    		<li class="historique"><a href="#">Historique</a></li>
    		<li class="palmares"><a href="#">Palmar&egrave;s</a></li>
    		<li class="enquelquesmots"><a href="#">En quelques mots</a></li>
    		<li class="dTabPrevious prev on"><a href="#">&lt;</a></li>
    		<li class="dTabNext next on"><a href="#">&gt;</a></li>
    	</ul>
    </div>
    Pour plus de détail regarde le fichier css: http://www.om.net/style/std.css

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Salut tout le monde !
    Déjà, merci d'avoir répondu.
    Effectivement, j'auri du m'en rendre compte que c'était un gif pour l'image des 30 euros qui clignote.
    Concernant l'autre question, c'est pas simple de comprendre le fonctionnement.
    En fait c'est du script css ou javascript est ce que c'est la même chose
    ?
    Je suis toujours en train d'essayer de comprendre la réalisation du cadre avec des informations qui apparaissent .
    E fait surtout comment définir les limites du cadre autrement dit les dimensions du cadre dans lequel le texte va apparaitre.
    Puis quel est le code qui fait appel au texte à apparaitre.

    Merci à tous !

  5. #5
    Membre émérite Avatar de fallais
    Homme Profil pro
    Ingénieur systèmes et réseaux
    Inscrit en
    Juillet 2006
    Messages
    858
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur systèmes et réseaux

    Informations forums :
    Inscription : Juillet 2006
    Messages : 858
    Par défaut
    C'est pas du JavaScript ces onglets ?

    PS : http://www.fcna.fr en force

  6. #6
    Membre Expert
    Avatar de trotters213
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    2 571
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : France, Gard (Languedoc Roussillon)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 2 571
    Par défaut

    tu peux le faire avec un chouilla de Javascript et avec des CSS.
    Regarde sur le site de MTV .
    Voici la CSS de la barre de navigation en noir : http://www.mtv.com/sitewide/css/header.css et voici le code (juste celui du menu Music et News épuré) qu'ils utilise dans le fichier XHTML
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     
    <div id="hdr">
    <ul id="sitenav">
    <li id="n-main" class="stuck"><a href="/">Main</a></li>
    <li id="n-music"><a href="/music/">Music</a>
    <ul>
    <li><a href="/music/">Music Main</a></li>
    <li><a href="/music/video/">Music Videos</a></li>
     
    <li class="group"><a href="/music/hiphop/">Hip-Hop</a></li>
    <li><a href="/music/indie/">Indie</a></li>
    <li><a href="/music/pop/">Pop</a></li>
    <li><a href="/music/rock/">Rock</a></li>
    <li><a href="/music/soul/">Soul/R&amp;B</a></li>
     
    <li class="group"><a href="/music/artists/">Artists</a></li>
    <li><a href="/music/charts/">Charts</a></li>
    <li><a href="/music/downloads/">Downloads</a></li>
    <li><a href="/mtvradio/">Radio</a></li>
    <li><a href="/starmtv/ringtones/">Ringtones</a></li>
    <li><a href="/pmc/">Video Downloads</a></li>
    <li><a href="/rss/">RSS Feeds</a></li>
     
    </ul>
    </li>
     
    <li id="n-news"><a href="/news/">News</a>
    <ul>
    <li><a href="/news/">News Main: Headlines</a></li>
    <li><a href="/podcasts/">News on MTV Podcasts</a></li>
     
    <li class="group"><a href="/movies/news/">Movie News</a></li>
    <li><a href="/news/topics/f/feature_archive/">Interviews</a></li>
    <li><a href="/thinkmtv/"><font face="helvetica"><i>th<font size="2"><b>i</b></font>nk</i></font> MTV</a></li>
    <li><a href="/rss/">RSS Feeds</a></li>
    </ul>
    </li>
    Dans le fichier CSS, ils utilisent un attribut qui s'appelle sfhover qui est détecté par Firefox mais pas par IE donc dans ton doc XHTML tu dois rajouter cette fonction JS:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script type="text/javascript"><!--//--><![CDATA[//><!--
    sfHover = function() {
    var sfEls = document.getElementById("sitenav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>

  7. #7
    Membre confirmé
    Profil pro
    Inscrit en
    Mai 2006
    Messages
    199
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2006
    Messages : 199
    Par défaut
    Salut trotters213.
    meeci d'avoir répondu.
    J'ai passé l'après midi sur les codes dont tu m'as donné, mais j'ai pas saisi totalement.
    En fait ma question était : Comment faire çà ? :
    - Lorsque l'on clique sur les onglets "Informations" ou "Historique" ou "Palmarès" ou "en quelques mots" il y a des informations qui apparaissent sans qu'aucune nouvelle page se charge et réaparait.
    ICI le modèle
    Je vais reanalyser ton code.
    Merci tout de même.

Discussions similaires

  1. comment réaliser cette fonction
    Par michel71 dans le forum jQuery
    Réponses: 2
    Dernier message: 01/02/2011, 09h11
  2. comment réaliser cette jointure svp
    Par belaggoun2000 dans le forum Requêtes
    Réponses: 4
    Dernier message: 16/07/2010, 14h09
  3. Comment réaliser cette fonction ?
    Par PuNiShiM dans le forum Développement Web avec .NET
    Réponses: 3
    Dernier message: 24/03/2010, 09h36
  4. [XHTML] Comment Réaliser un pop-up modal ?
    Par skillipo dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 15/02/2008, 02h21
  5. Comment réaliser cette config multiboot Windows-Linux?
    Par _Alain_ dans le forum Autres Logiciels
    Réponses: 11
    Dernier message: 11/01/2006, 15h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo