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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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>

14/12/2012, 14h15
Bovino
Code:

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

Sans JavaScript bien entendu... :roll:

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

Citation:

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...

Citation:

Sans JavaScript bien entendu... :roll:

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:

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&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)

14/12/2012, 17h50
Invité

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.
14/12/2012, 23h44
laurentSc

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

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

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:

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 ?

17/12/2012, 09h51
Invité

Tu ne nous expliques toujours pas ce que tu veux OBTENIR au FINAL.
17/12/2012, 19h15
laurentSc

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).
17/12/2012, 22h17
NoSmoking

Bonsoir,

Citation:

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

pourquoi cela ne marcherait-il pas ?
18/12/2012, 21h54
laurentSc
Désolé de mettre un temps fou à répondre : hier, je n'avais pas internet et aujourd'hui plein de choses à faire...
Donc

Citation:

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:

1 2 3 <script> alert('test'); </script>
et on ne voit rien...
18/12/2012, 23h49
thelvin
Ya jamais eu besoin de JavaScript pour faire une liste avec des liens dedans :
Code:

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>
19/12/2012, 21h51
laurentSc
Citation:

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:

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>
20/12/2012, 02h19
thelvin
Citation:

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 .
Citation:
Envoyé par laurentSc

Code:

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'

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

Code:

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:

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.

Bonsoir,

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

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...

21/12/2012, 19h03
Eric2a
Salut,

Je désire créer un jeu comme "Call of Duty". Quel logiciel me conseillez-vous ?
1. Word
2. Multiplan
3. DBase III+
Plus sérieusement...

Citation:

Citation:

Envoyé par Bovino

c'est pipeau

Citation:

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.
21/12/2012, 22h04
laurentSc

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.
22/12/2012, 08h20
NoSmoking

Au vu du code aucune raison que cela ne marche pas à moins que...peut être qu'il n'y est pas de DOCTYPE.
22/12/2012, 10h01
laurentSc

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...

Bonjour Laurent,

Citation:

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

Citation:

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:

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>

Voir 40 message(s) de cette discussion en une page