Ouvrir un lien dans une nouvelle page avec un select sans javascript

**laurentSc** · 14/12/2012, 14h09

Bonjour,

je voudrais faire ce qui est marqué dans le titre ; sans javascript, car j'ai une solution avec cela, mais je suis dans un environnement qui ne le tolère pas. Voici la solution actuelle, qui ouvre les liens dans la page courante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div align="center">
<form>
<select  name="combo"onchange="window.location=this.value;">
<option value="">test</option>
<option value="http://www.developpez.net/forums/newthread.php?do=newthread&f=39" >forum HTML</option>
<option value="http://www.google.fr/">GOOGLE</option>
</select>
</form>
</div>

**Bovino** · 14/12/2012, 14h15

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onchange="window.location=this.value;"

Sans JavaScript bien entendu...

Alors :

Ce n'est pas possible.
Puisque ton onchange fonctionne, "l'environnement qui ne le tolère pas", c'est pipeau.

**laurentSc** · 14/12/2012, 15h01

Puisque ton onchange fonctionne, "l'environnement qui ne le tolère pas", c'est pipeau.

Je me garderai de le rapporter à l'auteur du logiciel que j'utilise...

Sans JavaScript bien entendu...

Tu as raison de te moquer ; plus précisément, autrement que ce que j'ai tenté (que j'ai trouvé là), c'est-à-dire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
  <script language="JavaScript"> function ChangeUrl(formulaire) { if (formulaire.combo.selectedIndex != 0) 
{ var url ; url = formulaire.combo.options[formulaire.combo.selectedIndex].value; 
window.open(url,'_blank','toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0'); } } 
</script>
  <title></title>
</head>
<body>
<div align="center">
<form>
  <select name="combo" onchange="ChangeUrl(this.form)">
  <option value="">ligne blanche</option>
  <option
 value="http://www.developpez.net/forums/newthread.php?do=newthread&amp;f=39">forum
HTML</option>
  <option value="http://www.developpez.com">DVP</option>
  <option value="http://www.google.com">Google</option>
  </select>
</form>
</div>
<br>
</body>
</html>

(Ca marche en local mais pas dans le logiciel)

Invité · 14/12/2012, 17h50

Bonjour Laurent,
pouquoi passer par un select, alors qu'un menu (ul/li a) ferait l'affaire ?

Sinon, tu as la solution du "pseudo-select" (en div/ul/li a) :
- ça ressemble à un select ;
- ça a le gout du select ;
- mais ce n'est pas un select.

**laurentSc** · 14/12/2012, 23h44

Merci pour ta réponse, Jérôme ; j'essaierai demain.

J'ai pas compris le pseudo-select, mais la 1e solution me convient.

**laurentSc** · 16/12/2012, 22h57

Je reviens sur le sujet car le menu ul li que je connais contient du javascript (pour tenter de faire marcher, j'ai tout mis dans le même fichier (et dans le body) (html, js et css)) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
  <title>Menu horizontal d&eacute;roulant vers le bas</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <meta http-equiv="Content-Language" content="fr">
</head>
<body>
  <style>
/******** Feuille de styles du menu ************/
.menu{
float: left;
margin: 2px;
padding: 2px;
}
.titreMenu, .contenuMenu, .lienMenu{
color: #000000;
}
.titreMenu, .contenuMenu{
border: 2px outset #AAAAAA;
width: 120px;
text-align: center;
margin: 0px;
padding: 0px;
}
.contenuMenu{
display: none;
position: absolute;
background-color: #FFFFFF;
}
.menuOverflow{
overflow: auto;
height: 200px;
}
.itemOver{
background-color: #AAAAFF
}
.itemOut{
background-color: #FFFFFF;
}
.lienMenu{
text-decoration: none;
}
.crlf{
clear: both;
/*visibility: hidden;*/
}
/******** Fin de la feuille de styles du menu ************/
  </style>
  <script>
  /******** Debut du script du menu ************/
var timer = null;
var objOut = null;
 
function mouseOut(obj)
{
   var elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "none";
   
   document.getElementById(obj.id+"Titre").className="titreMenu itemOut";
 
   //instruction a placer a la fin de la fonction
   timer = null;
}
 
function fout(obj)
{
   objOut = obj;
   if (timer==null)
   {
      timer = setTimeout("mouseOut(objOut)","1000");
   }
}
 
 
function fover(obj)
{
   var elmt;
   clearTimeout(timer);
   timer = null;
 
   elmt = document.getElementById(obj.id+"Item");
   elmt.style.display = "block";
 
   document.getElementById(obj.id+"Titre").className="titreMenu itemOver";
 
   if (objOut!=obj && objOut!=null)
   {
      mouseOut(objOut);
   }
}
 
 
function sousmenu3E()
{
var test1= document.getElementById("blabla");
test1.style.display="none";
}
 
function sousmenu3E_out()
{
var test1= document.getElementById("blabla");
test1.style.display="block";
}
 
function sousmenu3F_over()
{
var test1= document.getElementById("test");
test1.style.display="none";
}
 
function sousmenu3F_out()
{
var test1= document.getElementById("test");
test1.style.display="block";
}
 
function sousmenu3D_over()
{
var test1= document.getElementById("test2");
test1.style.display="none";
}
 
function sousmenu3D_out()
{
var test1= document.getElementById("test2");
test1.style.display="block";
}
 
/******** Fin du script du menu ************/
  </script>
<!-- Debut code HTML du menu --><!-- Debut Menu 1 -->
<div class="menu" id="Menu1" onmouseout="fout(this)"
 onmouseover="fover(this)">
<div class="titreMenu itemOut" id="Menu1Titre">Menu
1</div>
<div class="contenuMenu" id="Menu1Item">
<div class="itemOut" onmouseout="this.className='itemOut'"
 onmouseover="this.className='itemOver'"><a href="http://www.google.fr" target="_blank"
 class="lienMenu">google</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'"
 onmouseover="this.className='itemOver'"><a href="#"
 class="lienMenu">Sous menu 12</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'"
 onmouseover="this.className='itemOver'"><a href="#"
 class="lienMenu">Sous menu 13</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'"
 onmouseover="this.className='itemOver'"><a href="#"
 class="lienMenu">Sous menu 14</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'"
 onmouseover="this.className='itemOver'"><a href="#"
 class="lienMenu">Sous menu 15</a></div>
<div class="itemOut" onmouseout="this.className='itemOut'"
 onmouseover="this.className='itemOver'"><a href="#"
 class="lienMenu">Sous menu 16</a></div>
</div>
</div>
<!-- Fin Menu 1 -->
<div><br>
<br>
</div>
<hr class="crlf">
</body>
</html>

et ça ne convient pas au logiciel dans lequel je veux mettre ça ; y a-t-il une autre solution ?

Invité · 17/12/2012, 09h51

Tu ne nous expliques toujours pas ce que tu veux OBTENIR au FINAL.

**laurentSc** · 17/12/2012, 19h15

Désolé du temps de réponse important, mais dans la journée, je n'avais plus internet

La solution du menu ul/li, si elle marchait ici, irait très bien : sur survol (ou clic) d'un texte, on affiche une liste (déroulante ou fixe) de textes avec des liens (à ouvrir dans une nouvelle fenêtre).

**NoSmoking** · 17/12/2012, 22h17

Bonsoir,

La solution du menu ul/li, si elle marchait ici, irait très bien :

pourquoi cela ne marcherait-il pas ?

**laurentSc** · 18/12/2012, 21h54

Désolé de mettre un temps fou à répondre : hier, je n'avais pas internet et aujourd'hui plein de choses à faire...
Donc

pourquoi cela ne marcherait-il pas ?

car il y a du js dans le code et l'environnement dans lequel je mets mon code ne le tolère pas et pour en être sûr, j'ai mis un truc très simple dans une page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<script>
alert('test');
</script>

et on ne voit rien...

**thelvin** · 18/12/2012, 23h49

Ya jamais eu besoin de JavaScript pour faire une liste avec des liens dedans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<ul>
  <li><a href="http://site1.fr">Site 1</a></li>
  <li><a href="http://site2.fr">Site 2</a></li>
</ul>

et CSS pour styliser.

Il faudrait quand même savoir ça, avant d'essayer de faire des trucs d'entreprise. Apprendre sur le tas ça marche pour certains, mais on a pas envie de perdre notre temps alors que eux n'ont pas pris sur le leur.

Par ailleurs, si <script> ne marche pas dans cet environnement, c'est effectivement pas une bonne idée d'essayer de le gruger avec du JavaScript.
Mais onchange marche apparemment très bien. Donc :
- Tu peux probablement tout mettre dans onchange. À la place de <script> tu mets tout dans onchange. C'est moche mais ça devrait passer.
- Il est probable que ce machin soit juste incapable de lire <head>. Il suffit sans doute de mettre <script> juste avant le <select>

**laurentSc** · 19/12/2012, 21h51

Ya jamais eu besoin de JavaScript pour faire une liste avec des liens dedans :...

T'inquiète pas ; je le savais bien ! Mais ce que je souhaite, c'est que cette liste n'apparaisse que lors du survol d'un certain texte ; mon idée est donc de mettre cette liste dans une <div> puis sur "onmouseover" du texte, mettre le display de celui-ci à "block" et à "none" sur "onmouseout". Cela dit, même en local, il ne se produit rien, mais je ne sais si je fais correctement les choses :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<span onmouseover="javascript:divtest.style.display=block"
 onmouseout="javascript:divtest.style.display=none">test</span>
<div id="divtest">
<ul>
  <li>1</li>
  <li>2</li>
</ul>
</div>

**thelvin** · 20/12/2012, 02h19

Envoyé par laurentSc

T'inquiète pas ; je le savais bien ! Mais ce que je souhaite, c'est que cette liste n'apparaisse que lors du survol d'un certain texte ;

Eh ben c'est pas ce que tu as dit.

Solution CSS : :hover .

Envoyé par laurentSc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<span onmouseover="javascript:divtest.style.display=block"
 onmouseout="javascript:divtest.style.display=none">test</span>
<div id="divtest">
<ul>
  <li>1</li>
  <li>2</li>
</ul>
</div>

Manque les apostrophes autour de 'block' et 'none'

Invité · 20/12/2012, 09h24

BOnjour Laurent,
ce n'est ni plus ni moins que le principe d'un menu avec sous-menu :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#lienvoir { 
	position:relative; 
	width:150px; 
}
#lienvoir ul { 
	display:none; 
	position:absolute; 
	top:2px; 
	left;0; 
	background:#fff; 
	border:1px solid #ccc; 
}
#lienvoir:hover ul { 
	display:block; 
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<div id="lienvoir">afficher
	<ul>
	  <li><a href="#">lien 1</a></li>
	  <li><a href="#">lien 2</a></li>
	</ul>
</div>

Garanti 100% sans JavaScript.

**laurentSc** · 21/12/2012, 18h03

Bonsoir,

je viens de faire ça ; comme j'ai pas accès au head, j'ai tout mis dans le body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<style>
#lienvoir { position:relative; width:150px; }
#lienvoir ul { display:none; position:absolute; top:2px; left;0; background:#fff; border:1px solid #ccc; }
#lienvoir:hover ul { display:block; } </style>
<div id="lienvoir">afficher
<ul>
  <li><a href="#">lien 1</a></li>
  <li><a href="#">lien 2</a></li>
</ul>
</div>

Mais quand je survole "afficher" (testé en local), il ne se passe rien...

**Eric2a** · 21/12/2012, 19h03

Salut,

Je désire créer un jeu comme "Call of Duty". Quel logiciel me conseillez-vous ?

Word
Multiplan
DBase III+

Plus sérieusement...

Envoyé par Bovino

c'est pipeau

Envoyé par laurentSc

Je me garderai de le rapporter à l'auteur du logiciel que j'utilise...

Rapporte le logiciel à son auteur.

Vraiment sérieusement...
Essaie de prendre le temps de chercher/tester un vrai éditeur de pages Web qui ne sera pas un frein lors du développement de tes projets (honorables en plus) présents et futurs.

**laurentSc** · 21/12/2012, 22h04

Non, je n'abandonne pas ; ça fait 15 ou 20 ans que ma boîte travaille avec eux (moi que 6, vu qu'avant, je connaissais rien au web). La nouvelle version de ce logiciel (vieille de 1 an) est fondamentalement différente de la précédente ; c'est très complexe, mais je suis persuadé que mes difficultés pour faire ce que je souhaite vienne du fait que je n'ai pas suffisamment apprivoisé la bête, mais que je finirai par y arriver.

**NoSmoking** · 22/12/2012, 08h20

Au vu du code aucune raison que cela ne marche pas à moins que...peut être qu'il n'y est pas de DOCTYPE.

**laurentSc** · 22/12/2012, 10h01

J'ai vérifié ; il y a bien un doctype et d'ailleurs, le contraire serait vraiment surprenant, vu qu'il s'agit d'un logiciel de gestion documentaire basé sur 4D (Le site web sert donc à offrir aux utilisateurs des services pour accéder aux documents dans la base de données).

Ce qui me gêne, par contre, c'est que le code de Jérôme (jreaux62) ne tourne pas même en local...

Invité · 22/12/2012, 10h14

Bonjour Laurent,

Envoyé par laurentSc

Ce qui me gêne, par contre, c'est que le code de Jérôme (jreaux62) ne tourne pas même en local...

Si tu n'as pas mis la balise <style> (CSS) dans le <head>, ce n'est pas surprenant (bien qu'à priori, ça marche aussi comme ça...).

Envoyé par laurentSc

je viens de faire ça ; comme j'ai pas accès au head, j'ai tout mis dans le body :

Explique-nous POURQUOI tu n'as pas accès au <head> ???

Cette solution fonctionne très bien, même sur I.E. (testé IE9) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
#lienvoir { position:relative; width:150px; }
#lienvoir ul { display:none; position:absolute; top:2px; left;0; background:#fff; border:1px solid #ccc; }
#lienvoir:hover ul { display:block; }
</style>
<div id="lienvoir">afficher
	<ul>
	  <li><a href="#">lien 1</a></li>
	  <li><a href="#">lien 2</a></li>
	</ul>
</div>

Ouvrir un lien dans une nouvelle page avec un select sans javascript

HTML

Discussions similaires

Partager

Partager