Utilisation balise iframe et IE

Version imprimable

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:

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é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ène</span><br> <span class="nomacteurs"> <a href="Acteurs/regismes.jpg" width="304px" height="446px">Régis Curty</a></span> </div> <div class="cadrephotosacteurs"> <iframe name="frame2" width="304px" height="446px" marginheight="0px" marginwidth="0px"></iframe> </div>

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:

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:

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:

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>

26/02/2016, 13h56
Monsieur Fernand

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

Voilà : ;)

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

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:

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

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

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

Code:

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

(enlever le <br> qui suit)

CSS :
Code:

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; }

26/02/2016, 17h52
Monsieur Fernand

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.
26/02/2016, 18h48
Invité

Citation:

Envoyé par Monsieur Fernand

... car là, je pars pour la première...

Alors, comme le veut la tradition, je vous dis à tous : "M...." ;) et "Bon spectacle !" :bravo:

N.B. Pense à cliquer sur :plusser: si mes réponses t'ont aidé ;)
28/02/2016, 00h54
Monsieur Fernand

Merci, cela s'est très bien passé, une bonne soirée de franche rigolade pour une cinquantaine de spectateurs, très bien pour une première... On attaque les grandes salles la semaine prochaine (200 spectateurs), l'opulence en somme... ;). Encore merci pour tout.