Remplacer iframe par div avec roll over

[ladaman]

Salut à tous,

Je sais qu'il existe d'autres post très semblables au mien mais j'ai quand même besoin de conseil car un détail semble faire toute la différence.

Dans ma page j'ai une partie fixe et une iframe. Dans la partie fixe j'ai 4 boutons différents et ces boutons appellent chacun une page html différente (qui apparaît dans l'Iframe) quand on les survole.

J'aimerais remplacer cette iframe par une div à laquelle j'applique la class overflow mais mon gros problème est que je n'arrive pas à gérer le changement de page html (celle qui apparaît dans l'Iframe) avec un "simple" survole (et pas un clique).

Je pense que la solution se trouve du côté de javascript pour la gestion du survol et de php pour un include dans l'iframe mais malheureusement mon niveau de "programmation" (c'est un bien grand mot vu ce que je tente de faire) ne me permet pas d'y arriver et j'en appelle donc à vot' bon coeur M'sieurs Dames.

Merci d'avance de votre aide.

[dd32]

Bonjour,
fais voir ton code stp

[ladaman]

Salut,

pour l'instant je gère le changement de mes iframe avec ce javascript:

Code: Tout sélectionner

function loadIframe(iframeName, url) {
  if ( window.frames[iframeName] ) {
    window.frames[iframeName].location = url;   
    return false;
  }
  else return true;
}


Que j'appelle avec ce html

Code: Tout sélectionner

<a href="iframe_1.htm" onmouseover="loadIframe('ifrm', this.href)">Premiere iframe</a>

et en ce qui concerne le PHP, je pensais me servir de code (trouvé sur Alsacréation: h**p://css.alsacreations.com/Tutoriels-PHP/Inclure-un-fichier-dans-un-autre-grace-a-CSS-et-PHP)

Code: Tout sélectionner

<?php
if (!isset($_GET['page'])) $page= 'accueil'; else $page= $_GET['page'];
switch($page)
{
case 'accueil': include ('accueil.txt');break;
case 'presentation': include ('presentation.txt');break;
case 'suite':include ('suite.txt');break;
case 'fin':include ('fin.txt');break;
}
?>


Qu'en pensez vous ? Je suis sur la bonne piste ?

[Serious]

Non tu es sur la mauvaise

Tu ne peux pas acceder a un autre fichier pour mettre a jour une div. Par contre, tu peux mettre l'ensemble des div dans ta page et n'en rendre qu'une seule visible.

[ladaman]

Salut Serious,

Merci pour ton aide, je vais me pencher sur ton idée.

A+

[obi]

C'est effectivemnt Serious qui a raison ;)
Tu peux faire cela avec CSS + un peu de js pour IE. Un exemple simplifié:
ton code html est une liste <dl> avec

Code: Tout sélectionner

<dt><a href="#mon-bout-de-page">passe ici pour voir mon bout de page</a></dt>
<dd id="mon-bout-de-page"><h1>Mon bout de page : titre</h1><p>blah blah</p></dd>

etc ...

La CSS resemble à ça

Code: Tout sélectionner

dl {
width: 20em;
}

dd {
display:none;
}

dl:hover + dd, dd.previousLinkHover {
display:block;
position:absolute;
top:0;
left:20em;
}

Pour faire marcher ça dans IE, un petit coup de javascript qui va ajouter/enlever la classe previousLinkHover sur le dd quand le lien le précédent et survolé.

Beauté du geste, cela reste accessible sans javascript, et sans css: idéal pour le référencement.

J'utilise un principe assez similaire pour faire des image-map "évolués":
http://www.esterel-technologies.com/ind ... ories.html
Pour le js, je ne me suis pas foulé, j'ai ajouté un truc tout fait qui aide IE à comprendre le sélecteurs CSS "avancés"