Rechercher : dans
Par :

Menu / image cliquable

Dernière réponse le 17 déc 2008 à 20:21:34 loulou, le 15 mai 2007 à 15:31:38 
 Signaler ce message aux modérateurs

Bonjour a tous,

je souhaite donner un coup de jeune à mon site inernet, le rendre plus abouti graphiquement parlant. Je souhaite en particulier mettre un menu sur le coté un peu comme sur ce site http://www.tribalweb.net

S'agit t'il d'une image cliquable, si oui, comment la créer, quel logiciel gratuit existe t'il ?

Merci d'avance

Configuration: Windows XP
Firefox 2.0.0.3

Meilleures réponses pour « menu / image cliquable » dans :
[Word] Image de fond VoirIl est possible sous Microsoft Word d'afficher une image en arrière-plan dans un document en cliquant sur le menu Format, puis sur Arrière-Plan et enfin sur Motifs et textures. Dans l'onglet Image, cliquer sur le bouton "Sélectionner une image"....
Comment créer une carte de menu de Noël VoirQuoi de plus "fashion" que de présenter une carte/un carton de menu de Noël ! Sympa, élégant, rigolo aussi, c'est selon ! Voici une petite astuce qui vous guidera dans votre création et... votre créativité ! Sommaire Choisir le menu de...
Enlever la bordure sur une image dans un lien en HTML/CSS VoirVous avez fait une image cliquable en mettant une balise IMG au sein d'un lien et le navigateur vous affiche un cadre ou plus exactement une bordure autour de l'image. Il existe deux façons de supprimer cette bordure...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...

1

Gihef, le 15 mai 2007 à 16:27:21

Bonjour,

Le choix qu'ils ont fait est d'utiliser du Javascript.
Avec 3 images : une image de base, une image au survol et une image activée.
Il a donc fallu qu'ils créent les 3 images. Les effets sont donc obtenu grâce à Javascript.

Lors du chargement, la page contient ce code :

    <td colspan=3><a href="../tour/accueil.php?lg=fr">
      <img src="../image/local/fr/menu_accueil_off.jpg" alt="Accueil" name="accueil"
	 onMouseOver=accueil.src="../image/local/fr/menu_accueil_over.jpg" 
	 onMouseOut=accueil.src="../image/local/fr/menu_accueil_off.jpg" width=270 height=65 border="0"></a></td>
Au chargement de la page, l'image de base est affichée (menu_accueil_off.jpg).
Lorsqu'on ammène la souris sur l'image onMouseOver une autre image s'affiche (menu_accueil_over.jpg).
Lorsqu'on enlève la souris de l'image onMouseOut, l'image de base s'affiche à nouveau (menu_accueil_off.jpg).


Le code devient
    <td colspan=3><a href="../tour/accueil.php?lg=fr">
      <img src="../image/local/fr/menu_accueil_on.jpg" alt="Accueil" name="accueil"
	 onMouseOver=accueil.src="../image/local/fr/menu_accueil_on.jpg" 
	 onMouseOut=accueil.src="../image/local/fr/menu_accueil_on.jpg" width=270 height=65 border="0"></a></td>
lorsqu'on accède à la nouvelle page après avoir cliqué sur un élément du menu.
Là, l'image activée est la seule que est affichée (menu_accueil_on.jpg).
Ce qui permet de voir dans quelle page on se trouve, mais qui oblige à prévoir une nouvelle apparence au menu dans chaque nouvelle page.
Le PHP les a certainement beaucoup aidé à le faire.


On peut obtenir le même effet avec des CSS, en évitant que ça ne fonctionne pas dans les navigateurs ayant leur gestion du Javascript désactivée.
Par exemple, en créant une image contenant les 3 états de l'image et en décalant les parties de cette image en fonction de ce que fait la souris (a:hover, a:active).
Le a:active ajoute un effet. Lorsqu'on clique sur le lien, ça affiche l'image qu'on retrouve dans la nouvelle page.


Les 2 manières de faire sont assez simple à mettre en œuvre.
 

Répondre à Gihef

2

loulou, le 15 mai 2007 à 16:49:47

Un grand merci à toi ! ;-)

Répondre à loulou

3

Crazy Drummer, le 5 aoû 2007 à 17:04:28
  • +2

Salut,

Le Javascript n'est pas obligatoire, le css suffit, il faut créer des divs ayant pour image de fond (dans le css) normal.jpg au survol survol.jpg et au clic actif.jpg comme ceci :

div#menu a
{
background-image: url('normal.jpg');
}

div#menu a:hover
{
background-image: url('survol.jpg');
}

div#menu a:active
{
background-image: url('actif.jpg');
}

Comme ça même les visiteurs ayant désactiver Javascript pourront bénéficier de tes graphismes ;)

Répondre à Crazy Drummer

4

franckds, le 21 nov 2007 à 12:16:54

Comment faire pour que l'image "active" reste en position visible apres avoir cliquer dessus...
d'avance merci...

Répondre à franckds

5

 saku, le 17 déc 2008 à 20:21:34

Ben dans ton menu disons que tu es tu la page 'artiste' dans ton menu ou ya le lien pour 'artiste' tu met id="courant" dans la balise de ce lien seulement et dans ta page css tu met

#courant
{
color:white;
border:white solid 1px;
background-image:url(images/hover_bouton.jpg);
}

ce n'est qu'un exemple...mais ca fonctionne!!

j,ai vue plus haut pour les liens ya une facon bien plus simple!
avec le simple a ( balise pour les liens)

a
{
color:blue
}

ton lien est bleu

et

a:hover
{
color:white
}

ton lien est blanc quand tu met ta souris dessus

Répondre à saku
Collection CommentÇaMarche.net