décalage image lors de la fonction onmouseover/onmouseout

décalage image lors de la fonction onmouseover/onmouseout - HTML/CSS - Programmation

Marsh Posté le 04-01-2010 à 13:11:30    

Bonjour,
je débute dans la création de site web et je me retrouve face à un petit problème de décalage d'image lors de l'ajout de fonction onmouveover/onmouveout.
un petit trait apparait entre mes boutons de sous-menus (utilisés en .jpg),créant un décalage, alors que je n'ai aucun padding, ni bordure. :pt1cable:  
je pense qu'il s'agit d'un problème de pré-formatage htlm ou css.
quelqu'un pour m'aider?
 
je vous joint les codes :  
---------------------------------------------------------------------------------------------------------------------------
HTML
 
<!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=iso-8859-1" />
<title>index</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.Style3  
 {
 font-family: "Times New Roman", Times, serif;
 font-size: 13px;
 }
 
-->
</style>
</head>
 
<body>
 
<div id="bannière">
 <div class="version">
   <div align="right" class="Style3"> <u>Version française</u> / <u>English version</u></div>
 </div>
</div>
 
 
<div id="menu_top">
 
<script type="text/javascript">
function afficheimage (adr_img,url_img,larg,haut)
 {
 document.images [adr_img].src = url_img;
 document.images [adr_img].width = larg;
 document.images [adr_img].height = haut;
 }
</script>
 
   
 <a href=""  
 onmouseover="afficheimage('0','images/intro/bt_accueil_neg.jpg','228','28')"  
 onmouseout="afficheimage('0','images/intro/bt_accueil.jpg','228','28')"/>
  <img src="images/intro/bt_accueil.jpg" alt="indisponible" width="228" height="28" border="0"/>  
 </a>
 <a href=""  
 onmouseover="afficheimage('1','images/intro/bt_intro_neg.jpg','125','28')"  
 onmouseout="afficheimage('1','images/intro/bt_intro.jpg','125','28')"/>
  <img src="images/intro/bt_intro.jpg" alt="indisponible" width="125" height="28" border="0"/>  
 </a>
 <a href=""  
 onmouseover="afficheimage('2','images/intro/bt_projets_neg.jpg','124','28')"  
 onmouseout="afficheimage('2','images/intro/bt_projets.jpg','124','28')"/>
  <img src="images/intro/bt_projets.jpg" alt="indisponible" width="124" height="28" border="0"/>  
 </a>
 <a href=""  
 onmouseover="afficheimage('3','images/intro/bt_portfolio_neg.jpg','123','28')"  
 onmouseout="afficheimage('3','images/intro/bt_portfolio.jpg','123','28')"/>
  <img src="images/intro/bt_portfolio.jpg" alt="indisponible" width="123" height="28" border="0"/>  
 </a>
 <a href=""  
 onmouseover="afficheimage('4','images/intro/bt_contact_neg.jpg','177','28')"  
 onmouseout="afficheimage('4','images/intro/bt_contact.jpg','177','28')"/>
  <img src="images/intro/bt_contact.jpg" alt="indisponible" width="177" height="28" border="0"/>  
 </a></div>
 
 
 
<div id="corps">
 <div class="texte">
   <div align="left"></div>
 </div>
</div>
 
 
<div id="bas">
 <div class="droits">
   <div align="right" class="Style3">
     <div align="center">Tous Droits Réservés - Reproduction Inderdite - 2009 - Copyright ***.fr</div>
   </div>
 </div>  
</div>
</body>
 
</html>
-------------------------------------------------------------------------------------------------------------------------------------------------------
CSS
 
body{
 margin-top:0px;
 margin-bottom:0px;
 }
 
#bannière
 {
 background:url(images/banniere.jpg);
 width:800px;
 height:164px;
 background-position:top;
 background-position:center;
 background-repeat:no-repeat;
 margin:auto;
 }
.version
 {
 padding-right:40px;
 padding-top:5px;
 
 }
 
#menu_top  
 {
 width:810px;
 height:28px;
 margin:auto;
 padding:0px;
 }
 
#corps
 {
 background:url(images/fond.jpg);
 width:608px;
 height:353px;
 background-position:center;
 background-repeat:no-repeat;
 background-attachment:scroll;
 background-attachment:fixed;
 margin:auto;
 margin-top:25px;
 }
.texte
 {
 width:558px;
 height:353px;
 padding-top:15px;
 padding-bottom:15px;
 padding-right:35px;
 padding-left:20px;
 text-align:justify;
 }
 
 
.barre
 {
 width:30px;
 height:353px;
 overflow:scroll;
 }
 
 
#bas
 {
 background:url(images/bas.jpg);
 width:800px;
 height:34px;
 background-position:bottom;
 background-position:center;
 background-attachment:fixed;
 margin:auto;
 margin-top:25px;
 }
.droits
 {
 padding-top:10px;
 }
----------------------------------------------------------------------------------------------------------------------------------------------
merci d'avance et à bientôt :hello:

Reply

Marsh Posté le 04-01-2010 à 13:11:30   

Reply

Marsh Posté le 04-01-2010 à 19:15:02    

Mouais, je pense qu'il y a un caractère de trop dans le tas :
 

Code :
  1. <a href="" 
  2. onmouseover="afficheimage('0','images/intro/bt_accueil_neg.jpg','228','28')" 
  3. onmouseout="afficheimage('0','images/intro/bt_accueil.jpg','228','28')"/>


 
Je te laisse deviner lequel  [:dawa]

Reply

Marsh Posté le 06-01-2010 à 10:49:09    

Et utilise les CSS stp, ça fera moins dégueulasse que ton JS moisi


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed