[RESOLU] Petit problème de rollover

Bonjour,

Je suis en train de refaire mon site et en particulier la page "galeries", voici ce que ça donne pour l'instant :

http://thierry.chabenat.free.fr/galeries.php

Comme vous pouvez le voir, il y a 3 grosses icônes qui, lorsque l'on passe le curseur de la souris dessus s'allument, mais voilà, lorsque l'on passe le curseur sur l'une des sous-rubriques, la grosse icône s'éteint, je ne comprends pas pourquoi.

Alors voici mon code pour cette page :

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top">
    	<div align="center">
        	<a href="http://thierry.chabenat.free.fr/creations/peinture/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Peinture','','http://thierry.chabenat.free.fr/creations/images/peinture-over.png',1)"><img src="http://thierry.chabenat.free.fr/creations/images/peinture.png" name="Peinture" width="271" height="406" border="0" id="Design" /></a>
        <div id="peinture">
        	<table border="0" cellpadding="0" cellspacing="0">
            	<tr>
                	<td valign="top">
                      <a href="http://www.google.fr" target="_blank">Peintures sur bois</a> 
                      <br />
                      Peintures sur toile
                      <br />
                    Peintures sur papier 
                  </td>
                </tr>
            </table>
        </div>
        </div>
    </td>
    <td valign="top">
    	<div align="center">
        	<a href="http://thierry.chabenat.free.fr/creations/dessin/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Dessin','','http://thierry.chabenat.free.fr/creations/images/dessin-over.png',1)"><img src="http://thierry.chabenat.free.fr/creations/images/dessin.png" name="Dessin" width="271" height="406" border="0" id="Dessin" /></a>
        <div id="dessin">
        	<table border="0" cellpadding="0" cellspacing="0">
            	<tr>
                	<td valign="top">
                    Dessins aux stylos à bille
                    </td>
                </tr>
            </table>
        </div>
        </div>
    </td>
    <td valign="top">
    	<div align="center">
    		<a href="http://thierry.chabenat.free.fr/creations/infographie/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Infographie','','http://thierry.chabenat.free.fr/creations/images/infographie-over.png',1)"><img src="http://thierry.chabenat.free.fr/creations/images/infographie.png" name="Infographie" width="271" height="406" border="0" id="Infographie" /></a>
        <div id="infographie">
        	<table border="0" cellpadding="0" cellspacing="0">
            	<tr>
                	<td valign="top">
                    2D
                    <br />
                    3D
                    </td>
                </tr>
            </table>
        </div>
        </div>
    </td>
  </tr>
</table>

A tout hasard, le code CSS correspondant :

#dessin {
	top:-225px;
	left:-25px;
	position:relative;
}
#infographie {
	top:-225px;
	left:-85px;
	position:relative;
}

Peut-être pourriez-vous m'aider à maintenir éclairé les grosses icônes quand on passe le curseur sur une des sous rubriques présentes à l'intérieur.

En tout cas, merci d'avance pour votre aide.
Modifié par azaroth (25 Jan 2012 - 11:23)

Salut azaroth,

Je crois malheureusement que tout ton code est à revoir... Déjà l'utilisation des tableaux c'est un peu moisi et ensuite tu as une mise page assez simple mais tu te compliques la vie avec des positions relative qui n'ont rien à faire ici... Tu devrais faire simplement trois div en foat left et faire un hover dessus :

<div id="peintures"></div>
<div id="dessins"></div>
<div id="infographies"></div>

#peinture { 
float: left;
background: url(ton_image_de_fond.jpg);
}

#peinture:hover  {
background: url(ton_autre_image_de_fond.jpg);
}

Rien à voir mais je suis ultra-fan du graphisme !

Merci à vous deux, à toi hchtot pour ton aide technique, j'ai l'impression que j'avance bien et effectivement, le code est bien plus propre et merci à toi _laurent, je suis content que t'apprécie le design même si je suis bien loin d'avoir terminé.

Mon code ressemble à ça désormais :

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top">
    	<div align="center">
        	<a href="">/></a>
       		
            <div id="peinture">
        	
                      <a href="http://www.google.fr" target="_blank">Peintures sur bois</a> 
                      <br />
                      Peintures sur toile
                      <br />
                      Peintures sur papier 
    
       		 </div>
        </div>
    </td>
  </tr>
</table>

J'ai un soucis :
Lorsque je supprime la portion de code qui selon moi n'est plus utile :

<a href="">/></a>

Le rollover n'est plus actif dès lors que place le curseur de la souris se place sur le lien que j'ai mis. C'est pas logique mais c'est comme ça.

Sinon, j'ai modifié le CSS comme indiqué et ça semble très bien, ça ressemble à ça :

#peinture { 
	float: left;
	width:271px;
	height:406px;
	background: url(http://thierry.chabenat.free.fr/creations/images/peinture.png);
}
#peinture:hover {
	width:271px;
	height:406px;
	background: url(http://thierry.chabenat.free.fr/creations/images/peinture-over.png);
}

C'est ton <div id="boutons_menu"> qui est en position absolute et qui passe par dessus ton <div id="peinture">. Mets lui un top: -100px et tu verras que tu n'auras plus le problème.

Et enlève moi ces vilains tableaux !

Bon, je suis parti sur autre chose de plus simple et surtout qui a le mérite d'etre compatible avec n'importe quel navigateur, ça fonctionne bien mais voilà, je cherche à mettre une image de fond derrière la partie sur laquelle on est, voilà le code :

<style type="text/css">
<!--
#galeries {
	position:relative;
	z-index:1;
	left: 0px;
	top: -250px;
}

#apDiv1 { 
	float: left;
	width:926px;
	height:208px;
	background: url(http://thierry.chabenat.free.fr/galeries/images/fond.png);

}

#apDiv1:hover {
	width:926px;
	height:208px;
	background: url(http://thierry.chabenat.free.fr/creations/images/peinture-over.png);

}
-->
</style>


<br />
<table cellpadding="0" cellspacing="0" border="0" width="930" height="650" align="center">
	<tr>
   	  <td>
        <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fond','','http://thierry.chabenat.free.fr/galeries/images/fond-over.png',1)"><img src="http://thierry.chabenat.free.fr/galeries/images/fond.png" name="fond" width="926" height="208" border="0" id="fond" /></a>
        <div id="apDiv1">
          <div id="galeries">
            
            <p align="center">
            	<img src="http://thierry.chabenat.free.fr/templates/theme1/images/dessins.png" width="337" height="62" />
            </p>
            
            <p align="center">
				<?php
                $gallery = "1";
                include("/mnt/104/sdb/d/6/thierry.chabenat/galeries/gallery.php");
                ?>
            </p>
            
          </div>
        </div>
			<br />
        </td>
  </tr>
    <tr>
    	<td>
			<div align="center"><img src="http://thierry.chabenat.free.fr/templates/theme1/images/peintures.png" width="337" height="62" /></div><br />
			<?php
			$gallery = "2";
			include("/mnt/104/sdb/d/6/thierry.chabenat/galeries/gallery.php");
			?>        </td>
	</tr>
    <tr>
    	<td>
			<div align="center"><img src="http://thierry.chabenat.free.fr/templates/theme1/images/infographies.png" width="337" height="62" /></div><br />
			<?php
			$gallery = "3";
			include("/mnt/104/sdb/d/6/thierry.chabenat/galeries/gallery.php");
			?>        </td>
	</tr>
</table>

Je sais, j'ai mis un tableau et mon code est à revoir, je promet de bien le nettoyer en ne mettant que des DIV une fois que ça fonctionnera.

Merci d'avance.