Hello, oui, 2005 elle estpas toute neuve la question,mais je relance courrageusement la question (si,si)...MON PROB EST : qu' a partir de mon menu, je voudrais ouvrir un tableau (162px X 260px) ou un popup explicatif de ce que contient cette page <me fis-je bien comprendre ???> et je galère grave, d'autant plus que les backgrounds des cellules de mon menu en 2 couleures sont déjà en onmouseover et que je voudrais en même temps au même passage de la souris ouvrir sans un clic le fameux popup ou mieux un tableau contenant une image...Ouhlala je vous comprend, c'est pas évident, mais il y a ici je suis sur, quelqu'un de compétent pour pouvoir me venir en aide...Please help me ! Merci d'avance, à tres bientôt j'espèèèère !!!

'xcuses, j'avais oublié de préciser que je souhaitais que ce tableau (ou popup) s'ouvre en "vedette" au milieu de ma page et que mon onmouseover de base (dans mon menu) est écrit en HTML, comme suit

          <tr>
            <td style="width: 100%; background-color: rgb(0, 0, 61);"
 onmouseover="this.style.backgroundColor='lightblue';"
 onmouseout="this.style.backgroundColor='#00003D';">
            <center><font size="-1">Entr&eacute;e</font>
            </center>
            </td>
          </tr>

Bonjour,

Pour “juste y mettre du texte pour expliquer”, s'il ne doit être trop long, tu peux utiliser une astuce à l'aide de la balise <acronym>.
Du genre :

<td> <acronym title="Entrez dans mon site">Entrée</acronym> </td>

Oui, merci beaucoup, mais malheureusement ce ne sera pas suffisant, car je souhaite insérer une image...Je suis sur que cela est possible, que mon prob à une soluce, mais ce n'est pas évident.
Il est bien possible d'ouvrir un tableau ou une image en onmouseover, il est aussi possible de centrer cette image sur mon site, mais je galère pour faire tout ça à partir de mon menu...(en onmouse...) si vous voyez, n'hésitez pas ! merci à tous...

Bjr

En utilisant du Javascript et des tags DIV positionnés en absolu on peut faire un truc comme ceci :

http://www.nobodysperfect.freesurf.fr/popup/popup_avec_div.h­tm

Je sais pas si c'est tout à fait ce que tu veux

PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

Merci mille fois "php", c est tout à fait ce que je souhaitais, je vais essayer de centrer sur ma page le tableau qui apparait, à ton avi est ce possible ? super merci à toi....A +.

Salut a tous,
Voici un script en javascript pour centrer les popup au milieu de l'écran:

<!--popup centree  
function popinfo *(mypage,myname,w,h,scroll)
{
var LeftPosition = (screen.width-w)/2;
var TopPosition = (screen.height-h)/2;
var settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+', scrollbars=no,resizable=no' 
window.open(mypage,myname,settings) 
} 
//-->

<a href="javascript:void(0)"  onclick="popinfo('dossier/mon_fichier.htm','sites','470','350','no')";return false;"> cliquer ici </a>

Merci beaucoup à tous !
je vais tester tout ça, mais je sents que je vais avoir 2 , 3 soucis à mélanger ces deux codes + le mien...
Après étude du prob, il se peut bien que je repasse sur cette page pour conseil...Me laissez pas , passez voir de temps en temps, car je sents que ma mission est realy hard !
txiki, pour moi tout doit se passer en onmouseover, la fonction "onclick" ne sera pas adapté, j'imagine...
Je réexplique :
Le background de la cellule change de couleure au passage de la souris (ça c'est mon code).
La popup s'ouvre en même temps au même passage de la souris (ça c'est le code de php) =>tu me suis ?
et de + au même passage de la souris, la popup qui s'ouvre doit se trouver au centre de ma page (là c'est ton code)
donc les 3 codes en même temps, et , le tout en onmouseover...fffff je sais, je me simplifis la vie!!!...En tout cas merci à vous...A bientôt, je vais passer quelques heues a unir tout ça...Je vous en reparle bientôt je pense.
(Txiki, je change le "onclick" par "onMouseOver" non? ou faut-il rajouter quelque choses ? à ton avis ...)
'xcusez, je débute, un jour ça ira mieux (yark yark yark...)

Salut midnnight,
Exact ! men ! remplace le onclick par onmouseover.

Va faire un tour sur mon site pour voir comment s'ouvrent les pop up non centrées: (onmouseover)http://abarka.free.fr/lexique/quizz/page1/quizz­_1.php
Pour pop up centrée (onclick) (cliquer sur trucs et astuces ou info crustacés): http://abarka.free.fr/recettes/tapas/bunuelos_morue.php

et enfin, une dernière pour ouvrir une pop up sans préciser la taille mais qui s'adapte au contenu (pour les images donc): http://abarka.free.fr/diaporama/diaporama-1.php
Ici, par contre il te faudra une vignette, prévoir deux images: 1 petite pour le onclick et la grande qui s'affichera dans la pop up.
Si celui la t'interresse, je t'enverrai le script (javascript aussi). Par contre ce dernier ne sera pas centré, il faut le positionner dans les paramètres.
Bon courage !

Le bonheur est la seule chose que l'on peut donner sans l'av­oir.

Merci a toi, je vais essayer tout ça, je vous tiens au courant.

Bsr,

La version qui s'affiche au centre de la page.

http://www.nobodysperfect.freesurf.fr/popup/popup_avec_div.h­tm

Code pour calcuil offsetX, offsetY, innerHeight et innetWidth trouvé sur http://www.quirksmode.org/viewport/compatibility.html


PhP  
Il y a 10 types de personnes dans le monde : ceux qui compre­nnent le binaire et les autres ...

Bonjour a tous !

Malgrès que les post de ce forum date d'il y a plus d'un an, j'espère que vous aller me répondre :s en particulier txiki puisque que j'aimerais faire exactement de meme pour mon site que ton diaporama. Pourrais tu m'envoyer le javascript correspondant stp ??
Merci d'avance...

Danyl

Bonsoir à toi,
Je viens de rentrer et d'avoir ton message.
Promis, je mange un morceau et je te contact en espérant que ce soit une solution pour toi aussi...

Cool midnnight !!!
Merci pour cette réponse rapide ;)
J'attends de tes nouvelles avec impatience ...

Pour tes images, comme tu sais, c'est une histoire de chemin, si elles n'apparaissent pas c'est parceque tu n'as pas bien enregistrer ton fichier html dans le bon dossier et vis et versailles...Les images et les fichiers correspondent dans le même dossier. Si ils ne sont pas au même endroit, personne ne se trouve. Je ne dit pas ça pour toi, mais pour d'autres éventuels utilisateurs qui ne sauraient pas...Il faut un jour commencer et je sais ce que c'est...

ensuite li bien le code et aux indications écrit le nom de tes images....(Pour ma part elles sont dans un dossier image à la racine de mon site...
Il y a dans ce code un menu tout simple une image d'entête et un rollover sur la sourris avec images...J'ai retravaillé pour obtenir des tableaux, mais tu peux les rendre transparent en changant dans la zone correspondante=> border= "0" A toi de placer les tiennes...Bon courrage et écrit si ça ne va pas pour toi, on peut changer le style ou penser à un autre code total différent...A+

Pour commencer, voila, efface tout dans un code source d'une page vierge et copie-colle ce code :.=>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style>
body
{
font-size:10pt;
font-family:Arial;
}
div img
{
padding:0px;
margin:0px;
display:inline;
border-width:0px;
}
.tst
{
position : absolute;
top : 200px;
}
.td_over
{
background-color: #ADD8E6;
color : #000000; }
.td_out
{
background-color: #00003D; color : #FFFFFF;
}
.popup
{
position : absolute; top: -1425px; left: 564px;
border-style : solid;
border-width : 1px;
border-color : #000000;
left : -10000px; top: -425px;
}
</style><script type="text/javascript">
<!--
var last_popup = null;
function getAbsY(obj)
{
var absY = 0; var node = obj;
while (node)
{
absY += node.offsetTop;
node = node.offsetParent;
}
return absY ;
}
function getAbsX(obj)
{
var absX = 0; var node = obj;
while (node)
{
absX += node.offsetLeft;
node = node.offsetParent;
}
return absX ;
}
function close_popup(obj)
{
obj.style.left = "-10000px";
}
function mouseOut(obj)
{
obj.className="td_out";
}
// Calcul de la hauteur interne de la fenêtre (hors menu, barre d'état etc ...)
function getInnerHeight()
{
var height=0;
if (self.innerHeight) // all except Explorer
{
height = self.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
height = document.documentElement.clientHeight;
}
else {
if (document.body) // other Explorers
{
height = document.body.clientHeight;
}
}
}
return height;
}
// Calcul de la largeur interne de la fenêtre (hors menu, barre d'état etc ...)
function getInnerWidth()
{
var width=0;
if (self.innerWidth) // all except Explorer
{
width = self.innerWidth;
}
else {
if (document.documentElement && document.documentElement.clientWidth)
// Explorer 6 Strict Mode
{
width = document.documentElement.clientWidth;
}
else {
if (document.body) // other Explorers
{
width = document.body.clientWidth;
}
}
}
return width;
}
// Calcul de l'offset horizontal = de combien on a déplacé le curseur de l'ascenseur horizontal
function getOffsetX()
{
var offsetX =0;
if (self.pageXOffset) // all except Explorer
{
offsetX = self.pageXOffset;
}
else {
if (document.documentElement && document.documentElement.scrollLeft)
// Explorer 6 Strict
{
offsetX = document.documentElement.scrollLeft;
}
else {
if (document.body) // all other Explorers
{
offsetX = document.body.scrollLeft;
}
}
}
return offsetX;
}
// Calcul de l'offset vertical = de combien on a déplacé le curseur de l'ascenseur vertical
function getOffsetY()
{
var offsetY =0;
if (self.pageYOffset) // all except Explorer
{
offsetY = self.pageYOffset;
}
else {
if (document.documentElement && document.documentElement.scrollTop)
// Explorer 6 Strict
{
offsetY = document.documentElement.scrollTop;
}
else {
if (document.body) // all other Explorers
{
offsetY = document.body.scrollTop;
}
}
}
return offsetY;
}
function mouseOver(obj)
{
if (last_popup) last_popup.style.left = "-10000px";
obj.className="td_over";
var index = obj.id.indexOf("_");
var elt = document.getElementById("popup"+obj.id.substr(index,3));
// Code pour positionnner le popup à droite de l'objet obj
// elt.style.left = (getAbsX(obj)+obj.offsetWidth+10)+"px";
// elt.style.top = (getAbsY(obj))+"px";
// Code pour centrer le popup dans la page
elt.style.left = ((getInnerWidth()-elt.offsetWidth)/2 + getOffsetX())+"px";
elt.style.top = (((getInnerHeight()-elt.offsetHeight)/2) + getOffsetY())+"px";
last_popup = elt;
}
//-->
</script><title>fenetre Popups</title>
<script language="JavaScript">
<!--
function launchWindow(url, features) {
window.open(url, "_blank", features);
}
//-->
</script></head><body><div
style="text-align: left;">



<img style="width: 800px; height: 213px;"
alt=""
src="images_de-ton_entete_en_haut_de_la_page_de_ton_site.jpg"><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div
style="position: absolute; top: 232px; left: 198px;"><table
style="text-align: left; left: 197px; width: 788px;" border="1"
cellpadding="2" cellspacing="2"><tbody><tr><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 1</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 2</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 3</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 4</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Produit 5</td><td
style="text-align: center; background-color: grey;"
onmouseover="this.style.backgroundColor='lightblue';"
onmouseout="this.style.backgroundColor='grey';">Contact 6</td></tr></tbody></table></div><br><br><br><br></div><br><div
style="top: 376px; left: 188px;" class="tst">
<table style="left: 8px; width: 256px;"><tbody><tr><td
id="td_1" class="td_out" onmouseover="mouseOver(this);"
onmouseout="mouseOut(this);"><img
style="top: 281px; left: 13px; width: 44px; height: 33px;"
alt="" src="images_de_ton_choix2.jpg">Mon commentaire</td>
</tr><tr><td id="td_2" class="td_out"
onmouseover="mouseOver(this);" onmouseout="mouseOut(this);"><img
style="top: 323px; left: 13px; width: 44px; height: 33px;"
alt="" src="dossier-images2.jpg">Nokia</td>
</tr><tr><td id="td_3" class="td_out"
onmouseover="mouseOver(this);" onmouseout="mouseOut(this);"><img
style="top: 365px; left: 13px; width: 44px; height: 33px;"
alt="" src="dossier-images2/autre-image.jpg">nom de
image</td>
</tr></tbody></table></div><div
style="position: absolute; top: 155px; left: 2px;"><div
id="popup_1" class="popup" onclick="close_popup(this)"><table
style="text-align: center;" border="1"><tbody><tr><td><img
src="dossier-images/ton-image.jpg"><br><center><a
href="ton-lien.html">Cliquez
ici<br>pour plus de
détail_PHOTO_1</a></center>
</td><td style="width: 14px;"><img
src="dossier-images/ton-image.jpg"></td></tr></tbody></table></div></div><div
style="position: absolute; top: 155px; left: 2px;"><div
id="popup_2" class="popup" onclick="close_popup(this)"><table
style="text-align: center;" border="1"><tbody><tr><td><img
src="dossier-images/ton-image.jpg"><br><center><a
href="ton_lien.html">Cliquez
ici<br>pour plus de
détail_PHOTO__2</a></center>
</td><td style="width: 14px;"><img
src="images_autre/bouton_fermer.jpg"></td></tr></tbody></table></div></div><div
style="position: absolute; top: 155px; left: 2px;"><div
id="popup_3" class="popup" onclick="close_popup(this)"><table
style="text-align: center;" border="1"><tbody><tr><td><img
src="dossier-images/ton-image.jpg"><br><center><a
href="Siemens.html">Cliquez
ici<br>pour plus de
détail_PHOTO___3</a></center>
</td><td style="width: 14px;"><img
src="dossier-images/ton-image.jpg"></td></tr></tbody></table></div></div></body></html>

Donne moi des nouvelles et n'hésitons pas à parler. Bon, c'est à ton tour de me dire ce que tu en penses...A +

Essai ensuite en appercu sur ton navigateur (ce code marche avec Internet explorer/Netscape/firefox/opera...)

RE !!! désolé de ne pas t'avoir répondu plus rapidement.
Dans un premier temps merci de ton aide, c'est vraiment sympa. Cela dit ces derniers jours, je n'ai pas eu une minute pour me concentrer sur le site en construction. Donc demain après-midi, je regarde ton code et essai de le mettre à la sauce de mon site. ;) Je te tiens au courant ...

Ok, donne nouvelles quand tu peux...
PS : j'ai dû repositionner les <div> dans <body>, en passant outre le {css} pour mes besoins perso de cadrage sur mes pages...