[XHTML] Comment réaliser cette boite ?

Version imprimable

06/09/2006, 20h39
°°° Zen-Spirit °°°

[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.
06/09/2006, 21h30
Crayon

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.

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:

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ès</a></li> <li class="enquelquesmots"><a href="#">En quelques mots</a></li> <li class="dTabPrevious prev on"><a href="#"><</a></li> <li class="dTabNext next on"><a href="#">></a></li> </ul> </div>
Pour plus de détail regarde le fichier css: http://www.om.net/style/std.css

07/09/2006, 17h11
°°° Zen-Spirit °°°

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 !
07/09/2006, 22h11
fallais

C'est pas du JavaScript ces onglets ?

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

:salut:
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:

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:

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>

08/09/2006, 20h19
°°° Zen-Spirit °°°

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.