Bloc image bouge dans dreamweaver
Fermé
eric
-
31 oct. 2008 à 09:11
TEMCA Messages postés 319 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 mars 2011 - 31 oct. 2008 à 14:00
TEMCA Messages postés 319 Date d'inscription vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 mars 2011 - 31 oct. 2008 à 14:00
A voir également:
- Bloc image bouge dans dreamweaver
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Google recherche par image - Guide
- Faststone image viewer - Télécharger - Visionnage & Diaporama
- Image animé qui bouge gratuit - Télécharger - Thèmes & Fonds d'écran
5 réponses
TEMCA
Messages postés
319
Date d'inscription
vendredi 19 octobre 2007
Statut
Membre
Dernière intervention
24 mars 2011
76
31 oct. 2008 à 11:28
31 oct. 2008 à 11:28
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.
TEMCA
Messages postés
319
Date d'inscription
vendredi 19 octobre 2007
Statut
Membre
Dernière intervention
24 mars 2011
76
31 oct. 2008 à 11:53
31 oct. 2008 à 11:53
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....
lardographic
Messages postés
3
Date d'inscription
vendredi 31 octobre 2008
Statut
Membre
Dernière intervention
31 octobre 2008
31 oct. 2008 à 12:24
31 oct. 2008 à 12:24
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>
TEMCA
Messages postés
319
Date d'inscription
vendredi 19 octobre 2007
Statut
Membre
Dernière intervention
24 mars 2011
76
31 oct. 2008 à 13:34
31 oct. 2008 à 13:34
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
lardographic
Messages postés
3
Date d'inscription
vendredi 31 octobre 2008
Statut
Membre
Dernière intervention
31 octobre 2008
31 oct. 2008 à 13:52
31 oct. 2008 à 13:52
merci pour ces infos.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
TEMCA
Messages postés
319
Date d'inscription
vendredi 19 octobre 2007
Statut
Membre
Dernière intervention
24 mars 2011
76
31 oct. 2008 à 14:00
31 oct. 2008 à 14:00
De rien ;o) en espérant que ça t'aidera, sinon repasse par ici...
31 oct. 2008 à 11:40
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.