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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [résolu] onmouseover avec effet dans une autre frame

typiac92

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

Publicité

rengzehn

typiac92 a écrit :

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.

typiac92

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

rengzehn

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 :

td.galerie {
background-color: #FFFFFF;
}
td.galerie:hover {
background-color: #e2e2e2;
}

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

Code :

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

ton site est en dynamique (php) ou fixe (html) ?

tu t'y connais en javascript ?

typiac92

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

Paulp

~, sweet ~

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

rengzehn

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.

typiac92

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!

typiac92

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 :

<script>
function submitForm()
{
var xhr;
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { xhr = new XMLHttpRequest(); }
catch (e3) { xhr = false; }
}
}
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
document.ajax.dyn="Received:" + xhr.responseText;
else
document.ajax.dyn="Error code " + xhr.status;
}
};
xhr.open( 'GET', 'http://www.monsite.com/legende.php', true);
xhr.send(null);
}
</script>

SCRIPT D'AFFICHAGE:

Code :

<script type="text/javascript"><!--
function afficheDescURL(toThis)
{
if (document.getElementById)
{
document.getElementById("div3" ).innerHTML = toThis;
}
else if (document.all)
{
document.all["div3"].innerHTML = toThis;
}
}
base = " Vous êtes sur la page d'accueil ";
afficheDescURL(base);
//--></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

rengzehn

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 :

// fonction générique pour créer un objet XMLHttpRequest
function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP" );
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP" );
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Votre navigateur ne supporte pas le site" );
return null;
}
return xhr;
}
var xhrgalerie = null;
function updateGalerie(n) {
if (xhrgalerie && xhrgalerie .readyState != 0) {xhrgalerie .abort();}
xhrgalerie = getXMLHttpRequest();
xhrgalerie .onreadystatechange = function() {
if (xhrgalerie .readyState == 4 && (xhrgalerie .status == 200 || xhrgalerie .status == 0)) {
document.getElementById("div3" ).innerHTML = xhrgalerie .responseText;
}
};
xhrbikes.open("POST", './galerie.php', true);
xhrbikes.setRequestHeader("Content-Type", "application/x-www-form-urlencoded" );
xhrbikes.send("n="+n);
}

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

Code :

$_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

Publicité

typiac92

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!

typiac92

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

mon INDEX:

Code :

<script type="text/javascript" src="http://www.monsite.com/js/galerie.js"></script> -----> ton fichier galerie.js
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div id="menu"><?php require_once('php/menu.php');?></div></td>
<td><div id="contenu"><?php require_once('page.php');?></div></td>
</tr>
<tr>
<td><div id="legende"><script type="text/javascript"><!--
function afficheDescURL(toThis)
{
if (document.getElementById)
{
document.getElementById("legende" ).innerHTML = toThis;
}
else if (document.all)
{
document.all["legende"].innerHTML = toThis;
}
}
base = " Vous êtes sur la page d'accueil ";
afficheDescURL(base);
//--></script></div></td>
</tr>
</table>
</body>

Mon MENU:

Code :

<!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>mon site</title>
<script type="text/javascript" src="monsite/js/jquery.js"></script>
<script>
function ahah(url,target) {
document.getElementById(target).innerHTML = 'loading data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send(null);
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP" );
if (req) {
req.onreadystatechange = function() {ahahDone(target);};
req.open("GET", url, true);
req.send();
}
}
}
</script>
<script>
function ahahDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ahah error:\n" +
req.statusText;
}
}
}
</script>
<script type="text/javascript" src="http://www.monsite.com/js/galerie.js"></script> ----->ton script
<script>
function request(url,cadre) {
var XHR = null;
if(window.XMLHttpRequest) // Firefox
XHR = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
XHR = new ActiveXObject("Microsoft.XMLHTTP" );
else {
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..." );
return;
}
XHR.open("GET",url, true);
XHR.onreadystatechange = function attente() {
if(XHR.readyState == 4) {
document.getElementById(cadre).innerHTML = XHR.responseText;
}
}
XHR.send(null);
return;
}
</script>
<script type="text/javascript"><!--
function afficheDescURL(toThis)
{
if (document.getElementById)
{
document.getElementById("legende" ).innerHTML = toThis;
}
else if (document.all)
{
document.all["legende"].innerHTML = toThis;
}
}
base = " Vous êtes sur la page d'accueil ";
afficheDescURL(base);
//--></script>
</head>
<body>
<dl>
<dt><img src="http://www.monsite.com/1.jpg" width="100" height="26" /></dt>
<dd><table border="0" cellspacing="0" cellpadding="5">
<tr>
<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>
<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>
<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>
</tr>
</table>
</dd>
<dt><a href="#" onclick="javascript:ahah('newsletter.php','contenu');"><img src="http://www.monsite.com/news.jpg" width="185" height="26" /></a></dt>
<dt><a href="#" onclick="javascript:ahah('contact.php','contenu');"><img src="http://www.monsite.com/contact.jpg" width="133" height="26" /></a></dt>
</dl>
</body>
</html>

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

Code :

function getXMLHttpRequest() {
var xhr = null;
if (window.XMLHttpRequest || window.ActiveXObject) {
if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP" );
} catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP" );
}
} else {
xhr = new XMLHttpRequest();
}
} else {
alert("Votre navigateur ne supporte pas le site" );
return null;
}
return xhr;
}
var xhrgalerie = null;
function updateGalerie(n) {
if (xhrgalerie && xhrgalerie .readyState != 0) {xhrgalerie .abort();}
xhrgalerie = getXMLHttpRequest();
xhrgalerie .onreadystatechange = function() {
if (xhrgalerie .readyState == 4 && (xhrgalerie .status == 200 || xhrgalerie .status == 0)) {
document.getElementById("legende" ).innerHTML = xhrgalerie .responseText;
}
};
xhrbikes.open("POST", 'http://www.monsite.com/php/legende1.php', true);
xhrbikes.setRequestHeader("Content-Type", "application/x-www-form-urlencoded" );
xhrbikes.send("n="+n);
}

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

typiac92

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

typiac92

Voici le plan:

Uploaded with ImageShack.us

rengzehn

ué c bien ce que j'avais compris.

sur onmouseover, il faut appeler la fonction updateGalerie de mon script

typiac92

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 :

<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

typiac92

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é!

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
delete a byte in a frame/supprimer un octet d'une trame	Problème avec onMouseover et onMouseout
[OpenGL] Effet de distorsion de l'image	Effet de fondu en javascript
[Pb] Affichage d'un menu avec un effet carrousel	[RESOLU] worksheet_activate sans effet
[JS] multiples changement de classes sur un seul onmouseover	Onmouseover scroll bar
onmouseover ne fonctionne pas	desactiver l'effet du clic de la souris, prototype
Plus de sujets relatifs à : [résolu] onmouseover avec effet dans une autre frame

Page générée en 0.137 secondes