A voir également:
- Bloc image bouge dans dreamweaver
- Image en 3d qui bouge - Télécharger - Thèmes & Fonds d'écran
- Bloc-notes (windows) - Télécharger - Traitement de texte
- Insérer une image dans word sans bouger le texte - Guide
- Image iso - Guide
- Reduire taille image - Guide
5 réponses
Par défaut un lien est souligné, et si le lien est une image, cette image est entourée d'un cadre de 1px de couleur bleue (la couleur par défaut pour les liens dans dw). Selon ta mise en page et la taille des éléments autour de l'image, ça fait 1 pixel de plus de chaque côté de l'image. Donc ces 2 pixels (en tout, un par côté) peuvent faire bouger toute ta page.
Si tu ne veux pas de cadre autour de des images-liens, il faut indiquer une règle. Soit dans ton css, soit directement dans le code.
Par exemple dans ton code, ça donnera ça :
<a href="//www.tonlien.com"><img src="tonserveur/images/tonimage.gif" style="border:none" width="420" height="107" /></a>
C'est le style="border:none" qui empêchera l'encadrement de ton image.
Si tu ne veux pas de cadre autour de des images-liens, il faut indiquer une règle. Soit dans ton css, soit directement dans le code.
Par exemple dans ton code, ça donnera ça :
<a href="//www.tonlien.com"><img src="tonserveur/images/tonimage.gif" style="border:none" width="420" height="107" /></a>
C'est le style="border:none" qui empêchera l'encadrement de ton image.
Ce n'est pas parce que ce n'est pas écrit que ça ne s'interprete pas (adage du navigateur web casse c....).
Par exemple, les marges qui ne sont pas clairement mentionnées à 0px sont quand même intégrées par ie (exemple au hasard). En effet, ie met des marges par défaut si on ne lui dit pas que la marge =0px. Idem pour la plupart des balises... un vrai bonheur lool.
Pour ton code au survol, faudrait que tu le montres ici, car normalement l'image de départ doit revenir dès que la souris n'est plus dessus....
Par exemple, les marges qui ne sont pas clairement mentionnées à 0px sont quand même intégrées par ie (exemple au hasard). En effet, ie met des marges par défaut si on ne lui dit pas que la marge =0px. Idem pour la plupart des balises... un vrai bonheur lool.
Pour ton code au survol, faudrait que tu le montres ici, car normalement l'image de départ doit revenir dès que la souris n'est plus dessus....
voci une copie des codes, ce sont des onglets survolé
(l'image survolée se nomme "bis")
1 page test visible sur le site internet
www.lsalloys.com
page "team"
rubrique "chemin du soleil"
<tr>
<td colspan="10">
<img src="images/pageteamcristalp_01.jpg" alt="" width="612" height="98" border="0" usemap="#Image1Map" id="Image1"></td>
<td colspan="3">
<img src="images/pageteamcristalp_02.jpg" width="205" height="98" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="98" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/pageteamcristalp_03.jpg" width="205" height="495" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/pageteamcristalp_04.jpg" width="123" height="59" alt=""></td>
<td><a href="../../page1/Page-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','images/pageteamcristalp_05bis.jpg',1)"><img src="images/pageteamcristalp_05.jpg" name="Image46" width="56" height="31" border="0"></a></td>
<td><a href="../../page2/Page-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image47','','images/pageteamcristalp_06bis.jpg',1)"><img src="images/pageteamcristalp_06.jpg" name="Image47" width="86" height="31" border="0"></a></td>
<td><a href="../../page6/Page-6.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image48','','images/pageteamcristalp_07bis.jpg',1)"><img src="images/pageteamcristalp_07.jpg" name="Image48" width="75" height="31" border="0"></a></td>
<td colspan="2"><a href="../../page9/Page-9.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image49','','images/pageteamcristalp_08bis.jpg',1)"><img src="images/pageteamcristalp_08.jpg" name="Image49" width="43" height="31" border="0"></a></td>
<td colspan="2"><a href="../../page10/Page-10.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image50','','images/pageteamcristalp_09bis.jpg',1)"><img src="images/pageteamcristalp_09.jpg" name="Image50" width="54" height="31" border="0"></a></td>
<td><a href="../../page11/Page-11.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image52','','images/pageteamcristalp_10bis.jpg',1)"><img src="images/pageteamcristalp_10.jpg" name="Image52" width="97" height="31" border="0"></a></td>
<td><a href="../../page12/Page-12.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image51','','images/pageteamcristalp_11bis.jpg',1)"><img src="images/pageteamcristalp_11.jpg" name="Image51" width="78" height="31" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
(l'image survolée se nomme "bis")
1 page test visible sur le site internet
www.lsalloys.com
page "team"
rubrique "chemin du soleil"
<tr>
<td colspan="10">
<img src="images/pageteamcristalp_01.jpg" alt="" width="612" height="98" border="0" usemap="#Image1Map" id="Image1"></td>
<td colspan="3">
<img src="images/pageteamcristalp_02.jpg" width="205" height="98" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="98" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/pageteamcristalp_03.jpg" width="205" height="495" alt=""></td>
<td colspan="3" rowspan="2">
<img src="images/pageteamcristalp_04.jpg" width="123" height="59" alt=""></td>
<td><a href="../../page1/Page-1.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image46','','images/pageteamcristalp_05bis.jpg',1)"><img src="images/pageteamcristalp_05.jpg" name="Image46" width="56" height="31" border="0"></a></td>
<td><a href="../../page2/Page-2.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image47','','images/pageteamcristalp_06bis.jpg',1)"><img src="images/pageteamcristalp_06.jpg" name="Image47" width="86" height="31" border="0"></a></td>
<td><a href="../../page6/Page-6.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image48','','images/pageteamcristalp_07bis.jpg',1)"><img src="images/pageteamcristalp_07.jpg" name="Image48" width="75" height="31" border="0"></a></td>
<td colspan="2"><a href="../../page9/Page-9.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image49','','images/pageteamcristalp_08bis.jpg',1)"><img src="images/pageteamcristalp_08.jpg" name="Image49" width="43" height="31" border="0"></a></td>
<td colspan="2"><a href="../../page10/Page-10.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image50','','images/pageteamcristalp_09bis.jpg',1)"><img src="images/pageteamcristalp_09.jpg" name="Image50" width="54" height="31" border="0"></a></td>
<td><a href="../../page11/Page-11.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image52','','images/pageteamcristalp_10bis.jpg',1)"><img src="images/pageteamcristalp_10.jpg" name="Image52" width="97" height="31" border="0"></a></td>
<td><a href="../../page12/Page-12.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image51','','images/pageteamcristalp_11bis.jpg',1)"><img src="images/pageteamcristalp_11.jpg" name="Image51" width="78" height="31" border="0"></a></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
<tr>
Je suppose que tu parles des images de ton menu horizontal qui effectivement ne reviennent pas à l'orignal. Pour un menu avec image qui change au survol, il y a plusieurs techniques. Si c'est bien du menu dont il s'agit, tu peux t'inspirer de ça, ou le générer en ligne (voir ci-dessous) :
http://e-lusion.com/terminated-page.htm
https://www.christopher-ware.com/images/cssmenus/menus.html
http://www.izzymenu.com/
Sinon télécharge ce logiciel gratuit qui génère des menus en css et xhtml
http://www.clubic.com/telecharger-fiche15562-css-tab-designer.html
Et pour le faire à la main, il y a plein de tutos sur le web (voir sur le site alsacreations) ou là http://www.astanos.ch/fr/blog/3-css-menu-avec-liste-et-image-de-fond-qui-change.html
http://e-lusion.com/terminated-page.htm
https://www.christopher-ware.com/images/cssmenus/menus.html
http://www.izzymenu.com/
Sinon télécharge ce logiciel gratuit qui génère des menus en css et xhtml
http://www.clubic.com/telecharger-fiche15562-css-tab-designer.html
Et pour le faire à la main, il y a plein de tutos sur le web (voir sur le site alsacreations) ou là http://www.astanos.ch/fr/blog/3-css-menu-avec-liste-et-image-de-fond-qui-change.html
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
NB: je n'avais pas ce genre de modifs dans mon ancienne version de dreamweaver MX2004.
Autre souci avec ce dreamweaver, les images survolées ne reviennent pas à l'image d'origine après passage de la souris.
signé: un vieux graphiste "papier" qui doit se mettre au web.