Problème d'animation de barre menu...

Fermé
Swallowed - 11 sept. 2009 à 20:51
 swallowed - 19 sept. 2009 à 14:39
Bonjour,
J'ai un problème de code...
J'aimerais que mes images menu lorsque l'on passe dessus changent et qu'une autre image s'active (genre écriture bleu sur fond noir devient noir sur fond bleu) J'ai déjà tout dessiné sous un logiciel de graphisme et codé la page mais ça ne fonctionne pas...

ps: je suis hebergé chez Free. et le site à été fait (en petite partie) sous Nvu

Voilà le site:

http://iut.cjflash.free.fr/Cj-flash2.html

Et le code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  <html>
    <head>
      <style type="text/css">

body {color: white;background: #52616F;}
a { color: white; }
body
{
width:800px;
margin:auto;
margin-top:20px;
background-attachment:fixed;
}
}
/* L'en-tête */
#en_tete
{
width:800px;
height:300px;
margin:auto;
background-repeat:no-repeat;
margin-bottom:10px;
}
/* Le corps de la page */
#corps
{
margin:auto;
margin-bottom:20px;
padding:5px;
color:#B3B3B3;
background-color:#626262;
text-align:center;
background-image:url("http://iut.cjflash.free.fr/fondmac1.jpg");
background-repeat:repeat-x;
border:2px solid black;
}
#corps h1
{
color:#B3B3B3;
text-align:center;
font-family:Arial, "Arial Black", "Times New Roman", Times, serif;
}
#corps h2
{
height:30px;
background-repeat:no-repeat;
padding-left:30px;
color:#B3B3B3;
text-align:left;
}
/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */
#pied_de_page
{
padding:5px;
text-align:center;
color:#000000;
background-color:#;
background-image:url("http://iut.cjflash.free.fr/fond-pied-orange.png");
background-repeat:repeat-x;
border:2px solid black;
}
        </style>
      <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
      <title>Cj-flash</title>
      <script type="text/javascript"></script>
    <script type="text/javascript"></script>
  </head>
<body
 style="background-image: url(http://iut.cjflash.free.fr/joe-jonas-violet-abstract.jpg);">
<!--[if lt IE 7]-->
<div id="en_tete"><img
 style="width: 800px; height: 300px;" alt="cj flash"
 src="http://iut.cjflash.free.fr/bann1.png"><br>
</div>

/* La menu-bar animée */

<table align="center" border="0" cellpadding="0"
 cellspacing="0">
  <tbody>
    <tr>
      <td background="http://iut.cjflash.free.fr/a-bout.png"
 height="58" width="115"></td>
      <td><a href=""><img
 src="http://iut.cjflash.free.fr/a_accueil.png"
 onmouseover="http://iut.cjflash.free.fr/b-accueil.png'"
 onmouseout="http://iut.cjflash.free.fr/a_accueil.png'"
 border="0" height="58" width="57"></a></td>
      <td><a href=""><img
 src="http://iut.cjflash.free.fr/a-photos.png"
 onmouseover="http://iut.cjflash.free.fr/b-photos.png'"
 onmouseout="http://iut.cjflash.free.fr/a-photos.png'" border="0"
 height="58" width="56"></a></td>
      <td><a href=""><img
 src="http://iut.cjflash.free.fr/a-agenda.png"
 onmouseover="http://iut.cjflash.free.fr/b-agenda.png'"
 onmouseout="http://iut.cjflash.free.fr/a-agenda.png'" border="0"
 height="58" width="57"></a></td>
      <td><a href=""><img
 src="http://iut.cjflash.free.fr/a-equipe.png"
 onmouseover="http://iut.cjflash.free.fr/b-equipe.png'"
 onmouseout="http://iut.cjflash.free.fr/a-equipe.png'" border="0"
 height="58" width="57"></a></td>
      <td><a href=""><img
 src="http://iut.cjflash.free.fr/a-contact.png"
 onmouseover="http://iut.cjflash.free.fr/b-contact.png'"
 onmouseout="http://iut.cjflash.free.fr/a-contact.png'"
 border="0" height="58" width="56"></a></td>
      <td><a href=""><img
 src="http://iut.cjflash.free.fr/a-droit.png"
 onmouseover="http://iut.cjflash.free.fr/b-droit.png'"
 onmouseout="http://iut.cjflash.free.fr/a-droit.png'" border="0"
 height="58" width="56"></a></td>
      <td><a href=""><img
 src="http://iut.cjflash.free.fr/a-extra.png"
 onmouseover="http://iut.cjflash.free.fr/b-extra.png'"
 onmouseout="http://iut.cjflash.free.fr/a-extra.png'" border="0"
 height="58" width="57"></a></td>
      <td><a href=""><img
 src="http://iut.cjflash.free.fr/a-iut.png"
 onmouseover="http://iut.cjflash.free.fr/b-iut.png'"
 onmouseout="http://iut.cjflash.free.fr/a-iut.png'" border="0"
 height="58" width="57"></a></td>
      <td background="http://iut.cjflash.free.fr/b-bout.png"
 height="58" width="115"></td>
    </tr>
  </tbody>
</table>
<br>
<div id="corps">
<p style="width: 700px; text-align: center; font-weight: bold;"><big><big>Bienvenue
sur le site officiel
des CJ-Flash IUT Roubaix 2009!</big></big></p>
<big><big><span style="font-weight: bold;">Pourquoi
un site CJ-Flash?</span></big></big>
<p style="text-align: center;">Parce qu'au del&agrave;
de la <span style="font-weight: bold;">couverture
d'actualit&eacute;s et de l'information mensuelle sur les
&eacute;v&egrave;nements</span>&nbsp;&agrave;
vivre
&agrave; l'iut, <span style="font-weight: bold;">CJ
Flash a aussi un devoir de
m&eacute;moire.&nbsp;</span></p>
<p style="text-align: center;">Et quoi de mieux qu'un <span
 style="font-weight: bold;">site
web</span> pour <span style="font-weight: bold;">revivre</span>
au travers de
photos, accessibles de <span style="font-weight: bold;">n'importe
o&ugrave;</span>, les <span style="font-weight: bold;">meilleurs
moments</span>
de votre ann&eacute;e?&nbsp;</p>
<p style="text-align: center;">*
&nbsp;*&nbsp;&nbsp;*</p>
<p style="text-align: center;"></p>
<h2 style="text-align: center;">Le r&ocirc;le de
l'asso dans la vie quotidienne d'un CJ.</h2>
<p style="text-align: center;"><span
 style="font-weight: bold;">CJ flash est
avant tout orient&eacute; </span><span
 style="text-decoration: underline; font-weight: bold;">photographie</span>
(on en apprend tout les jours...). A notre charge donc de mettre en
place les trombi' de chaque groupe, de <span
 style="font-weight: bold;">couvrir les
&eacute;v&egrave;nements</span> intra
(conf&eacute;rences) et extra
(soir&eacute;es, voyages) scolaire, d'<span
 style="font-weight: bold;">immortaliser</span> ceux-ci
au
travers de clich&eacute;s disponibles ici m&ecirc;me. </p>
<p style="text-align: center;">Car nous savons
qu'&ecirc;tre au courant des
derni&egrave;res news &nbsp;de la vie &eacute;tudiante est
quelque chose de difficile &agrave; m&eacute;ler aux cours,
nous vous informerons mensuellement de l'actualit&eacute;
&eacute;venementielle au sein de l'iut sur ce site, dans la section
"Au programme" et &agrave; l'iut par un panneau recensant toutes
les nouveaut&eacute;s et manifestations durant le mois.</p>
</div>
<div style="font-weight: bold;" id="pied_de_page">
<div style="text-align: center;"><br>
Copyright "CJ-flash 2009", tous droits
r&eacute;serv&eacute;s.
</div>
</div>
</body>
</html>


Merci d'avance à tous!
(si il vous manque des détails je les ajouterai!)

(ps: Si jamais vous pouviez me donner un avis sur le site sachant que j'ai commencé il y a 2 semaines, ça serait cool^^)

4 réponses

Luan1604 Messages postés 130 Date d'inscription dimanche 6 septembre 2009 Statut Membre Dernière intervention 19 octobre 2009 4
12 sept. 2009 à 12:27
Bonjour,

Voir du côté de "hover" en css.

https://www.zonecss.fr/proprietes-css/hover-css-selector.html

Luan.
0
Vaut mieux privilégier le hover au css alors ^^
J'essaye ça et je te dit quoi.
Merci en tout cas!
0
(je veux dire privilégier le css au javascript...)
0
Bon finalement il ne manquait guère que la commande: "this.src" ... bref c'est réglé!
0