Dreamweaver MX: mettre des belles nimages

[kamkil]

J'ai voulu me lancer dans la construction de mon site internet avec DW MX mais j'ai rapidement galéré pour faire ce que je voulais…

J'ai lu quelques tutoriaux HTMl et j'ai quelques bases mais j'ai cherché vainement pendant toute une journée pour savoir comment positionner une image à sa guise (c'est à dire pixel par pixel) et j'ai toujours pas trouvé d'ailleurs.

Voilà ce que je voulais faire: une barre de menu sur la gauche et je voudrai que la petite étiquette en haut s'agrandisse par une animation quand on passe le curseur dessus ou qu'on clic dessus. Je vois pas comment on fait pour supperposer les images ou les caller comme on veut…

Aller jeter un coup d'oeil là .Il n'y a rien ou presk pour le moment… /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/rolleyes.gif

J'aimerais savoir si ma manip est trop complexe à faire et si je doit me résigner à faire un site "standard" en attendant mieux /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/confused.gif

J'ai ici trouvé un exemple de ce que je veux faire en gros mais vu la taille du script dans le code source…

Si quelqu'un pouvait m'éclaircir ou m'aider ce serait sympa /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/tongue.gif /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/wink.gif

 

[Api]

Ce que tu veux faire ça s'appelle un rollover. C'est du javascript. Dreamweaver l'automatise, tu n'as pas à l'écrire. Tu positionnes ton curseur à l'endroit où tu veux insérer ton image. Puis dans la palette 'common', quand tu passes ta souris sur les différents objets, tu dois avoir un petit texte qui les décris. Tu cliques donc sur celui qui parle de rollover.
Une boîte de dialogue t'invite à compléter trois champs:
- image 1 = image de départ
- image 2 = image de remplacement
- url = la page qui doit s'afficher quand on clique
Tu renseignes chacun des champs et tu valides
Et voilà
(tout ça de mémoire, hein, il y a peut-être des variantes dans les mots utilisés, mais c'est très intuitif)

 

[kamkil]

Bin c'est ce qu'on m'avait dit déjà…
Je vais retester mais mon problème c'est que le rollover je veux le faire par dessus une image déjà existante ou alors il faut ke je décompose en deux images celle déjà existante mais le problème que je vais avoir c'est qu'il va falloir que je les cale au pixel près pour que ca me redonne l'équivalent de la mono image d'avant et ca j'arrive pas à le faire (je suis peut-être pas doué /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/confused.gif ) et Blob s'en arrache les cheveux /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/laugh.gif (merci Blob au passage /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/wink.gif )

 

[kamkil]

J'ai un autre problème avec DW: quand se sauvegarde en faisant Pomme S et que je vais voir avec un navigateur le résultat rien n'a changé (il y a 3 frames dans ma page) et si je ferme le document sous DW en faisant sauvegarder les modifications des frames et que je reteste avec un navigateur je ne vois plus que des liens cassés et lorsque je retourne dans DW et reouvre ma page je vois aussi les liens cassés et quand je passe le curseur dessus ca m'indique un ficher temporaire caché dans un dossier invisble (le fichier commence par DW) et toutes mes frames on disparu. C'est quoi ce beenss? Il me faut alors aller remettre les noms des fichiers corrects avec BBEdit (évidemment puisque je ne sais pas non plus comment on fait pour éditer le code HTML d'une page qui contient des frames, j'édite seulement le code des frames… /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/rolleyes.gif )

Bref si quelqu'un pouvais me ressortir de l'ornière…

 

[Api]

Ouhh là là, effectivement, je vois que tu as beaucoup de soucis... /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/laugh.gif

Bon, pour le rollover, c'est simple je ne vois pas ou ça coince, tu prends ton image de départ, et tu modifies son apparence dans un éditeur graphique quelconque sans toucher à sa taille.
Puis quand tu es content du résultat, tu fais 'enregistrer sous'.
Tu te retrouves donc avec deux images, qui sont identiques au pixel près, en hauteur comme en largeur: l'originale qui n'a pas bougé, et la nouvelle modifiée (police un poil plus grosse, luminosité un poil poussée, etc...) qui représente l'état 'onmouseover'

Tu retournes dans dreamweaver, tu ouvres la page dans laquelle tu avais mis ton image initiallement, tu la vires et tu fais un rollover à la place comme expliqué dans mon post précédent.
Dreamweaver place les deux images exactement au même endroit, donc il n'y aura pas de décalage.

Pour ton deuxième souci qui n'est pas très clair je subodore un problème de définition de site.
Dans un premier temps, fais ça: tu mets sur ton bureau un dossier que tu appelles site, ou test, comme tu veux.
Ensuite dans dreamweaver, tu fais site>définir un site et tu choisis ton dossier comme racine de ton site. Inutile de changer les réglages des autres onglets, on verra ça plus tard...
Ensuite, tu enregistres toutes tes pages dans ce dossier, avant d'y coller la moindre ligne de texte.

Dernier point, je te conseille vivement d'acheter un bouquin sur dreamweaver, tu risques d'en avoir besoin....
Prends un bouquin sur le 4 si tu n'en trouve pas un pour la version MX.
Il n'y a pas de différence entre les deux pour tout ce qui regarde les commandes de base.

 

[kamkil]

Merci beaucoup /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/laugh.gif

Je crois effectivement que je vais m'acheter un bon gros bouquin pask je suis pas arrivé là /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/rolleyes.gif

Pour mon image qui change de taile je vais faire la première sur un fond transparent comme ca on aura l'impression que l'image grandi alors qu'elle rempli juste le fond qui était transparent auparavant /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/laugh.gif

J'ai feuilleté plusieurs sites pour voir comment ils mettaient leur images en place et apparement ils sont légions à utiliser des tableaux donc je pense que je vais essayer de découper mes images pour les faire rentrer dans des tableaux… /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/rolleyes.gif

 

[Api]

Merci beaucoup /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/laugh.gif

De rien /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/wink.gif

Je crois effectivement que je vais m'acheter un bon gros bouquin pask je suis pas arrivé là /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/rolleyes.gif

Tu ne seras pas déçu ! /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/tongue.gif

Pour mon image qui change de taile je vais faire la première sur un fond transparent comme ca on aura l'impression que l'image grandi alors qu'elle rempli juste le fond qui était transparent auparavant /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/laugh.gif

Hum... le truc c'est qu'encore une fois nous nous comprenons mal Kamkil, ce n'est pas ton image qui change de taille, ce sont de légères modifications comme l'augmentation de la taille des lettres, qui donnent cette impression, sur le principe de l'animation. Tes deux images ont un rapport (hxl) rigoureusement identique...

J'ai feuilleté plusieurs sites pour voir comment ils mettaient leur images en place et apparement ils sont légions à utiliser des tableaux donc je pense que je vais essayer de découper mes images pour les faire rentrer dans des tableaux… /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/rolleyes.gif

Oui, les tableaux sont la solution pour une mise en page parfaite.
N'hésite pas si tu as d'autres questions /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/tongue.gif

 

[Amok]

Pour mon image qui change de taile je vais faire la première sur un fond transparent comme ca on aura l'impression que l'image grandi alors qu'elle rempli juste le fond qui était transparent auparavant

je ne suis pas sûr moi même de comprendre ce que tu veux. On résume si tu veux bien. /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/wink.gif

Alors tu as une image de base. prenons l'exemple d'un carré de 10 X 10 pixels de côté, de couleur rouge. Ce que tu veux, il me semble, c'est que lorsque la souris glisse sur ce carré, il "grandisse", par exemple prenne le format 20 X 20 pixels. Tout ca, dans notre cas, sur une page de fond...disons blanc.

Simple. Tu fais une image de la taille de ton carré le plus grand. Dans notre cas: 20 pixels. Tu remplis tout ca de rouge et tu obtiens... Un joli carré rouge de 20 pixels de côté! /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/laugh.gif

Tu enregistres ton carré. Ensuite, pour faire au plus simple, tu emplis cette image de blanc (la couleur de fond de ta page) et tu traces dedans un carré de 10 pixels de côté, parfaitement centré. Tu obtiens donc un carré rouge de 10x10 pxls sur fond blanc, l'image complète (carré + fond) étant de 20 pixels. Tu enregistres ca sous un autre nom.

Il te suffit simplement ensuite d'utiliser la fonction rollover dont parle Api plus haut et d'affecter a chaque état une image. Tu as ainsi l'impression que lorsque ta souris passe sur le carré, celui-ci passe de 10 à 20 pixels de côté. Capito?

 

[kamkil]

Vivi!
C'est ca que je voulais faire! Une image qui grandisse comme ca en utilisant le format de la plus grosse. Du genre 25x25=>25x150

Merci pour votre aide je vais tester ca /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/wink.gif

 

[edrahil]

petite astuce (sous dream ou bien en HTML pur et dur), ton exemple de site utilise toujours des images de même taille (donc roll over facile).

/ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/wink.gif Il n'y pas d'agrandissement, c'est seulement la première image ici qui est aussi large que la deuxième ici

L'effet d'agrandissement est réalisé grace à la deuxième image qui est en fait un GIF animé (où la taille et l'opacité changent visuellement, mais n'influent pas sur la taille de l'image...)

Voilà, en espérant que cela t'aide.

PS: pour le bouquin, investi, au moins en poche à 10€
------------------------------------------------------------

 

[kamkil]

Merci pour ces explications /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/laugh.gif

Par contre je comprend pas pourquoi il y a un script énorme pour faire un rollover/gif animé /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/confused.gif

ca a été fait avec GoLive 6…

 

[Amok]

sinon:

entre tes balises <head> :

<pre><font class="small">code:</font><hr> &lt;script language="javascript"&gt;
&lt;!--
function VersionNavigateur(Netscape, Explorer)
{
if ((navigator.appVersion.substring(0,3) &gt;= Netscape &amp;&amp; navigator.appName == 'Netscape') ||
(navigator.appVersion.substring(0,3) &gt;= Explorer &amp;&amp; navigator.appName.substring(0,9) == 'Microsoft'))
return true;
else return false;
}
//--&gt;
&lt;/script&gt; </pre><hr>

et dans ta page :

Balise &lt;a href=" ...&gt; à insérer où tu veux. L'image test1.gif sera remplacée par test2.gif lorsque la souris survolera l'image de défaut (test1.gif).


<pre><font class="small">code:</font><hr> &lt;a href="exima01.htm" OnMouseOver="if (VersionNavigateur(3.0,4.0)) img1.src='gif/test2.gif' " OnMouseOut="img1.src='gif/test1.gif' "&gt;&lt;img name="img1" width=97 height=52 border=0 src="gif/test1.gif" OnLoad="tempImg=new Image(0,0); tempImg.src='gif/test2.gif'"&gt;&lt;/a&gt; </pre><hr>

 

[kamkil]

D'accord mais je comprend pas trop le rapport avec la version du navigateur. Certains n'acceptent pas ce genre de manips ou … ? /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/confused.gif
/ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/wink.gif

 

[Amok]

Exact (bien vu! /ubbthreads/http://forums.macg.co/vbulletin/images/smiliesold/wink.gif ) Ce script ne fonctionne que sur les navigateurs de version 3 ou supérieure. Autant dire, que normalement tu es tranquille....