A voir également:
- Onmouseover html
- Editeur html - Télécharger - HTML
- &Nbsp html - Forum HTML
- Br html - Forum HTML
- Espace html ✓ - Forum HTML
- Faire sauter 2 lignes avec br (CSS) - Forum CSS
24 réponses
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>
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>
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
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
midnnight
Messages postés
484
Date d'inscription
jeudi 23 février 2006
Statut
Membre
Dernière intervention
26 juillet 2017
38
13 juin 2006 à 18:08
13 juin 2006 à 18:08
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 !!!
midnnight
Messages postés
484
Date d'inscription
jeudi 23 février 2006
Statut
Membre
Dernière intervention
26 juillet 2017
38
13 juin 2006 à 18:16
13 juin 2006 à 18:16
'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
encore merci a vous...
<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ée</font>
</center>
</td>
</tr>
encore merci a vous...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Gihef
Messages postés
5150
Date d'inscription
mercredi 20 juillet 2005
Statut
Contributeur
Dernière intervention
20 février 2023
2 777
13 juin 2006 à 19:03
13 juin 2006 à 19:03
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 :
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>L'affichage n'est pas immédiat.
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...
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...
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
14 juin 2006 à 14:09
14 juin 2006 à 14:09
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.htm
Je sais pas si c'est tout à fait ce que tu veux
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.htm
Je sais pas si c'est tout à fait ce que tu veux
midnnight
Messages postés
484
Date d'inscription
jeudi 23 février 2006
Statut
Membre
Dernière intervention
26 juillet 2017
38
15 juin 2006 à 19:47
15 juin 2006 à 19:47
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 +.
txiki
Messages postés
6596
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
517
16 juin 2006 à 08:04
16 juin 2006 à 08:04
Salut a tous,
Voici un script en javascript pour centrer les popup au milieu de l'écran:
* dans cet exemple, j'ai appelé ma fonction popinfo, 470 est la largeur de la fenetre; 350, sa hauteur.
Je sais pas si c'est ce que tu voulais....
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)
}
//--> Ensuite le lien pour l'ouvrir dans lequel tu mettra les dimensions de ta fenetre: <a href="javascript:void(0)" onclick="popinfo('dossier/mon_fichier.htm','sites','470','350','no')";return false;"> cliquer ici </a>
* dans cet exemple, j'ai appelé ma fonction popinfo, 470 est la largeur de la fenetre; 350, sa hauteur.
Je sais pas si c'est ce que tu voulais....
midnnight
Messages postés
484
Date d'inscription
jeudi 23 février 2006
Statut
Membre
Dernière intervention
26 juillet 2017
38
16 juin 2006 à 14:38
16 juin 2006 à 14:38
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...)
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...)
txiki
Messages postés
6596
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
22 février 2024
517
16 juin 2006 à 15:03
16 juin 2006 à 15:03
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 !
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 !
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
oui, j'ai fait un tour sur ton site c'est exactement ce que je veux faire
peux-tu m'envoyer ton script
merci
jansoubi
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
oui, j'ai fait un tour sur ton site c'est exactement ce que je veux faire
peux-tu m'envoyer ton script
merci
jansoubi
midnnight
Messages postés
484
Date d'inscription
jeudi 23 février 2006
Statut
Membre
Dernière intervention
26 juillet 2017
38
16 juin 2006 à 15:19
16 juin 2006 à 15:19
merci a toi, je vais essayer tout ça, je vous tiens au courant.
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
17 juin 2006 à 00:01
17 juin 2006 à 00:01
Bsr,
La version qui s'affiche au centre de la page.
http://www.nobodysperfect.freesurf.fr/popup/popup_avec_div.htm
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 comprennent le binaire et les autres ...
La version qui s'affiche au centre de la page.
http://www.nobodysperfect.freesurf.fr/popup/popup_avec_div.htm
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 comprennent le binaire et les autres ...
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...
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 ...
Merci pour cette réponse rapide ;)
J'attends de tes nouvelles avec impatience ...
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 ...
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...
PS : j'ai dû repositionner les <div> dans <body>, en passant outre le {css} pour mes besoins perso de cadrage sur mes pages...
Midnnight j'ai utiliser ton code mais le résultat n'est pas celui que j'attendais ! Je m'explique:
Sur ma page d'accueil, lorsque je clique (ou survol mais je préfère le clique) sur une photo en miniature, je souhaite que la taille réelle de la photo s'ouvre dans un popup avec un texte descriptif au dessus. Exactement l'exemple du diaporama de Txiki lien : http://abarka.free.fr/diaporama/diaporama-1.php (cf. post vendredi 16 juin 2006) Bien evidemment j'aimerais que le popup soit centré sur l'écran ^^ Voilà mes seules exigences ;)
Ton code me plait beaucoup, mais la taille réelle de mes photos sont assez lourdes (environ 300 ko) J'ai peur que l'attente soit beaucoup trop longue pour le chargement de la photo dans le popup tandis qu'avec la solution de txiki, les photos sont en chargement dans une popup avec un message d'attente (veuillez patienter...) Ca me plait cette façon là.
Cela dit je suis ouvert à d'autres solution, s'il y a un autre moyen pour réaliser ce que je souhaite faire, je suis preneur ;)
Ps: Ah oui j'oubliais, le fait de pouvoir déplacer le popup me séduit aussi ;)
A très bientot....
Sur ma page d'accueil, lorsque je clique (ou survol mais je préfère le clique) sur une photo en miniature, je souhaite que la taille réelle de la photo s'ouvre dans un popup avec un texte descriptif au dessus. Exactement l'exemple du diaporama de Txiki lien : http://abarka.free.fr/diaporama/diaporama-1.php (cf. post vendredi 16 juin 2006) Bien evidemment j'aimerais que le popup soit centré sur l'écran ^^ Voilà mes seules exigences ;)
Ton code me plait beaucoup, mais la taille réelle de mes photos sont assez lourdes (environ 300 ko) J'ai peur que l'attente soit beaucoup trop longue pour le chargement de la photo dans le popup tandis qu'avec la solution de txiki, les photos sont en chargement dans une popup avec un message d'attente (veuillez patienter...) Ca me plait cette façon là.
Cela dit je suis ouvert à d'autres solution, s'il y a un autre moyen pour réaliser ce que je souhaite faire, je suis preneur ;)
Ps: Ah oui j'oubliais, le fait de pouvoir déplacer le popup me séduit aussi ;)
A très bientot....
