Création de site personnel
oRbient666
Messages postés
124
Statut
Membre
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
voilà, j'ai créé un site personnel sur lequel je mets mes photos de vacances. Je parcours differentes regions de France et j'aimerai savoir une chose. En page d' accueil, j' aimerai faire apparaître une carte de France sur laquelle seraient cliquables plusieurs points correspondant à des lieux visités (par exemple, en passant la souris dans la region du Luberon, je pourrai cliquer dessus pour me retrouver sur la page du site correspondant). J'aimerai savoir exactement comment créer une telle page, avec la photo, les liens, avoir le code html, etc......
Merci d'avance pour l'aide que vous pourrez m' apporter.
Laurent
ps: si par hasard ma demande manque de precision, faites le moi savoir
voilà, j'ai créé un site personnel sur lequel je mets mes photos de vacances. Je parcours differentes regions de France et j'aimerai savoir une chose. En page d' accueil, j' aimerai faire apparaître une carte de France sur laquelle seraient cliquables plusieurs points correspondant à des lieux visités (par exemple, en passant la souris dans la region du Luberon, je pourrai cliquer dessus pour me retrouver sur la page du site correspondant). J'aimerai savoir exactement comment créer une telle page, avec la photo, les liens, avoir le code html, etc......
Merci d'avance pour l'aide que vous pourrez m' apporter.
Laurent
ps: si par hasard ma demande manque de precision, faites le moi savoir
A voir également:
- Création de site personnel
- Site de telechargement - Accueil - Outils
- Creation de site web - Guide
- Site x - Guide
- Site de partage de photos - Guide
- Creation compte gmail - Guide
15 réponses
Bonjour,
Une possibilité consiste à créer des images avec des zones réactives avec des balises MAP
Regarde ici ce tuto Images et zones réactives
ps : pas utile de mettre tout ton message en "gras" , il n'en est pas plus lisible, au contraire ;)
.
Une possibilité consiste à créer des images avec des zones réactives avec des balises MAP
Regarde ici ce tuto Images et zones réactives
ps : pas utile de mettre tout ton message en "gras" , il n'en est pas plus lisible, au contraire ;)
.
Voilà, je me suis rendu sur le site que tu me conseille Busyspider et je le trouve très bien réalisé et très clair. Par contre, pour cibler diffèrents points sur la carte il est demandé de "prendre pour valeurs la liste des abscisse, ordonnée à l'origine du centre et le rayon du cercle (la zone cliquable) mais je ne sais pas comment les trouver. Existe-t-il des logiciels permettant de faire apparaitre les coordonnées sur une photo par simple survol de la souris au dessus?
C'est bon, j'ai trouvé. Par contre, il n'est pas expliqué comment lier ces points cliquables à des pages exterieures à celle sur laquelle se trouve la carte.Sais-tu quel est le code html à entrer afin d'y parvenir?
Merci d'avance
Merci d'avance
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Salut,
Essaie Dreamweaver pour faire cela ou Frontpage (5.0 et+). Ils le font très bien, tu clique sur les points désirés et il te crée tes point lui-même... c'est vraiment plus simple car les coordonnées des AXES sont parfois dure à trouver. Sinon prend un logiciel d'image et note chaque pixel à la main ^^
Essaie Dreamweaver pour faire cela ou Frontpage (5.0 et+). Ils le font très bien, tu clique sur les points désirés et il te crée tes point lui-même... c'est vraiment plus simple car les coordonnées des AXES sont parfois dure à trouver. Sinon prend un logiciel d'image et note chaque pixel à la main ^^
Merci Squad-G, j'ai trouvé le moyen avec un simple logiciel comme photofiltre qui fait apparaître les axes au passage de la souris :)
Maintenant j'aimerai créer une jolie infobulle dans laquelle je pourrai integrer un texte resumant les lieux que j'ai visités. Chaque info-bulle devra apparaître au survol des liens placés sur l' image créée precedemment. Quelqu' un peut-il me dire quel est le code html à taper pour faire apparaitre ces inbfos-bulles?
Merci d'avance
Merci d'avance
Personnellement je privilègie les infos bulle en css (sinon en javascript c'est un peu l'usine à gaz , avis perso bien sur)
En recherche sur Google on trouve pleins d'exemples.
en voici un Exemple d'info bulle
on peut trouver plein d'autres exemples fait une recherche sur Google "info bulle css"
Il faut surtout vérifier que le code marche bien sous Internet Explorer ET sous Firefox : au moins que les 2 navigateurs "les plus populaires" soient opérationnels pour les codes. Ce n'est pas toujours le cas ! Et puis si tu peux vérfiez aussi sous Linux.
D'ailleurs cette précaution est valable pour toute page Html, il faut la visualiser au moins sous ces 2 navigateurs, pour que les utilisateurs n'aient pas de souci de lecture ou d'ouverture de page. Parfois on a de sérieuses surprises si on ne vérifie pas ;)
En recherche sur Google on trouve pleins d'exemples.
en voici un Exemple d'info bulle
on peut trouver plein d'autres exemples fait une recherche sur Google "info bulle css"
Il faut surtout vérifier que le code marche bien sous Internet Explorer ET sous Firefox : au moins que les 2 navigateurs "les plus populaires" soient opérationnels pour les codes. Ce n'est pas toujours le cas ! Et puis si tu peux vérfiez aussi sous Linux.
D'ailleurs cette précaution est valable pour toute page Html, il faut la visualiser au moins sous ces 2 navigateurs, pour que les utilisateurs n'aient pas de souci de lecture ou d'ouverture de page. Parfois on a de sérieuses surprises si on ne vérifie pas ;)
Voilà, j'ai trouvé un code à inserrer dans ma page html:
<p> (<a href="#"
class="info">PDA<span>TEXTE</span></a>) </p>
et un autre dans mon document CSS:
* {
font-size: 11px; /* on définit les propriétés de texte pour toutes les balises */
font-family: Tahoma` Verdana` Arial` serif;
}
a.info {
position: relative;
color: black;
text-decoration: none;
border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.info span {
display: none; /* on masque l'infobulle */
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 30px; /* on positionne notre infobulle */
left: 20px;
background: white;
color: green;
padding: 3px;
border: 1px solid green;
border-left: 4px solid green;
}
L' info-bulle fonctionne mais pas comme je le desire
Elle apparaît à l'exterieur de l' image qui comprends un certain nombre de liens sur lesquels je veux faire apparaître diffèrentes info-bulles.
Voici l'une des lignes de code permettant de créer un lien sur mon image:
<center><MAP NAME="bulles">
<AREA SHAPE="circle" COORDS="23,20,10" HREF="mgmtdf00.html" HREF="#bulles">
A quel endroit de cette ligne dois-je inclure le code html laissé plus haut afin que l' info-bulle apparaîse directement sur le lien de l'image et non pas à l'exterieur de l'image?
J'attends vos reponses éclairées
<p> (<a href="#"
class="info">PDA<span>TEXTE</span></a>) </p>
et un autre dans mon document CSS:
* {
font-size: 11px; /* on définit les propriétés de texte pour toutes les balises */
font-family: Tahoma` Verdana` Arial` serif;
}
a.info {
position: relative;
color: black;
text-decoration: none;
border-bottom: 1px gray dotted; /* on souligne le texte */
}
a.info span {
display: none; /* on masque l'infobulle */
}
a.info:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */
cursor: help; /* on change le curseur par défaut en curseur d'aide */
}
a.info:hover span {
display: inline; /* on affiche l'infobulle */
position: absolute;
white-space: nowrap; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
top: 30px; /* on positionne notre infobulle */
left: 20px;
background: white;
color: green;
padding: 3px;
border: 1px solid green;
border-left: 4px solid green;
}
L' info-bulle fonctionne mais pas comme je le desire
Elle apparaît à l'exterieur de l' image qui comprends un certain nombre de liens sur lesquels je veux faire apparaître diffèrentes info-bulles.
Voici l'une des lignes de code permettant de créer un lien sur mon image:
<center><MAP NAME="bulles">
<AREA SHAPE="circle" COORDS="23,20,10" HREF="mgmtdf00.html" HREF="#bulles">
A quel endroit de cette ligne dois-je inclure le code html laissé plus haut afin que l' info-bulle apparaîse directement sur le lien de l'image et non pas à l'exterieur de l'image?
J'attends vos reponses éclairées
Toujours pas de réponses?
Sinon j'aimerai aussi savoir comment zoomer sur une photo en particulier sur une page en comportant plusieurs. Il me faudrait le code pour pouvoir la faire zoomer au survol de la souris sans que les suivantes se mettent à zoomer elles-mêmes....
Sinon j'aimerai aussi savoir comment zoomer sur une photo en particulier sur une page en comportant plusieurs. Il me faudrait le code pour pouvoir la faire zoomer au survol de la souris sans que les suivantes se mettent à zoomer elles-mêmes....
Peut etre à voir du coté des Rollover ?
http://tecfa.unige.ch/themes/FAQ-FL/rollover/rollover.html#resutltat
Mais je ne sais pas si cela convient vraiment pour zoomer (si zoom très grand)
http://tecfa.unige.ch/themes/FAQ-FL/rollover/rollover.html#resutltat
Mais je ne sais pas si cela convient vraiment pour zoomer (si zoom très grand)
Merci beaucoup, c'est réussi.
J'aimerai utiliser le principe du rolllover mais lorsque j' entre les coordonnées dans ma page html, je ne peux qu'en mettre un car dès que j' essaie de mettre deux boutons en rollover le premier qui marchait bien lorsqu'il était seul ne fonctionne plus ainsi quele second. j'aimerai savoir quel code il faut taper afin que je puisse placer autant de rollover que je desire.
Merci d' avance.
ps:
Je vous donnes les codes que j'ai entré au cas ou ils vous aiguieraient sur la marche à suivre:
A entrer dans le HEAD:
<script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "bouton_vert.jpg";
end -->
</script>
A entrer dans le BODY:
<a href="javascript:window.close();" onmouseover="bouton.src = 'bouton_vert.jpg';"
onmouseout="bouton.src = 'bouton_bleu.jpg';"><img src="bouton_bleu.jpg" border=0 width="89"
height="30" name=bouton></a>
Lorsque je tente de multiplier ce dernier dans la même page, les effets de rollover ne fonctionnent plus :(
J'aimerai utiliser le principe du rolllover mais lorsque j' entre les coordonnées dans ma page html, je ne peux qu'en mettre un car dès que j' essaie de mettre deux boutons en rollover le premier qui marchait bien lorsqu'il était seul ne fonctionne plus ainsi quele second. j'aimerai savoir quel code il faut taper afin que je puisse placer autant de rollover que je desire.
Merci d' avance.
ps:
Je vous donnes les codes que j'ai entré au cas ou ils vous aiguieraient sur la marche à suivre:
A entrer dans le HEAD:
<script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "bouton_vert.jpg";
end -->
</script>
A entrer dans le BODY:
<a href="javascript:window.close();" onmouseover="bouton.src = 'bouton_vert.jpg';"
onmouseout="bouton.src = 'bouton_bleu.jpg';"><img src="bouton_bleu.jpg" border=0 width="89"
height="30" name=bouton></a>
Lorsque je tente de multiplier ce dernier dans la même page, les effets de rollover ne fonctionnent plus :(
Bonjour inspire toi du code source de la page , pour voir comment l'auteur a fait pour coder en fait.
>> Rollover
C'est très instructif d'afficher la source des pages ;)
Pour les voir sur Firefox tu fais le raccourci clavier CTRL U
et sous Internet Explorer tu fais il me semble Fichier/Afficher la source.
>> Rollover
C'est très instructif d'afficher la source des pages ;)
Pour les voir sur Firefox tu fais le raccourci clavier CTRL U
et sous Internet Explorer tu fais il me semble Fichier/Afficher la source.
