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 à 19:15:02
Mouais, je pense qu'il y a un caractère de trop dans le tas :
Code :
|
Je te laisse deviner lequel ![[:dawa]](https://forum-images.hardware.fr/images/perso/dawa.gif "[:dawa]")
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
Sujets relatifs:
- faire un image et non pas un rendu HTML
- fonction columns
- [PHP] Extraire automatiquement une image d'un site (cf.Facebook share)
- Boite noir qui sui la souris sur une image
- Faire que le texte contourne l'image
- probleme avec fonction
- Firefox et une fonction javascript
- [Besoin d'aide] jQuery , cherche scroller image
- onmouseover sur un tr
- div afficher/masquer sur image interactive
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.
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