Popup sans nouvelle fenêtre, tutorial perdu ?

Bonjour à tous,
en naviguant sur le web à la recherche d'une solution pour afficher des popup sans nouvelle fenêtre je suis tombé sur une des pages du tutorial de ce site :
http://css.alsacreations.com/xmedia/exemples/popup/popup2.htm#pop1

pas de bol pour moi , le tutorial n'est plus présent, a-t-il changé d'adresse ? en avez-vous un à me proposer s'il vous plait ?

Mon but étant d'afficher une petite fenêtre pouvant contenir une image et une description lors d'un survolement d'une image comme sur les deux lien popups de l'adresse ci-dessus

merci beaucoup !
Modifié par Saetta (15 Dec 2007 - 08:05)

Saetta a écrit :
Bonjour à tous,

pas de bol pour moi , le tutorial n'est plus présent, a-t-il changé d'adresse ? en avez-vous un à me proposer s'il vous plait ?

merci beaucoup !

Salut,

Le lien est toujours la ... pour moi en tout cas ça fonctionne

ps : Par contre concernant le tuto, il y a quelque chose de bizare :

Il est écrit :

a écrit :
Lorsque JavaScript est désactivé, le contenu de la boîte apparait proprement en dessous du contenu de la page.

Hors pour tester j'ai désactivé Javascript et je n'ai rien du tout qui apparait ni au dessus ni en dessous ... donc invisible ... normal ?

Bonsoir, moi non plus rien ne s'affiche en bas de page si je desactive le JavaScript.

J'ai réussi grace à un ami qui s'y connait en CSS et Javascript à créer des popups comme sur le lien que j'ai cité dans mon post précédent,
Cependant je rencontre deux problèmes:

Premier problème:
Ma page dans laquelle j'affiche mes popups ne s'affiche pas sous Internet Explorer alors qu'avec FireFox çà fonctionne .

Second problème:
comment faire pour que la popup s'affiche ailleur qu'au bord de lécran quand le lien qui "l'appelle" se trouve en bordure de page ?
car en effet je ne peux pas tout lire dans la popup.
j'aimerai une popup intelligente qui se place au bon endroit du curseur de la souris lorsqu'elle est pour dépassé l'écran. j'essaye d'être clair je vous assure... je ne sait pas comment formuler çà pour le moment veuillez m'excuser...
en gros comment faire pour que la popup s'affiche de façon a ce que tout sois lisible peu importe où se trouve le lien ?

merci de vos réponses !

yank a écrit :
Lorsque JavaScript est désactivé, le contenu de la boîte apparait proprement en dessous du contenu de la page.

Hors pour tester j'ai désactivé Javascript et je n'ai rien du tout qui apparait ni au dessus ni en dessous ... donc invisible ... normal ?
Il semblerait que le style CSS de départ (display: none...) soit mauvais. Normalement, les blocs ne devraient être cachés que si Javascript est activé.

Je rencontre un autre problème, celà survient sous Firefox, mon image clignote car sa bordure se place au pixel pres sur la pointe du curseur "main" de la souris, hors sous IE le décalage pour l'apparition de la popup se fait bien.

Voici mon code de popup:

<style>
.poptrain {
  position: absolute;
  display:none;
  width: 231px;
  border: 3px double black;
  background: #CEE6C6;
  z-index: 500;
  font-size: 80%;
}
</style>

Voici ma popup:

<div id=pop1 class=poptrain>
  <table width="231" border="0" cellspacing="1" cellpadding="1">
    <tr>
      <td width="745" colspan="2"><img src="id/agumon.jpg" width="120" height="120" /><br />
        <span class="Style9">Agumon</span><br />
        <u><strong>Digivolution</strong></u><br />
        <u>Champions</u> : Birdramon - Centarumon - Greymon - Meramon - Monochromon - Nanimon - Numemon - Sukamon - Tyrannomon<br />
        <u>Erreurs de soin</u> : sans limite<br />
        <u>Poids</u> : 15g<br />
          <u>Conditions normales</u> : L'offensive doit être la plus élevée de tes paramétres. Elle doit représenter au moin 10% des PV Max. </td>
    </tr>
  </table>
</div>

Voici le code javascript pour les popups

  <script language=javascript>
gk=window.Event?1:0; // navigateurs Gecko ou IE
D=document;
function affiche(i,e) {
  de=!D.documentElement.clientWidth?D.body:D.documentElement // IE6
  sx=gk?pageXOffset:de.scrollLeft; //scroll h
  sy=gk?pageYOffset:de.scrollTop; //scroll v
  x=gk?e.pageX:event.clientX+sx+20; //curseur x
  y=gk?e.pageY:event.clientY+sy-130; //curseur y
  w=(gk?window.innerWidth:document.body.clientWidth)-235;
  h=(gk?window.innerHeight+sy:document.body.clientHeight+sy)-275;
  if(y>h)y=y-165;
  if(y<sy+10)y=sy+10;
  if(x>w)x=x-275;
  popup=D.getElementById(i).style;
  with(popup){display="block";left=x+'px';top=y+'px';}
}
function cache(i) {
  D.getElementById(i).style.display='none';
}
</script>

Et voici mon code du lien :

<a href=# onmouseover="affiche('pop1',event);" onmouseout="cache('pop1');"><img src="id/agumon.jpg" width="50" height="50" border="0" /></a>

Comment remédier a ce problème ?
Modifié par Saetta (19 Dec 2007 - 10:20)