Une aide serais précieuse ^^
Daglas
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
Daglas Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Daglas Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Tous d abord je voudrais m'excuser si je ne pose pas ma question au bon endroit.
étant débutant dans les langages utilisés sur internet, je recherche quelques conseils pour le travail que je dois fournir. En effet une demande m'a été faite pour créer un pseudo site à utiliser en local pour mes collaborateurs.
Le site se compose comme suit
Une carte standard ou j'ai sélectionné différentes zones cliquables ( rues )et qui ouvrent un document word pour chacune d'entre elle
jusque là rien de mystérieux j'ai réussi à trouver les informations sur le forum.
La ou cela se complique c'est que dans certaines zones , j'ai plusieurs références attachées.
Ce que je souhaiterais c'est pouvoir au passage du pointeur de la souris faire apparaitre une liste déroulante me permettant de cliquer sur un des choix possible et ouvrir le document correspondant.
J'ai parcouru plusieurs posts et forums, mais le résultat est, je dois admettre, un peu ambigu ainsi que peu compréhensible pour mon niveau. J'ai malgré tout utilisé les codes proposés mais cela ne correspond pas à ce que je recherche.
Si l'un d'entre vous pourrait me fournir quelques informations, je lui en serais très reconnaissant.
Bonne journée à tous et merci.
Tous d abord je voudrais m'excuser si je ne pose pas ma question au bon endroit.
étant débutant dans les langages utilisés sur internet, je recherche quelques conseils pour le travail que je dois fournir. En effet une demande m'a été faite pour créer un pseudo site à utiliser en local pour mes collaborateurs.
Le site se compose comme suit
Une carte standard ou j'ai sélectionné différentes zones cliquables ( rues )et qui ouvrent un document word pour chacune d'entre elle
jusque là rien de mystérieux j'ai réussi à trouver les informations sur le forum.
La ou cela se complique c'est que dans certaines zones , j'ai plusieurs références attachées.
Ce que je souhaiterais c'est pouvoir au passage du pointeur de la souris faire apparaitre une liste déroulante me permettant de cliquer sur un des choix possible et ouvrir le document correspondant.
J'ai parcouru plusieurs posts et forums, mais le résultat est, je dois admettre, un peu ambigu ainsi que peu compréhensible pour mon niveau. J'ai malgré tout utilisé les codes proposés mais cela ne correspond pas à ce que je recherche.
Si l'un d'entre vous pourrait me fournir quelques informations, je lui en serais très reconnaissant.
Bonne journée à tous et merci.
A voir également:
- Une aide serais précieuse ^^
- Sites pirates : la (précieuse) liste noire de l'Union européenne - Accueil - Outils
3 réponses
Bonjour,
En javascript il est possible d'attribuer un gestionnaire d'évènement (onclick par exemple) à une zone d'une image. Ensuite on crée une fonction qui se base sur la position de la sourie pour afficher un menu déroulant (<select></select>).
C'est juste une proposition. Autrement on peut aussi placer plusieurs <select></select> aux positions que l'on veut sur la page (en CSS position:absolute;left ... top) et leur met un Z-index:-1 (CSS) puis au click en javascript on change ce Z-index ce qui fait apparaître le select.
Plus d'info ici => http://www.w3schools.com/js/js_image_maps.asp
En javascript il est possible d'attribuer un gestionnaire d'évènement (onclick par exemple) à une zone d'une image. Ensuite on crée une fonction qui se base sur la position de la sourie pour afficher un menu déroulant (<select></select>).
C'est juste une proposition. Autrement on peut aussi placer plusieurs <select></select> aux positions que l'on veut sur la page (en CSS position:absolute;left ... top) et leur met un Z-index:-1 (CSS) puis au click en javascript on change ce Z-index ce qui fait apparaître le select.
Plus d'info ici => http://www.w3schools.com/js/js_image_maps.asp
Bonjour,
La solution la plus simple est de mettre un lien pointant vers une page HTML contant la liste des liens qui correspondent à la zone sélectionné. Par exemple je clique sur la zone A j'arrive sur la page HTML qui correspond à cette zone (A). Sur cette page se trouve tous les .doc qui correspondent à la zone A.
Une autre solution plus complexe en javascript c'est d'utiliser des boutons <select></select>. Par exemple quand je clique sur la zone B un boutton <select></select> apparaît (au premier plan Z-index:2 en CSS), puis je peux faire dérouler ce boutton <select></select> pour choisir le .doc que je veux. Lorsque je clique sur une des <option></option> du <select></select> je suis redirigé vers le .doc correspondant. Cette solution demande des connaissances en javascript et CSS.
La solution la plus simple est de mettre un lien pointant vers une page HTML contant la liste des liens qui correspondent à la zone sélectionné. Par exemple je clique sur la zone A j'arrive sur la page HTML qui correspond à cette zone (A). Sur cette page se trouve tous les .doc qui correspondent à la zone A.
Une autre solution plus complexe en javascript c'est d'utiliser des boutons <select></select>. Par exemple quand je clique sur la zone B un boutton <select></select> apparaît (au premier plan Z-index:2 en CSS), puis je peux faire dérouler ce boutton <select></select> pour choisir le .doc que je veux. Lorsque je clique sur une des <option></option> du <select></select> je suis redirigé vers le .doc correspondant. Cette solution demande des connaissances en javascript et CSS.
Bonjour,
J'ai trouvé un script qui me parait pas trop mal à modifier car il propose en fait ce que je recherche.
Comme suit : https://forum.alsacreations.com/topic-23-34429-1-Etrange-caprice-du-menu-horizontal-sous-IE6.html
J'ai essayé d'adapter ce script mais s'il fonctionne assez bien j'ai un soucis quand au menu. En effet je souhaiterai le voir apparaitre sous le pointeur.
Je te met mon code adapté pourrais tu me dire si je suis sur la bonne voie?
Merci en tout cas de te donner autant de mal.
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 0; i<=30; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
font-variant:small-caps;
}
#menu {
position: absolute; placement du menu, à modifier selon vos besoins
top: 0;
left: 0;
z-index:2;
width: 100%;
}
#menu dl {
float: left;
width: 125px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #d6c482;
#menu dd {
display: none;
border: 0px solid gray;
margin: 5px;
}
#menu li {
text-align: center;
background: #d6c482;
list-style-position: outside;
list-style-type: disc;
}
#menu li a, #menu dt a {
color: #663300;
text-decoration: none;
display: block;
height: 100%;
border: none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #FFFFCC;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
}
-->
</style>
</head>
<body>
<img src="43.gif" width="600" height="600" border="0" alt="Neudorf" usemap ="#neudorfmap" />
<map id ="neudorfmap" name="neudorfmap">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');"><area shape="poly" coords="2,19,39,92,55,130,74,193,63,196,48,142,27,91,7,53,1,40"
onMouseOver="writeText('Rue du neufeld')"
href ="rue du neufeld.doc" target ="_blank" alt="rue du neufeld" /></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul >
<li ><a href="rue du neufeld.doc" >rue du Neufeld</a></li>
<li ><a href="rue du neufeld2.doc" >rue du Neufeld2</a></li>
</ul>
</dd>
</dl>
<dt onmouseover="javascript:montre('smenu2');"><area shape="poly" coords="101,1,110,3,96,54,103,113,100,117,58,138,55,130,94,110,87,58"
onMouseOver="writeText('Rue de Chatenois')"
href ="Rue de Châtenois.doc" target ="_blank" alt="rue de Châtenois" /></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul >
<li ><a href="rue de châtenois.doc" >rue de Châtenois</a></li>
</ul>
</dd>
</dl>
Pardon si je l'ai mal inseré dans le message.
J'ai trouvé un script qui me parait pas trop mal à modifier car il propose en fait ce que je recherche.
Comme suit : https://forum.alsacreations.com/topic-23-34429-1-Etrange-caprice-du-menu-horizontal-sous-IE6.html
J'ai essayé d'adapter ce script mais s'il fonctionne assez bien j'ai un soucis quand au menu. En effet je souhaiterai le voir apparaitre sous le pointeur.
Je te met mon code adapté pourrais tu me dire si je suis sur la bonne voie?
Merci en tout cas de te donner autant de mal.
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 0; i<=30; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
font-variant:small-caps;
}
#menu {
position: absolute; placement du menu, à modifier selon vos besoins
top: 0;
left: 0;
z-index:2;
width: 100%;
}
#menu dl {
float: left;
width: 125px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #d6c482;
#menu dd {
display: none;
border: 0px solid gray;
margin: 5px;
}
#menu li {
text-align: center;
background: #d6c482;
list-style-position: outside;
list-style-type: disc;
}
#menu li a, #menu dt a {
color: #663300;
text-decoration: none;
display: block;
height: 100%;
border: none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #FFFFCC;
font-family: "Times New Roman", Times, serif;
font-size: 16px;
}
-->
</style>
</head>
<body>
<img src="43.gif" width="600" height="600" border="0" alt="Neudorf" usemap ="#neudorfmap" />
<map id ="neudorfmap" name="neudorfmap">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre('smenu1');"><area shape="poly" coords="2,19,39,92,55,130,74,193,63,196,48,142,27,91,7,53,1,40"
onMouseOver="writeText('Rue du neufeld')"
href ="rue du neufeld.doc" target ="_blank" alt="rue du neufeld" /></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul >
<li ><a href="rue du neufeld.doc" >rue du Neufeld</a></li>
<li ><a href="rue du neufeld2.doc" >rue du Neufeld2</a></li>
</ul>
</dd>
</dl>
<dt onmouseover="javascript:montre('smenu2');"><area shape="poly" coords="101,1,110,3,96,54,103,113,100,117,58,138,55,130,94,110,87,58"
onMouseOver="writeText('Rue de Chatenois')"
href ="Rue de Châtenois.doc" target ="_blank" alt="rue de Châtenois" /></dt>
<dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul >
<li ><a href="rue de châtenois.doc" >rue de Châtenois</a></li>
</ul>
</dd>
</dl>
Pardon si je l'ai mal inseré dans le message.
J'ai suivi tes conseils et je t'en remercie, mais je dois admettre que je patauge un peu dans la semoule ^^.
Bon apres avoir essayé les script dont tu ma fais parvenir le lien c'est deja un net progres par rapport à mon usine à gaz par contre comment procèdes tu pour integrer une liste avec des lien dans un onmouseover ?
Les exemples que je parcoure sont tous lié à une seule entrée par zone area...Hors dans certain cas j'ai 6 à 7 entrée pour une seule zone. Doisje peut être mettre le bout de code que j'utilise ou cela semble-t-il supperflu?
Merci pour les réponses