PB CSS/HTML fonction onmouseover/onmouseout
cocomel
-
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
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 :
---------------------------------------------------------------------------------------------------------------------------
[b]HTML[/b]
<!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>
-------------------------------------------------------------------------------------------------------------------------------------------------------
[b]CSS[/b]
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
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 :
---------------------------------------------------------------------------------------------------------------------------
[b]HTML[/b]
<!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>
-------------------------------------------------------------------------------------------------------------------------------------------------------
[b]CSS[/b]
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
A voir également:
- PB CSS/HTML fonction onmouseover/onmouseout
- Fonction si et - Guide
- Editeur html - Télécharger - HTML
- Fonction miroir - Guide
- Fonction moyenne excel - Guide
- Excel remplir automatiquement une cellule en fonction d'une autre ✓ - Forum Excel
1 réponse
bonjour,
oubli ie 6 déjà... et ie tout cour si tu peux te le permettre
utilises firefox safari chrome ou opera
ie c'est de la merde regarde sur la page wikipédia les résultat à l'acid 3 test
https://fr.wikipedia.org/wiki/Acid3
personnellement j'ai moins opéra parce qu'il n'y a aucun moyen de le faire gérer border-radius pour l'instant
mon préféré étant firefox surtout pour certain add-on comme :
ad-block : qui bloque toutes les publicité
html validator : qui affiche directement le nombre d'erreur dans la page et fais gagner beaucoup de temps pour la validation w3c
firebug : qui permet de débugger le javascript entre autre
web developer : qui devient vite indispensable également
utiliser un de ces navigateurs est déjà plus pratique, rapide et sur que d'utiliser ie
mais surtout pour celui qui fait un site, ca permet de ne faire qu'un html, un css et ca simplifie énormément le javascript
surtout que si tu ne code que sous ie6 la plupart de tes visiteurs vont avoir des surprises !
oubli ie 6 déjà... et ie tout cour si tu peux te le permettre
utilises firefox safari chrome ou opera
ie c'est de la merde regarde sur la page wikipédia les résultat à l'acid 3 test
https://fr.wikipedia.org/wiki/Acid3
personnellement j'ai moins opéra parce qu'il n'y a aucun moyen de le faire gérer border-radius pour l'instant
mon préféré étant firefox surtout pour certain add-on comme :
ad-block : qui bloque toutes les publicité
html validator : qui affiche directement le nombre d'erreur dans la page et fais gagner beaucoup de temps pour la validation w3c
firebug : qui permet de débugger le javascript entre autre
web developer : qui devient vite indispensable également
utiliser un de ces navigateurs est déjà plus pratique, rapide et sur que d'utiliser ie
mais surtout pour celui qui fait un site, ca permet de ne faire qu'un html, un css et ca simplifie énormément le javascript
surtout que si tu ne code que sous ie6 la plupart de tes visiteurs vont avoir des surprises !
