Créer une zone cliquable sur une grande image


Des questions ? On va essayer d'y répondre. Des trouvailles ? On veut bien les connaître !!!

Créer une zone cliquable sur une grande image

Messagede Rmax » 15 Avr 2006, 15:51

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
Image
Avatar de l’utilisateur
Rmax
Amateur
Amateur
 
Messages: 20
Inscription: 30 Mar 2006, 12:46
Localisation: Dunkerque (59)


Publicité

Messagede Pif » 15 Avr 2006, 22:04

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. ;)
Avatar de l’utilisateur
Pif
Administrateur
 
Messages: 29
Inscription: 26 Mar 2006, 04:15

Messagede Rmax » 15 Avr 2006, 22:18

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 >-)
Image
Avatar de l’utilisateur
Rmax
Amateur
Amateur
 
Messages: 20
Inscription: 30 Mar 2006, 12:46
Localisation: Dunkerque (59)

Messagede Cedric » 15 Avr 2006, 22:43

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.
Avatar de l’utilisateur
Cedric
Crocodile
Crocodile
 
Messages: 282
Inscription: 27 Mar 2006, 13:58
Localisation: Hossegor

Re

Messagede Tiphedor » 12 Juil 2008, 18:48

qq
Dernière édition par Tiphedor le 23 Nov 2018, 15:59, édité 1 fois.
Tiphedor
Novice
Novice
 
Messages: 11
Inscription: 12 Juil 2008, 15:39

Ouah image clikcble à l'ancienne.

Messagede Cedric » 12 Juil 2008, 23:29

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...) (-°

;)
Noix de copeaux coin pomme.
Noix de Coco ? Non, Noix De CRoco !
Avatar de l’utilisateur
Cedric
Crocodile
Crocodile
 
Messages: 282
Inscription: 27 Mar 2006, 13:58
Localisation: Hossegor


Retourner vers xHTML, PHP ou MySQL

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron