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.
Cependant, mes rollovers sont des éléments graphiques de l'image de fond, donc elles ne sont pas placées de façon... comment dire... "alignée"...
Comment être sûre qu'ils restreont exactement où je le veux, et ça quel que soit le navigateur et la résolution d'affichage ?
Merci beaucoup, encore...