Page 1 sur 1

Créer une zone cliquable sur une grande image

MessagePosté: 15 Avr 2006, 15:51
de Rmax
Hola Hola Noixdecroceurs (copyright Rmax)

Je vais me lancer dans la v2 de mon portfolio (demandez pas la première, elle a jamais été en ligne ^^ )

En fait, à l'entrée du folio, je voudrai mettre une image comme celle ci:
http://img113.imageshack.us/img113/8445/splcopie2su.jpg avec le "bouton" cliquable (celui là est juste provisoire).

Je voulais savoir comment faire pour que seulement ce bouton soit cliquable

Merci

MessagePosté: 15 Avr 2006, 22:04
de Pif
Salut, NoixDeCroqueur (Copyright Pif ;-))Pour cela il faut que tu crées une "map" ("carte" en français).

Je t'ais fait un exemple, si tu cliques sur "ENTRER" tu arrives vers ce sujet, si tu cliques sur le "O" de ".INFO" tu arrives sur l'accueil de Noix De Croco.
Voir l'exemple

Explications :
Ton image fait 800x600
Il faut déterminer à l'interieur de celle-ci les zones cliquables. Pour cela on crée une carte qui désigne les zones actives.

Chaque zone définie indique ceci :

- le point de départ en X, Y, point d'arrivé X,Y pour une zone carrée, (shape="rect" )

- le point central en X,Y puis le rayon pour une zone ronde (shape="circle").

Dans l'exemple lié ci-dessus, il te suffit de regarder le code source de la page pour voir ce qui est codé. Mais voici quand même le code en question.
On assume que : l'image se nomme "imagezonee.jpg" (dans le tag img), on voit dans le tag img que le navigateur doit lui appliquer la carte nommée "map" (usemap="#Map").

Code: Tout sélectionner
<img src="imagezonee.jpg" width="800" height="600" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="336,325,462,361" href="http://www.noixdecroco.com/htm/forum/viewtopic.php?t=44" target="_blank" />
<area shape="circle" coords="591,163,21" href="http://www.noixdecroco.com" target="_blank" />
</map>


Note que pour chaque forme on donne le lien de destination. Dans mon exemple, cliquer sur un des deux liens ouvre une nouvelle fenêtre avec la page destination. Mais si tu souhaites que la page destination s'ouvre dans la même fenêtre que celle de l'accueil, alors il suffit d'enlever les target="_blank".

Voilà ;-)

PS : attention à tes titres de sujet, soit explicite, j'ai modifié le tiens. ;)

MessagePosté: 15 Avr 2006, 22:18
de Rmax
OK, merci j'ai compris.
Petite question bête: Comment as-tu trouvé les coordonnées de chaque zone?

Merci

PS: mon folio devrait ressembler à ça:
http://img418.imageshack.us/img418/4199/foliov28bt.jpg. J'essaierai d'appliquer mes premières leçon php >-)

MessagePosté: 15 Avr 2006, 22:43
de Cedric
Pour trouver la zone, plusieurs solutions :

1-La règle : ok, c'est impossible.

2-Un logiciel de dessin : ca peut aider à trouver

3-Un logiciel de mise en page web WYSIWYG, c'est mon cas (dreamweaver de macromedia= efficace, gratuit 30 jours, Frontpage de microsoft, ou encore NVU gratuit (clique sur SITE OFFICIEL en bas de la page), open source).

Mais j'ai répondu strictement à ta première question, il y a des solutions plus simples et plus rapides que de créer des "map".

Le mieux c'est de changer complètement ta page pour un résultat plus pratique et rapide à l'affichage. Crée une image de ton logo, puis une image de ton "ENTRER".

Ensuite de créer une page vide avec une couleur de fond noire, et pose dessus tes 2 images. Ainsi tu pourras facilement "linker" chaque image (avec le tag <a>, très simple d'usage).

Tu devras sacrifier quelques effets généreux (comme le Halo de lumière) mais au moins ce sera facile à adapter, et tu pourras insérer d'autres éléments facilement.

Re

MessagePosté: 12 Juil 2008, 18:48
de Tiphedor
qq

Ouah image clikcble à l'ancienne.

MessagePosté: 12 Juil 2008, 23:29
de Cedric
Ouhah, Thipedor,

Tu viens de donner une réponse à un problème très ancien (15 avril 2006).


Et, tu viens de donner une info intéressante. The Gimp semble avoir évolué plus que je ne le croyais.

Merci pour l'info.

Peut-être trouveras-tu d'autres solutions plus récentes à donner ? (Je suis sûr que tu en as en réserve...) (-°

;)