28217 sujets

CSS et mise en forme, CSS3

Rendre cliquable plusieurs partie d'une seule et même image

Salut, je voudrai savoir comment rendre cliquable 4 parties d'une seule et même image.

Explications: J'ai fais un header qui contient le menu de navigation.

Ce dernier comprend :

" Accueil " " Nos activités " " Inscriptions " " Nous découvrir "...

Je voudrais les rendres tous cliquables, avec des urls différentes donc.

Quelqu'un pourrai m'indiquer comment faire.

Merci beaucoup.


PS: Voici l'adresse de la page avec le header en question :


http://www.oasis92.org
Modérateur
Tu peux aussi regarder au niveau des menus à onglets :

Tutorial Alsa
Portes coulissantes en CSS

Ou googler un peu.

À mon avis, il faudra que tu utilises un menu à onglet comme dans ces tutoriaux et mettre ton entête en background de celui-ci.

Attention, sur ton site tu as écris Acceuil, mais c'est Accueil.
Modifié par Merkel (29 Sep 2005 - 19:37)
Ca serais pas possible de découper son bandeau en plusieurs partie et de coller le tout à la suite en faisant des liens sur chaque image ?
bonjour.
Je pense que tu veux faire image mapée.
Je donne le code si c'est bien ce que tu veux
<map name="bar" id="bar" alt="liens">
  <area shape="rect" coords="121,5,141,35" href="#" target="_self" />
  <area shape="rect" coords="87,4,109,33" href="#" target="_self" />
</map>

le plus dur etant de definir les coordonnées dans la zone coords
Bonjour,

Ne pas utiliser d'image map, qui sont difficiles à rendre accessibles (particulièrement quand on utilise un outil automatisant leur production) et que rien ne justifie ici.

Sortir ce menu de l'image, et utiliser un menu à onglet (voir les liens cités ci-dessus)
L'utilisation de l'image map est justifiée dans la mesure ou l'image est terminée et qu'il faudrait qu'il la retouche pour enlever la zone menu , passer par des decoupes ou plusiuers div don un sera positionné en absolu pour le menu
Bonjour,

jp949 a écrit :
L'utilisation de l'image map est justifiée dans la mesure ou l'image est terminée et qu'il faudrait qu'il la retouche pour enlever la zone menu , passer par des decoupes ou plusiuers div don un sera positionné en absolu pour le menu


Qu'il faille modifier une image est tout sauf une justification pour un choix qui engage fortement l'ergonomie et l'accessibilité de la page !

Oui, il faudra passer par :
- le rognage de la partie "menu" de l'image
- la création de deux images pour les parties gauches et droites des arrondis d'onglets
- la création d'une liste ul (pas de "plusieurs div") pour le menu (qui de toute façon n'est pas encore balisé ni présent dans la page)
- l'ajout à la CSS des règles nécessaires pour transformer cette liste en menu à onglet (cf tutoriels) Sans position absolue, svp, dans un design où le flux suffit.

Cela s'appelle faire une page Web. Sinon, pour faire autre chose qu'une page web, passer par powerpoint par exemple : ça va nettement plus vite et c'est beaucoup moins fatiguant Smiley cligne

Une image map côté client se justifie quand le positionnement CSS et les découpes d'image se dégradent très mal selon les capacités du navigateur et selon la configuration utilisateur. Ce n'est pas le cas ici.

Une image map côté serveur se justifie quand il s'agit de zones cliquables non géométriques. Ce n'est toujours pas le cas ici.
Modifié par Laurent Denis (02 Oct 2005 - 10:16)
Administrateur
jp949 a écrit :
L'utilisation de l'image map est justifiée dans la mesure ou l'image est terminée et qu'il faudrait qu'il la retouche pour enlever la zone menu , passer par des decoupes ou plusiuers div don un sera positionné en absolu pour le menu

Attention à ne pas réfléchir avec les méthodes du siècle dernier (tableaux et cellules imbriquées).

Ici, il faut réfléchir en terme d'éléments et de parties fonctionnelles.
Nous avons :
- une partie d'entête
- qui contient un titre et une liste de liens (menu)

Il n'y a qu'à structurer chacune des parties logiquement :
- un bloc de division pour englober le titre de document (<h*>) et la liste de liens (<ul>).
- Le reste est l'affaire des CSS.

Pour comparaison, j'ai employé exactement le même principe ici : http://www.slconstantia.com/site/

ou ici : http://www.alsacreations.com/creation.php
Modifié par Raphael (02 Oct 2005 - 10:42)
Et le mot "menu", c'est pour rendre accessible le fait que ce soit un menu ?

C'est une vraie question sans humour sous entendu...
Administrateur
Bob (MC Melun) a écrit :
Et le mot "menu", c'est pour rendre accessible le fait que ce soit un menu ?

C'est une vraie question sans humour sous entendu...

Peux-tu être plus explicite dans la question, je ne suis pas sûr d'avoir bien compris.

A tout hasard, je te propose cette lecture (partie "Des Listes pour tes menus tu choisiras")
Sujet clos
Aller à