[résolu] onmouseover avec effet dans une autre frame

onmouseover avec effet dans une autre frame [résolu] - HTML/CSS - Programmation

Marsh Posté le 07-06-2011 à 14:50:32    

Bonjour,
 
Petit message d'abord pour dire, que cela fait des mois, voir des années que je viens ici et que je trouve toujours une solution à mes questions, ce qui fait que je ne me suis jamais inscrit!!!  Un grand bravo à vous donc pour ce forum vraiment complet qui aide beaucoup les jeunes professionnels que nous sommes!
 
Voici mon problème:
 
je suis en train de créer un site qui comprend 3 frames: 1 menu composé d'un tableau avec des images, 1 frame principale avec le contenu (des galleries) et 1 frame qui constitue une sorte de légende (aperçu de galerie).
 
J'arrive a mettre un effet surbrillance via la fonction onmouseover lorsque l'on survole une cellule de mon tableau. J'arrive également à envoyer la gallerie dans ma frame principale lorsque l'on clique sur la cellule. Mais ce que je n'arrive pas à faire, c'est qu'en survolant la cellule de mon tableau de menu, en plus de l'effet de surbrillance, on ait l'apperçu de galerie qui s'affiche dans la frame de légendes!
 
Voici mon index:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"  
/>
</head>
 
<FRAMESET COLS="20%,
80%", frameborder="0">
 
<FRAME SRC="menu.html" NAME="gauche">
 
<FRAMESET ROWS="80%, 20%", frameborder="0">
 
<FRAME SRC="droit.html" NAME="droite">
 
<FRAME SRC="bas.html" NAME="base">
 
</FRAMESET><noframes></noframes>
</html>
 
et voici mon menu:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
<script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"  
/>
 
</head>
 
<body>
<table border="0" align="left" cellpadding="5" cellspacing="5">
<tr>
    <td align="center"><img src="logo.jpg" width="200" height="55" /></td>
        </tr>
 
  <tr>
    <td align="center"><div id="menu">
  <li><a href="#" title="Mode" onclick="new Effect.toggle('sousMenu1','blind'); Effect.Fold('sousMenu2'); Effect.Fold('sousMenu3'); return false;" >menu1</a>
    <ul id="sousMenu1" style="display: none" class="sousMenu">
      <table border="0" cellspacing="0" cellpadding="5">
        <tr>
          <td bgcolor="#FFFFFF" width="100%" border="0" onmouseover="this.style.background='#e2e2e2'" onmouseout="this.style.background='#FFFFFF'"><A HREF="page1.html" TARGET="droite" >
          <img src="image1.jpg" width="50" height="50" /></A></td>
 
 
Le but est donc qu'en plus de l'effet onmouseover="this.style.background='#e2e2e2'", je puisse ajouter un effet onmouseover qui afficherai une page html dans la frame "base"

Message cité 1 fois
Message édité par typiac92 le 10-06-2011 à 15:05:15
Reply

Marsh Posté le 07-06-2011 à 14:50:32   

Reply

Marsh Posté le 07-06-2011 à 16:16:22    

typiac92 a écrit :


          <td bgcolor="#FFFFFF" width="100%" border="0" onmouseover="this.style.background='#e2e2e2'" onmouseout="this.style.background='#FFFFFF'"><A HREF="page1.html" TARGET="droite" >
          <img src="image1.jpg" width="50" height="50" /></A></td>
         


 
quelle horreur  [:ramones]  
 
pour ton prob, tu dois créer une fonction javascript. Soit avec de l'ajax qui va chercher dynamiquement le html sur ton serveur et qui l'affiche avec le dom (si les frames sont bien dans le dom... vu que c'est plus censé être utilisé), le plus propre. Soit en chargeant toutes les galeries dans chaque page genre dans un tableau js et en modifiant la source de la frame , toujours avec le dom, la méthode la plus sale.

Reply

Marsh Posté le 07-06-2011 à 18:57:24    

Ah, désolé, je ne savais pas que c'était si horrible que ça!!!
 
Alors ok pour la première solution mais peux-tu me préciser comment procéder parceque je ne vois pas du tout là...

Reply

Marsh Posté le 07-06-2011 à 20:34:33    

pour la modif graphique d'un td au passage de la souris (ou d'aurtres éléments d'ailleurs) on utilise ça :
dans la feuille de style tu fais un
 

Code :
  1. td.galerie {
  2.   background-color: #FFFFFF;
  3. }
  5. td.galerie:hover {
  6.   background-color: #e2e2e2;
  7. }


 
et dans le code html tu utilises ton template comme ça :
 

Code :
  1. <td width="100%" border="0" class="galerie">
  2.   <A HREF="page1.html" TARGET="droite" >
  3.   <img src="image1.jpg" width="50" height="50" /></A>
  4. </td>


 
ton site est en dynamique (php) ou fixe (html) ?
 
tu t'y connais en javascript ?

Reply

Marsh Posté le 08-06-2011 à 18:19:48    

Ah, c'est super!!! ça marche nikel avec le css et c'est plus propre!
 
Mon site est dynamique et le javascript et moi, on commence à fleurter on va dire!!!
 
J'ai un peu modifié le code et j'utilise ahah:
<td width="100%" border="0" class="galerie"><a href="#" onclick="javascript:ahah('page.php','cadrecible');"><img src="image1.jpg" width="50" height="50" /></a></td>
 
Du coup, j'ai bien la surbrillance au passage de la souris avec ton code css, j'ai bien ma page.php qui se charge dans mon cadre cible et il ne me manque plus qu'à avoir une page2.php qui se charge au passage de la souris au dessus de ma cellule...

Reply

Marsh Posté le 09-06-2011 à 09:23:27    

Tu n'as pas besoin du onclick="javascript:...". onclick, c'est forcément du javascript.

Reply

Marsh Posté le 09-06-2011 à 09:43:31    

la soluce que je vois la plus simple , c'est de la faire en ajax, ça devrait te faire une 30 aine de ligne de js.
Tu peux te baser sur cet exemple :
 
http://www.xul.fr/xml-ajax.html
 
puis tu mets à jour ta frame de gallerie avec innerhtml qui modifie le contenu d'une balise
 http://www.journaldunet.com/develo [...] lien.shtml
 
plutot que des frames tu devrais utiliser des divs.

Reply

Marsh Posté le 09-06-2011 à 16:03:26    

Super, je vais aller tester ça tout de suite!
 
Pour les div, j'ai effectivement opté pour ça depuis et c'est bien plus simple! :)

Reply

Marsh Posté le 09-06-2011 à 17:37:24    

Bon, ça ne marche pas pour le moment. Je te poste le code:
 
J'ai un index .php qui comprend juste mes div:
 
div1= menu
div2= contenu
div3= legende
 
La div 1 contient juste une include avec mon menu.php.
 
Dans le menu.php, j'ai donc intégré le script d'appel et le script d'affichage entre les balises HEAD, qui doit renvoyer ma page vers la div3:
 
SCRIPT D'APPEL:
 

Code :
  1. <script>
  2. function submitForm()
  3. {
  4.     var xhr;
  5.     try {  xhr = new ActiveXObject('Msxml2.XMLHTTP');   }
  6.     catch (e)
  7.     {
  8.         try {   xhr = new ActiveXObject('Microsoft.XMLHTTP');    }
  9.         catch (e2)
  10.         {
  11.           try {  xhr = new XMLHttpRequest();     }
  12.           catch (e3) {  xhr = false;   }
  13.         }
  14.      }
  16.     xhr.onreadystatechange  = function()
  17.     {
  18.          if(xhr.readyState  == 4)
  19.          {
  20.               if(xhr.status  == 200)
  21.                  document.ajax.dyn="Received:"  + xhr.responseText;
  22.               else
  23.                  document.ajax.dyn="Error code " + xhr.status;
  24.          }
  25.     };
  27.    xhr.open( 'GET', 'http://www.monsite.com/legende.php',  true);
  28.    xhr.send(null);
  29. }
  30. </script>


 
SCRIPT D'AFFICHAGE:
 

Code :
  1. <script type="text/javascript"><!--
  2. function afficheDescURL(toThis)
  3.   {
  4.   if (document.getElementById)
  5.     {
  6.     document.getElementById("div3" ).innerHTML = toThis;
  7.     }
  8.   else if (document.all)
  9.     {
  10.     document.all["div3"].innerHTML = toThis;
  11.     }
  12.   }
  14. base = " Vous êtes sur la page d'accueil ";
  15. afficheDescURL(base);
  16. //--></script>


 
Voilà, est ce que le problème vient du fait que je charge et j'affiche à partir du menu.php qui n'est pas la page contenant les div?


Message édité par typiac92 le 09-06-2011 à 17:38:38
Reply

Marsh Posté le 09-06-2011 à 18:30:31    

non ça vient pas de là, les includes ne génèrent qu'un fichier chez le client qui voit la concatenation des scripts. (autre conseil, utilise des require_once au lien des include). Pour ton probleme tu utilises mal les fonctions javascript.
 
je sais pas comment tu appelles tes galeries mais supposons que tu as un fichier galerie.php qui prend une variable de type POST comme le numero de la gallerie à afficher : n
 
tu vas avoir au passage de la souris sur l'élément du menu un truc du genre onmouseover = updateGalerie(n)
 
maintenant tu fais un fichier galerie.js (un seul suffit pas la peine d'en faire un pour l'affichage et un pour l'appel) qui contient ces fonctions :
 

Code :
  1. // fonction générique pour créer un objet XMLHttpRequest  
  2. function getXMLHttpRequest() {
  3.     var xhr = null;
  4.     if (window.XMLHttpRequest || window.ActiveXObject) {
  5. if (window.ActiveXObject) {
  6.             try {
  7.                 xhr = new ActiveXObject("Msxml2.XMLHTTP" );
  8.             } catch(e) {
  9.  xhr = new ActiveXObject("Microsoft.XMLHTTP" );
  10.             }
  11. } else {
  12.             xhr = new XMLHttpRequest();
  13. }
  14.     } else {
  15. alert("Votre navigateur ne supporte pas le site" );
  16. return null;
  17.     }
  18.     return xhr;
  19. }
  21. var xhrgalerie = null;
  23. function updateGalerie(n) {
  24. if (xhrgalerie && xhrgalerie .readyState != 0) {xhrgalerie .abort();}
  25.     xhrgalerie = getXMLHttpRequest();
  26.     xhrgalerie .onreadystatechange = function() {
  27.         if (xhrgalerie .readyState == 4 && (xhrgalerie .status == 200 || xhrgalerie .status == 0)) {
  28.             document.getElementById("div3" ).innerHTML = xhrgalerie .responseText;
  29.         }
  30.     };
  31.     xhrbikes.open("POST", './galerie.php', true);
  32.     xhrbikes.setRequestHeader("Content-Type", "application/x-www-form-urlencoded" );
  33.     xhrbikes.send("n="+n);
  34. }


 
Dans le fichier galerie.php tu interceptes le numéro de la galerie à créer avec
 

Code :
  1. $_POST['n']


 
et qui renvoie par exemple une table avec tes images en ligne.


Message édité par rengzehn le 09-06-2011 à 18:39:42
Reply

Marsh Posté le 09-06-2011 à 18:30:31   

Reply

Marsh Posté le 09-06-2011 à 18:51:28    

Ok, merci du conseil. Je viens de changer tous mes <?php include('page.php');?> par des <?php require_once('page.php');?>
 
Je vais de ce pas étudier ton exemple!

Reply

Marsh Posté le 09-06-2011 à 20:08:44    

Bon, je bataille ferme et je te remets mes code pendant que je continue de bosser:
 
mon INDEX:
 

Code :
  1. <script type="text/javascript" src="http://www.monsite.com/js/galerie.js"></script> -----> ton fichier galerie.js
  2. </head>
  3. <body>
  4. <table border="0" cellspacing="0" cellpadding="0">
  5. <tr>
  7. <td><div id="menu"><?php require_once('php/menu.php');?></div></td>
  9. <td><div id="contenu"><?php require_once('page.php');?></div></td>
  10. </tr>
  12. <tr>
  13. <td><div id="legende"><script type="text/javascript"><!--
  14. function afficheDescURL(toThis)
  15.   {
  16.   if (document.getElementById)
  17.     {
  18.     document.getElementById("legende" ).innerHTML = toThis;
  19.     }
  20.   else if (document.all)
  21.     {
  22.     document.all["legende"].innerHTML = toThis;
  23.     }
  24.   }
  26. base = " Vous êtes sur la page d'accueil ";
  27. afficheDescURL(base);
  28. //--></script></div></td>
  30. </tr>
  31. </table>
  32. </body>


 
Mon MENU:
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>mon site</title>
  7. <script type="text/javascript" src="monsite/js/jquery.js"></script>
  9. <script>
  10. function ahah(url,target) {
  11.     document.getElementById(target).innerHTML = 'loading data...';
  12.     if (window.XMLHttpRequest) {
  13.         req = new XMLHttpRequest();
  14.         req.onreadystatechange = function() {ahahDone(target);};
  15.         req.open("GET", url, true);
  16.         req.send(null);
  17.     } else if (window.ActiveXObject) {
  18.         req = new ActiveXObject("Microsoft.XMLHTTP" );
  19.         if (req) {
  20.             req.onreadystatechange = function() {ahahDone(target);};
  21.             req.open("GET", url, true);
  22.             req.send();
  23.         }
  24.     }
  25. }
  26. </script>
  28. <script>
  29. function ahahDone(target) {
  30.    // only if req is "loaded"
  31.    if (req.readyState == 4) {
  32.        // only if "OK"
  33.        if (req.status == 200 || req.status == 304) {
  34.            results = req.responseText;
  35.            document.getElementById(target).innerHTML = results;
  36.        } else {
  37.            document.getElementById(target).innerHTML="ahah error:\n" +
  38.                req.statusText;
  39.        }
  40.    }
  41. }
  42. </script>
  44. <script type="text/javascript" src="http://www.monsite.com/js/galerie.js"></script> ----->ton script
  45. <script>
  46. function request(url,cadre) {
  47.         var XHR = null;
  48.         if(window.XMLHttpRequest) // Firefox
  49.                 XHR = new XMLHttpRequest();
  50.         else if(window.ActiveXObject) // Internet Explorer
  51.                 XHR = new ActiveXObject("Microsoft.XMLHTTP" );
  52.         else {
  53.                 alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
  54.                 return;
  55.         }
  56.         XHR.open("GET",url, true);
  57.         XHR.onreadystatechange = function attente() {
  58.                 if(XHR.readyState == 4) {
  59.                         document.getElementById(cadre).innerHTML = XHR.responseText;
  60.                 }
  61.         }
  62.         XHR.send(null);
  63.         return;
  64. }
  65. </script>
  67. <script type="text/javascript"><!--
  68. function afficheDescURL(toThis)
  69.   {
  70.   if (document.getElementById)
  71.     {
  72.     document.getElementById("legende" ).innerHTML = toThis;
  73.     }
  74.   else if (document.all)
  75.     {
  76.     document.all["legende"].innerHTML = toThis;
  77.     }
  78.   }
  80. base = " Vous êtes sur la page d'accueil ";
  81. afficheDescURL(base);
  82. //--></script>  
  84. </head>
  86. <body>
  87. <dl>
  88. <dt><img src="http://www.monsite.com/1.jpg" width="100" height="26" /></dt>
  89. <dd><table border="0" cellspacing="0" cellpadding="5">
  90. <tr>
  92. <td width="100%" border="0" class="galerie"><a href="#" onclick="javascript:ahah('galerie1.php','contenu');" onMouseOver="afficheDescURL('http://www.monsite.com/legende1.php','legende')" onMouseOut="afficheDescURL(base)"><img src="http://www.monsite.com/thumbs/1.jpg" width="50" height="50" /></a></td>
  94. <td width="100%" border="0" class="galerie"><a href="#" onclick="javascript:ahah('galerie2.php','contenu');" onMouseOver="afficheDescURL('http://www.monsite.com/legende2.php','legende')" onMouseOut="afficheDescURL(base)"><img src="http://www.monsite.com/thumbs/2.jpg" width="50" height="50" /></a></td>
  96. <td width="100%" border="0" class="galerie"><a href="#" onclick="javascript:ahah('galerie3.php','contenu');" onMouseOver="afficheDescURL('http://www.monsite.com/legende3.php','legende')" onMouseOut="afficheDescURL(base)"><img src="http://www.monsite.com/thumbs/3.jpg" width="50" height="50" /></a></td>
  99. </tr>
  100. </table>
  101. </dd>
  102. <dt><a href="#" onclick="javascript:ahah('newsletter.php','contenu');"><img src="http://www.monsite.com/news.jpg" width="185" height="26" /></a></dt>
  103. <dt><a href="#" onclick="javascript:ahah('contact.php','contenu');"><img src="http://www.monsite.com/contact.jpg" width="133" height="26" /></a></dt>
  104.    
  105. </dl>
  106. </body>
  107. </html>


 
je rajoute aussi ton fichier galerie.js modifié au cas où j'aurai fait une bêtise:
 

Code :
  1. function getXMLHttpRequest() {
  2.     var xhr = null;
  3.     if (window.XMLHttpRequest || window.ActiveXObject) {
  4. if (window.ActiveXObject) {
  5.             try {
  6.                 xhr = new ActiveXObject("Msxml2.XMLHTTP" );
  7.             } catch(e) {
  8. xhr = new ActiveXObject("Microsoft.XMLHTTP" );
  9.             }
  10. } else {
  11.             xhr = new XMLHttpRequest();
  12. }
  13.     } else {
  14. alert("Votre navigateur ne supporte pas le site" );
  15. return null;
  16.     }
  17.     return xhr;
  18. }
  19. var xhrgalerie = null;
  20. function updateGalerie(n) {
  21. if (xhrgalerie && xhrgalerie .readyState != 0) {xhrgalerie .abort();}
  22.     xhrgalerie = getXMLHttpRequest();
  23.     xhrgalerie .onreadystatechange = function() {
  24.         if (xhrgalerie .readyState == 4 && (xhrgalerie .status == 200 || xhrgalerie .status == 0)) {
  25.             document.getElementById("legende" ).innerHTML = xhrgalerie .responseText;
  26.         }
  27.     };
  28.     xhrbikes.open("POST", 'http://www.monsite.com/php/legende1.php', true);
  29.     xhrbikes.setRequestHeader("Content-Type", "application/x-www-form-urlencoded" );
  30.     xhrbikes.send("n="+n);
  31. }


Message édité par typiac92 le 09-06-2011 à 20:15:54
Reply

Marsh Posté le 09-06-2011 à 20:22:05    

D'ailleurs, après t'avoir relu et en re-relu, je me dis que je me suis peut-être mal fait comprendre:
 
Je voudrai un effet onmouseover qui ouvre une legende.php dans la div "legende" lorsque l'on survole la vignette au sein du menu.php dans la div "menu" qui est dotée d'un onclick qui charge la galerie correspondante dans la div "contenu".
 
Je vais faire un shémas...


Message édité par typiac92 le 09-06-2011 à 20:23:35
Reply

Marsh Posté le 09-06-2011 à 20:37:13    

Voici le plan:
 
http://img853.imageshack.us/img853/6617/planx.th.jpg
 
Uploaded with ImageShack.us

Reply

Marsh Posté le 09-06-2011 à 21:22:17    

ué c bien ce que j'avais compris.
 
sur onmouseover, il faut appeler la fonction updateGalerie de mon script

Reply

Marsh Posté le 10-06-2011 à 01:11:52    

Ecoutes, je viens de retourner le problème dans tous les sens et je n'arrive pas à avancer...
 
J'ai étudié les tutos post et get avec des formulaires notamment. Je les reproduis, ça fonctionne mais c'est avec une seule et même pas php.
 
Dans mon cas, avec la fonction onmouseover, ça ne marche pas.
 
Peux-tu me dire ou et comment je dois placer la fonction updategalerie?
 
 
en plaçant le code <?php echo $_GET['legende1.php']; ?> dans le onmouseover comme ceci?:

Code :
  1. <td><a href="#" onMouseOver= <?php echo $_GET['legende1.php']; ?> onclick="javascript:ahah('bourdin-tribute-by-greg-sino.php','cadrecentral');"><img src="http://www.greg-sino.com/thumbs/bourdin-tribute-by-greg-sino1.jpg" width="50" height="50" /></a></td>


Message édité par typiac92 le 10-06-2011 à 01:12:06
Reply

Marsh Posté le 10-06-2011 à 05:36:30    

Ah, ça y est, j'ai réussi!!! En fait, j'ai fait au plus simple, j'ai réutilisé mon script haha pour le onmousover. Je n'arrivais pas à l'utiliser en plus de la fonction onclick parce que j'avais ce fameux javascript: en trop!
 
 
Un très grand merci à toi en tout cas, tu m'as beaucoup aidé!

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed