[Dreamweaver] Rollovers Résolu/Fermé

Question

Je viens d'acquérir Dreamweaver 8 que je ne connais pas encore.

Je veux créer un site web qui ne serait constitué que d'une image qui prendrait tout l'écran, et dont certains éléments seraient cliquables (par exemple, l'image de fond comporte une table sur laquelle est posée une tasse de café, et la tasse de café est cliquable).

J'ai recréé tous ces éléments cliquables en rollovers indépendants (avec Photoshop Ready) que j'ai enregistré en gif.

J'aimerais savoir comment, avec Dreamweaver, je pourrais créer un tel site, et surtout comment caler mes petits rollovers exactement où je le veux sur ma page, pour que cela reste bien en place quel que soit le navigateur ou le type d'affichage...

Je ne sais pas si je suis assez claire, mais j'ai fait de mon mieux !

Merci d'avance à tous ceux qui me répondront !

RAD ZONE · Answer

SALUT

 et bien c est simple ! dream est un WYSWYG donc tu peut inserer des image sur la preview directement sans passer par le codage manuel!

tu choisis l endroit sur ta page ou tu veut inserrer l image et tu click gauche

dans la barre de fonction de dream tu click sur insert et tu choisi ce que tu veut inserer dans la liste!!

 cependant je te conseil de controler les codes manuelement car bien que dream soit le meilleur dans sa categorie il produit quelques erreur de codes !! rien de grave mais les standard sont parfois non respecter!!

ce qui peut poser des problemes sur les différents navigateurs!

maintenant si tu comprend l englais j ais mis un demo video complete sur la creation d un site pro  avec dreamweaver 8 pas a pas , sur mon site  RAD ZONE

RAD

Gihef · Answer

Bonjour,

Ton image a une taille définie. Par exemple 800x600px.
Quelle que soit la résolution de tes visiteurs, elle aura toujours ces dimensions.
Selon la résolution de leur écran, elle apparaîtra plus ou moins grande, mais elle aura quand même les mêmes dimensions, 800x600.

Donc, les parties de cette image sont situées à tant de px du haut et tant de px de la gauche de cette image. Quelle que soit la résolution de tes visiteurs.

En utilisant un positionnement en CSS tu peux y faire référence précisément.
En absolute, tu peux placer tes roll-overs à tant de px du haut et tant de px de la gauche. Quelle que soit la résolution de tes visiteurs.

Tu as pu remarquer qu'il est question de px (pixels). Cette unité de mesure est tout à fait adaptée aux images.

Gihef · Answer

Tu me suis bien*. Chez Alsacreations, j'avais trouvé un exemple qui n'y est plus. Il y était question de “zoom” d'où le nom du dossier. Je m'en suis inspiré pour fabriquer cet exemple où tu trouveras 4 zones réactives. Une fois qu'on a compris, c'est assez simple à réaliser. Il s'agit d'utiliser des blocs dimensionnés et positionnés en absolute sur un autre bloc contenant l'image de fond. Puis d'indiquer ce qu'on veut y voir apparaître lors du survol de la souris sur les liens (a:hover). Le code de la page elle-même est très court :

La présentation est entièrement faite dans la feuille de styles (CSS). Pour la taille de la page à l'ouverture, j'ai ajouté un événement Javascript “onload” dans le :Ça fonctionne, mais c'est très aléatoire. Il suffit que tes visiteurs aient désactivé Javascript pour que ça reste sans effet. Chez moi, par exemple, Javascript est activé… mais je ne l'autorise pas à redimensionner la fenêtre. Je n'aime pas ça. Hé. Il y a certainement d'autres moyens plus performants, mais je ne les connais pas. * Proposition : Change la résolution de ton écran pour tester mon exemple. + Attention à la taille de ton image de fond. Qu'elle ne soit pas trop lourde.

Gihef · Answer

Tu trouveras les infos dans la feuille de styles (je l'ai mise dans la page, mais il serait préférable que tu la places dans un fichier externe).

L'image de fond est dans le bloc principal, celui qui contient le reste  #conteneur {
    position: relative;
    margin: 0 auto;
    width: 983px;
    height : 600px;
    text-align: left;
    background : transparent url(TheMice.jpg) top left no-repeat;
    }
Les autres blocs sont définis un à un (les dimensions sont celles des images respectives qui s'afficheront lors du survol)#themice1 {
    width : 140px;
    height : 120px;
    top : 234px;
    left : 473px;
    }
puis le survol est précisé#themice1:hover {
    background : url(TheMice1.jpg) top left no-repeat;
    }
Précédemment, on leur avait à tous appliqué quelques règles, comme le positionnement et une bordure  #themice1, #themice2, #themice3, #themice4 {
    position : absolute;
    border: 0px dotted #a2bbda;
    }

Gihef · Answer

Ici, il est préférable de laisser tous les visiteurs profiter des questions/réponses de chacun. Il s'agit de partager.

“de façon un peu plus... "directe"”
Inscris-toi et envoie-moi un message par profil Gihef si tu acceptes de montrer tes sources.
On pourra mixer (-;

Gihef · Answer

J'ai pu accéder à ton fichier.
Et, en effet, ça semble convenir.

Je ne vois pas trop ce que je peux ajouter à mes explications. Préciser, peut-être ?

Pour essayer d'être plus clair, j'ai modifié la page. Les zones cliquables sont maintenant entourées et leurs noms ont été ajoutés. Des repères ont aussi été ajoutés. Et en CSS, svp (-;

Je vais m'aider de la feuille de styles pour illustrer mes explications.
Il faut donc, si tu ne l'a pas encore fait, que tu ouvres ma page d'exemple dans un éditeur de texte pour avoir accès au code. Dreamweaver doit pouvoir aussi te permettre de le modifier.

Comme tu as précisé que la page aurait des dimensions définies et fixes, j'ai positionnés les différents élémets la composant de manière “absolute” (les “virgule espace” permettent de le faire pour plusieurs styles à la fois) #themice1, #themice2, #themice3, #themice4 {
  position : absolute;
Ce qui permet d'être précis, mais qui fige les positions. Ainsi, même lorqu'on redimensionnera la fenêtre, les zones cliquables resteront à leur place par rapport aux origines de la page.

Pour que les origines de tous les éléments soient bien à 0, j'ai commencé par mettre tout à zéro  html, body {
    margin: 0;
    padding: 0;
et, maintenant, quand on indiquera    top : 234px;
    left : 473px;
la zone commencera bien à 234px du haut et à 473px du bord gauche (ça cause anglais, HTML et CSS) de la page.

C'est maintenant à toi de définir les origines zones qui devront réagir à la souris. Ton éditeur graphique doit pouvoir t'y aider.

Une fois que tu a répéré les origines de chacune de tes zones cliquables, tu pourras préciser leur “rayon d'action”, les dimensions sur lesquelles la souris aura un effet.
Dans cet exemple, on trouve    width : 140px;
    height : 120px;
ce qui correspond aux dimensions de l'image (140 px de large, 120 px de haut) qui apparaîtra et indique les limites de la réaction pour le survol.

Ensuite, les propriétés pour le :hover (au survol) sont définies#themice1:hover {
    background : url(TheMice1.jpg) top left no-repeat;

Tu as pu remarquer qu'il faut définir un style par zone#themice1 { ainsi qu'un autre#themice1:hover { pour le survol (“:hover” est un mot réservé).

Et, en regardant à nouveau ton image, je m'aperçois que tu vas avoir un problème.
Les tasses et les magazines ont des dimensions qui font que leurs zones respectives vont se chevaucher.
À l'intersection, lequel va se déclencher ?
On atteint une des limites des CSS.

Peut-être qu'en déplaçant légèrement la 1re tasse ?

Sinon, il existe une possibilité de définir des zones cliquables autres que rectangulaires. DW sait faire ça me semble-t-il.
Il s'agit de des cartes (sur des images), les maps.
Mais là s'arrêtent mes compétences. Je n'ai jamais mêlé les deux.

Gihef · Answer

+ Du jargon : http://www.pompage.net/traduction/terminologie

Gihef · Answer

Amuse-toi bien.

[Dreamweaver] Rollovers

8 réponses

Discussions similaires