Utilisation balise iframe et IE

**Monsieur Fernand** · 26/02/2016, 00h49

Bonjour à tous,

je suis nouveau sur ce forum, j'espère poster sur le bon forum, et je viens vous soumettre un problème que je rencontre avec IE.
Avec mes maigres connaissances, j'ai créé un site pour une petite compagnie de théatre amateur, et pour chaque pièce jouée, je présente les acteurs, avec leur portrait.
Concrètement, j'ai créé deux cadres (div) côte à côte, les noms des acteurs à gauche (lien a href) et l'affichage des photos dans le cadre de droite à l'aide de iframe.
En théorie, lorsque l'on clique sur un nom dans le cadre de gauche, le portrait correspondant apparaît dans le cadre de droite.
En pratique, cela fonctionne parfaitement bien sous Chrome, Firefox, Safari et Opéra mais pas du tout sous IE (étonnant, non ?!?

). Au lieu de s'afficher dans le cadre de droite, la photo s'ouvre dans une nouvelle page.
En cherchant deci delà sur le net, j'ai bien compris que ma méthode était désuète, mais j'aimerai savoir d'une part pourquoi cela ne fonctionne pas sous IE, et d'autre part, quelle méthode simple puis-je utiliser pour obtenir le même résultat fonctionnant sous tous navigateurs.

Merci d'avance de vos réponses éclairées.

EDIT : j'ai omis de vous fournir le lien, rien ne vaut une illustration par l'exemple : http://theatrelaserpentine.fr/saison...016acteurs.php

ainsi que le code :

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
 
    <div class="cadrenomsacteurs"><br>
    <span class="titreinfo">Les acteurs</span><br>
    <span class="nomacteurs">
    <base target="frame2">
	<a href="Acteurs/gilles.jpg" width="304px" height="446px">Gilles Bardey</a><br>
	<a href="Acteurs/anny.jpg" width="304px" height="446px">Anny Bertrand</a><br>    
	<a href="Acteurs/jeanclaude.jpg" width="304px" height="446px">Jean-Claude Boilloz</a><br>
	<a href="Acteurs/christophe.jpg" width="304px" height="446px">Christophe Chaussarot</a><br>
	<a href="Acteurs/regis.jpg" width="304px" height="446px">R&eacute;gis Curty</a><br>    
	<a href="Acteurs/rosine.jpg" width="304px" height="446px">Rosine Fichet</a><br>
	<a href="Acteurs/christelle.jpg" width="304px" height="446px">Christelle Petit-Pas</a><br>
	<a href="Acteurs/noemie.jpg" width="304px" height="446px">Noémie Robardet</a><br>
	<a href="Acteurs/sonia.jpg" width="304px" height="446px">Sonia Roussey</a><br> 
	<a href="Acteurs/patou.jpg" width="304px" height="446px">Patricia Vidal</a>       
    </span><br>
    <span class="titreinfo">Metteur en sc&egrave;ne</span><br>
    <span class="nomacteurs">
	<a href="Acteurs/regismes.jpg" width="304px" height="446px">R&eacute;gis Curty</a></span>		
    </div>
    <div class="cadrephotosacteurs">
    <iframe name="frame2" width="304px" height="446px" marginheight="0px" marginwidth="0px"></iframe>    
    </div>

Invité · 26/02/2016, 10h17

bonjour, et bienvenu sur DVP,

Quand on parle d'IE, il faut préciser la version (7 ? 8 ? autre ?)

Concernant la balise <base ...> : https://developer.mozilla.org/fr/doc...L/Element/base (voir "compatibilité des navigateurs")

L'utilisation d'iframe est, tant que faire se peut, à éviter.

Voici une alternative, SANS iframe : http://codepen.io/jreaux62/pen/YqKgaX

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
<div class="page">
  <div class="cadrenomsacteurs"><br>
    <span class="titreinfo">Les acteurs</span><br>
    <span class="nomacteurs">
 
      <a href="#" onclick="affiche_photo('Acteurs/gilles.jpg');return false;">Gilles Bardey</a><br>
      <a href="#" onclick="affiche_photo('Acteurs/anny.jpg');return false;">Anny Bertrand</a><br>    
      <a href="#" onclick="affiche_photo('Acteurs/jeanclaude.jpg');return false;">Jean-Claude Boilloz</a><br>
      <a href="#" onclick="affiche_photo('Acteurs/christophe.jpg');return false;">Christophe Chaussarot</a><br>
      <a href="#" onclick="affiche_photo('Acteurs/regis.jpg');return false;">R&eacute;gis Curty</a><br>    
      <a href="#" onclick="affiche_photo('Acteurs/rosine.jpg');return false;">Rosine Fichet</a><br>
      <a href="#" onclick="affiche_photo('Acteurs/christelle.jpg');return false;">Christelle Petit-Pas</a><br>
      <a href="#" onclick="affiche_photo('Acteurs/noemie.jpg');return false;">Noémie Robardet</a><br>
      <a href="#" onclick="affiche_photo('Acteurs/sonia.jpg');return false;">Sonia Roussey</a><br> 
      <a href="#" onclick="affiche_photo('Acteurs/patou.jpg');return false;">Patricia Vidal</a>       
      </span><br>
    <span class="titreinfo">Metteur en sc&egrave;ne</span><br>
    <span class="nomacteurs">
      <a href="#" onclick="affiche_photo('Acteurs/regismes.jpg');return false;">R&eacute;gis Curty</a></span>
  </div>
  <div id="cadrephotosacteurs"></div>
</div>

Dans le HTML remplacer <div class="cadrephotosacteurs"><iframe ....></div> par <div id="cadrephotosacteurs"></div>.
Donc dans le CSS, il faut remplacer .cadrephotosacteurs par #cadrephotosacteurs.
(CSS à adapter

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
16
17
18
19
#cadrephotosacteurs {
  float: left;
  height: 460px;
  margin-left: 555px;
  margin-top: -465px;
  width: 320px;
  background-color: #ff9;
  border: 3px solid black;
  border-radius: 10px;
  box-shadow: 3px 3px 20px red;
  text-align: center;
}
 
#cadrephotosacteurs img {
  width: 304px;
  height: 446px;
  margin: 5px auto;
  border: 3px inset black;
}

Et pour finir, un peu de JavaScript, pour l'affichage des photos :

Code javascript :

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

1
2
3
4
5
6
7
<script type="text/javascript">
function affiche_photo(imgsrc){
  var photo = '<img src="'+imgsrc+'" alt=""/>';
//  alert (photo); // TEST
  document.getElementById('cadrephotosacteurs').innerHTML = photo;
}
</script>

**Monsieur Fernand** · 26/02/2016, 13h56

Bonjour,

tout d'abord, merci beaucoup, j'ai effectué les modifications selon vos préconisations, et effectivement, cela fonctionne parfaitement. A nouveau un grand merci.

En revanche, je rencontre un souci par rapport au CSS. En effet, je ne parviens pas, malgré de nombreux essais, à repositionner la fenêtre de droite correctement http://www.theatrelaserpentine.fr/sa...016acteurs.php. Là, je cale... Auriez-vous une idée de ce qui coince ? J'ai modifié à plusieurs reprises le margin-top, le margin-left, rien n'y fait.

Je vous remercie par avance d'un éventuel tuyau...

Invité · 26/02/2016, 15h42

Voilà :

http://codepen.io/jreaux62/pen/YqKgaX

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
#cadrephotosacteurs {
    background-color: #ff9;
    border: 3px solid black;
    border-radius: 10px;
    box-shadow: 3px 3px 20px red;
    float: left;
    height: 460px;
    margin-left: 110px;
    margin-top: 10px;
    text-align: center;
    width: 320px;
}

REMARQUE : pour afficher les photos AU SURVOL des noms des acteurs :
Remplacer onclick par onmouseover :

Code :

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

      <a href="#" onmouseover="affiche_photo('Acteurs/gilles.jpg');return false;">Gilles Bardey</a>

OU, pour avoir les DEUX onclick + onmouseover (c'est mieux sur tablette tactile !) :

Code :

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

      <a href="#" onclick="affiche_photo('Acteurs/gilles.jpg');return false;" onmouseover="affiche_photo('Acteurs/gilles.jpg');return false;">Gilles Bardey</a>

N.B. Pour les TITRES (sur TOUTES les pages)
au lieu de balises <span>, il faut utiliser des balises d'"entête" <h1>, <h2>,... ou <h6> : c'est mieux pour la sémantique et le référencement.

Remplacer (PARTOUT) :

Code :

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

1
2
<span class="titreinfo">Les acteurs</span>
<br>

Par :

Code :

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

<h4 class="titreinfo">Les acteurs</h4>

(enlever le <br> qui suit)

CSS :

Code css :

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

1
2
3
4
5
6
7
8
.titreinfo {
    font-family: "Henny Penny",cursive;
    font-size: 28px;
    margin: 0; /* AJOUTER */
    padding: 0; /* AJOUTER */
    text-align: center;
    text-shadow: 2px 2px 5px silver;
}

**Monsieur Fernand** · 26/02/2016, 17h52

Super génial, merci pour tout... Pour le onmouseover, je verrai dès demain, car là, je pars pour la première...
Encore merci de votre compétence et votre gentillesse.