Bouton et frame

**DarkCator** · 29/07/2013, 11h27

Bonjour !

J'ai créé une page html comportant 3 frame. Dans la première frame, j'ai une page avec du texte, et un lien. Ce lien me permet en cliquant dessus d'ouvrir une page dans la 2ème frame. Or, j'aimerai remplacer ce lien par un bouton et je ne trouve pas comment faire. Auriez-vous une solution?

Merci !

**rodolphebrd** · 29/07/2013, 11h35

Bonjour et bienvenue,

l'idéal serait de transmettre votre code ou une page en ligne

Invité · 29/07/2013, 11h38

Bonjour,

Envoyé par DarkCator

... comportant 3 frame...

Pratique obsolète. Il faut éviter les frame.

Lien sur une image/bouton :

Code :

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

<a href="...."><img src="....." alt=""/></a>

**DarkCator** · 29/07/2013, 11h50

Alors pour que vous compreniez mieux.

Voici le code de ma "page d'accueil" qui comporte 3 frames :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<title> Page d'accueil </title>
 
</head>
 
<frameset cols="20%,80%">
<frame src="SatelliteSelectionLien.html" name="gauche">
<frameset rows="50%,50%">
<frame src="frame2.html" name="droit_haut">
<frame src="frame3.html" name="droit_bas">
</frameset>
</frameset>

Dans la première frame :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<title> Satellite </title>
 
</head>
 
 
<body background="espace.jpg">
 
<h1><font color="#ffffff"> Satellite Selection </h1>
<hr>
 
<td width="23%"> Hi ! Please select your Satellite </td><br><br>
<td width="23%">
<select name="Satellite name" size="1">
<option value="S1" selected>S1</option>
<option value="S2">S2</option>
<option value="S3">S3</option>
<option value="S4">S4</option>
</select></td>
 
<br>
<br>
<br> 
<br>
 
<td width="23%"> Once the Satellite selected, please click on the link below : </td><br><br>
<a href="TransponderSelection.html" target="droit_haut">Transponders Selection</a>
 
 
</body>
 
</html>

Le lien permet d'ouvrir une deuxième frame :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 
<html>
 
<head>
 
<title> Transponders Selection </title>
 
</head>
 
<body background="espace.jpg">
 
<h1><font color="#ffffff"> Transponders Selection </h1>
<hr>
 
<form name="Transponder" method="POST" action="script.php">
<input type="checkbox" name="coche" value="ON"> TR1 <br>
<input type="checkbox" name="coche" value="ON"> TR2 <br>
<input type="checkbox" name="coche" value="ON"> TR3 <br>
<input type="checkbox" name="coche" value="ON"> TR4 <br>
<br>
 
<input type="button" value="Previous" name="précédent" onclick="self.location.href='SatelliteSelectionLien.html'"><br><br>
<!-- <input type="button" value="Next" name="next" onclick="self.location.href='RC_Transponders.html'"> -->
<td width="23%"> Now please click on the link below in order to edit the caracteristics of the Radio Clusters </td><br><br>
<a href="RC_Transponders.html" target="droit_bas">Radio Clusters and their Transponders</a>
 
</body>
 
</html>

**JérémieL** · 29/07/2013, 14h19

Bonjour !

Si tu veux juste que ton lien ait l'aspect d'un bouton, tu peux utiliser du style CSS pour modifier la forme de ton lien : mettre une bordure, des coins arrondis. Je conseille cette méthode : tu veux un lien, donc mets un lien (balise a).
Sinon, tu peux faire un formulaire avec un input de type submit dedans :

Code :

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

1
2
3
<form action="maPage.html">
  <input type="submit" value="Cliquer">
</form>

Je déconseille la méthode utilisée pour ton bouton "Précédent" (changer la location sur le click) parce que niveau accessibilité c'est très moyen.

Sinon, quelques remarques :

- Pourquoi utiliser des frames ? Vire-les. Au pire, utilises des iframes, mais je ne pense pas que tu en aies besoin. Pour faire de la mise en page, on utilise plus de frames depuis le milieu des années 90.
- N'utilise pas de tableaux pour faire de la mise en page !
- Ne mets des balises <br> partout pour faire ta mise en page !
- Vire l'attribut background de l'élément body.
- Vire l'élément font.

En appliquant ces conseils, tu auras un code HTML plus propre déjà.

Ensuite, pour améliorer la mise en page, mettre des backgrounds, des couleurs etc., utilise une feuille de style CSS.