Zone réactive de lien d'une image : hors de l'image

Zone réactive de lien d'une image : hors de l'image - HTML/CSS - Programmation

Marsh Posté le 10-07-2006 à 11:34:57    

Bonjour,
 
Une div doit apparaître lorsque l'internaute survole une image (insérée dans le corps de texte).  
 
Malheureusement la zone qui permet à la div de s'afficher est située juste dessous et juste au dessus de l'image !
 
Comment faire en sorte que lorsque l'image est survolée la div s'affiche ?
 
Vous pouvez voir ce problème dans le premier paragraphe de ma homepage (cf signature), l'image est sur la troisième ligne de texte.
 

Citation :

<a href="#pop1" class="pop"><img src="images/def.gif" alt="Définition" width="11" height="8" class="def" /></a>


 

Citation :

div#gauche img.def { color:#FF9100;  width:11px; height:8px;
}


 

Citation :

#pop1 {
position:absolute;
top:50px;
display:none;
width: 18em;
border:2px double black;
background: #FF9100;
z-index: 1500;
font-size: 100%;
margin-left:0px;
margin-right:0px;
margin-top:30px;
}


---------------
Consultant SEO
Reply

Marsh Posté le 10-07-2006 à 11:34:57   

Reply

Marsh Posté le 10-07-2006 à 11:46:02    

Tu fais un spacer (images transparente en .gif) du coup tu peux mettre ta zone réactive dessus. Enfin moi c'est ce que je ferais

Reply

Marsh Posté le 10-07-2006 à 11:49:28    

Jcrois que j'ai dis une connerie j'avais pas vu ta page, t'es allez voir du coté du javascript ?

Reply

Marsh Posté le 10-07-2006 à 12:08:34    

c'est ta fonction javascript qui merdouille ( tu aurais pu la donner aussi ça m'aurait evité de chercher ;) )
Le handler est sur onmousemove sur document et tu n'actives le popup que quand la zone survolée contient un href="#???" ce qui n'est pas le cas de ton image.
En plus tes liens servent un peu à rien autour des images...
Perso j'aurais fait un truc comme ça:
1- tu vires les liens autour des images  
2- tu écris les images comme ça:

Code :
  1. <img ... pop="pop1".../>


3- tu fais un fonction init dans le onload:

Code :
  1. document.onload = function {
  2.   var imgs = document.getElementsByTagName('img');
  3.   for(imgNode in imgs){
  4.     if ( imgNode.getAttribute('pop') != undefined && imgNode.getAttribute('pop') != ''){
  5.       imgNode.onmouseover = function (e) {
  6.         popup = this.getAttribute('pop').substring(this.getAttribute('pop').lastIndexOf('#') + 1)).style;
  7.          //... la suite de ta fonction ...
  8.       }
  9.     }
  10.   }
  11. }


Un truc dans le genre ... mais j'ai rien testé :o
par contre ça va te faire un warning à la validation sur l'attribut pop!
Si ça t'ennuye vraiment garde ton idée avec les A et adapte le code pour qu'au lieu de mettre le handler sur le noeud A(qui contient le href) tu le mettes sur l'un de ses fils qui est une image ( en gros tu fais un tonNoeudA.getElementsByTagName('A')  et tu parcours les resultats pour mettre le handler au bon endroit).


Message édité par anapajari le 10-07-2006 à 12:10:13
Reply

Marsh Posté le 10-07-2006 à 12:48:49    

/me n'a rien compris à ce que tu voulais faire

Reply

Marsh Posté le 10-07-2006 à 12:50:30    

/me vient de regarder la page et vient de comprendre
 
pkoi tu décales pas simplement ton div vers le bas ?

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 13:34:19    

Arjuna a écrit :

/me vient de regarder la page et vient de comprendre
 
pkoi tu décales pas simplement ton div vers le bas ?


c'est pas le div qui gène, c'est son handler d'event qu'est mal placé :o  
Il est juste sur le node A et pas sur l'image ;)

Reply

Marsh Posté le 10-07-2006 à 13:34:27    

Citation :

pkoi tu décales pas simplement ton div vers le bas ?


 
Bah je ne vois pas de div Arjuna ! J'utilise img et a, c'est tout. Le seul div c'est pour contenir ça et le texte.
 
Désolé anapajari, je ne m'attendais pas à ce que ce soit le js qu'il faille adapter.
 
Merci de ta suggestion mais comme tu l'as deviné je souhaite avoir une page valide.  :)  
 
Je t'avouerai ensuite que je ne comprends pas comment adapter le code javascript pour corriger tout ça.  :pt1cable:  
 
Je vous demande encore un peu d'aide !   :bounce:  
 

Citation :

gk=window.Event?1:0; // navigateurs Gecko ou IE
D=document;popup=encours=0
 
function ctrl(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; //curseur x
y=gk?e.pageY:event.clientY+sy; //curseur y
el=gk?e.target:event.srcElement;
if(!el.tagName)el=el.parentNode; // noeud #text
if(el.className == 'pop')
  {
  popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1)).style;  
  if(popup!=encours) // seulement si changement  
    {
    encours.display='none';
    with(popup){display="block";left=x+'px';top=y+10+'px';}
    encours=popup;
    }
  } else {encours.display='none';encours=0}
}
 
D.onmousemove=ctrl
// charge la feuille de style des popups.
D.write('')  

Message cité 1 fois

---------------
Consultant SEO
Reply

Marsh Posté le 10-07-2006 à 13:52:50    

t'es pas très débrouillard :o
Bon je t'écris un truc comme ça sans vérifier en reprenant des bouts de ton truc; il y aura surement des trucs à corriger:

Code :
  1. var gk=window.Event?1:0; // navigateurs Gecko ou IE  
  2. var current;
  3. document.onload = function(){
  4. aNodes = document.getElementsByTagName('A');
  5. for( var aNode in aNodeArr){
  6.    if( aNode.getAttribute('src') != undefined && aNode.getAttribute('src').substr(0,3) == '#pop'){
  7.       imgNodeArr = aNode.getElementsByTagName('img');
  8.       for(imgNode in imgNodeArr){
  9.         imgNode.onmouseOver = function(e){
  10.            de=!D.documentElement.clientWidth?D.body:D.documentElement // IE6
  11.            sx=gk?pageXOffset:de.scrollLeft //scroll h
  12.            sy=gk?pageYOffset:de.scrollTop //scroll v
  13.            x=gk?this.pageX:event.clientX+sx; //curseur x
  14.            y=gk?this.pageY:event.clientY+sy; //curseur y
  15.            el=gk?this.target:event.srcElement;
  16.            if ( pop = document.getElementById(aNode.getAttribue('src').replace('#','')) ){
  17.              if ( current != pop ){
  18.                current.style.display='none';
  19.                pop.style.display = 'block';
  20.                pop.style.left = x+'px';
  21.                pop.style.top = y+'px';
  22.                current = pop;
  23.              } else {
  24.                current.style.display = 'none';
  25.                current = undefined;
  26.              }
  27.            }
  28.         }
  29.       }
  30.    }
  31. }
  32. }


Dis moi si ça marche du premier coup que je joue au loto ce soir ;)


Message édité par anapajari le 10-07-2006 à 13:53:33
Reply

Marsh Posté le 10-07-2006 à 13:54:35    

sinon tu peux jeter un oeil sur ce script, qui fait a peu près ce que tu veux et que je trouve très bien fait:
http://lab.arc90.com/2006/05/unobt [...] notes.php$
démo ici:
http://lab.arc90.com/tools/sidenote/

Reply

Marsh Posté le 10-07-2006 à 13:54:35   

Reply

Marsh Posté le 10-07-2006 à 14:44:06    

ultratoonz a écrit :

Citation :

pkoi tu décales pas simplement ton div vers le bas ?


 
Bah je ne vois pas de div Arjuna ! J'utilise img et a, c'est tout. Le seul div c'est pour contenir ça et le texte.


Bon, à priori, on n'a pas le même rendu.
 
Sous IE7, la dernière image du menu se trouve sur une seconde ligne, et le texte de description des menus passe donc dessus.
 
Pour moi c'est ça le problème, et c'est pour ça que je dis de décaller le div vers le bas.
Pour le reste, ça marche très bien : quand on passe la souris sur un menu, ça affiche bien son texte.

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 14:47:00    

Arjuna a écrit :

Pour le reste, ça marche très bien : quand on passe la souris sur un menu, ça affiche bien son texte.


Tu sors :o  
Tu regardes pas au bon endroit :o :o :o
C'est la petite image paumé dans le 1er paragraphe qui merdouille, quand tu basses sur le bord orange qui l'entoure ça affiche un texte sur la PAO. Mais quand tu passes sur l'image ça marche pas!

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 15:10:29    

Citation :

t'es pas très débrouillard :o


 
Désolé, j'ai sans doute oublié de dire que je n'ai jamais appris le javascript.
 

Citation :

Tu sors


 
Cool anapajari, Arjuna cherche juste à me filer un petit coup de main, même si sur ce coup là ce n'est effectivement pas très réussi.
 
Bref, merci d'avoir pris le temps de me refiler ton code mais une chose est sûre.... le loto c'est pas pour ce soir.
 
A moins que

Citation :

<a href="#pop1" class="pop"><img src="images/def.gif" alt="D&eacute;finition" width="11" height="8" class="def" /></a>

n'était plus d'actualité.

Message cité 1 fois

---------------
Consultant SEO
Reply

Marsh Posté le 10-07-2006 à 15:23:31    

anapajari a écrit :

C'est la petite image paumé dans le 1er paragraphe qui merdouille, quand tu basses sur le bord orange qui l'entoure ça affiche un texte sur la PAO. Mais quand tu passes sur l'image ça marche pas!


Fallait la trouver :o
 
Bon, ok, j'ai vu le truc.
 
Bon, je te laisse te débrouiller pour l'aider, j'aime pas ces trucs, je préfère résoudre les problème de Sylvain :p

Message cité 1 fois
Reply

Marsh Posté le 10-07-2006 à 15:41:16    

ultratoonz a écrit :

Citation :

t'es pas très débrouillard :o


Désolé, j'ai sans doute oublié de dire que je n'ai jamais appris le javascript.


pas grave hein ;) !!!

ultratoonz a écrit :


Citation :

Tu sors


Cool anapajari, Arjuna cherche juste à me filer un petit coup de main, même si sur ce coup là ce n'est effectivement pas très réussi.


Je pense que Arjuna a très bien compris que je plaisantais ... le smiley :o est très important :o
 

ultratoonz a écrit :

Bref, merci d'avoir pris le temps de me refiler ton code mais une chose est sûre.... le loto c'est pas pour ce soir.


En fait j'étais pas si loin ;)
Deux trois problèmes de scope de variable et un ou deux replace trop violent...
 

ultratoonz a écrit :

A moins que

Citation :

<a href="#pop1" class="pop"><img src="images/def.gif" alt="D&eacute;finition" width="11" height="8" class="def" /></a>

n'était plus d'actualité.


Nan ça tu touches pas!!!
 
Donc la fonction ça donne:

Code :
  1. var gk=window.Event?1:0; // navigateurs Gecko ou IE
  2.   var current=undefined;
  3.   window.onload = function(){
  4.     aNodeArr = document.getElementsByTagName('A');
  5.     for( var a=0; a < aNodeArr.length; a++){
  6.       if( aNodeArr[a].getAttribute('href') != undefined && aNodeArr[a].getAttribute('href').substr(0,4) == '#pop'){
  7.         imgNodeArr = aNodeArr[a].getElementsByTagName('img');
  8.         for(var i =0; i < imgNodeArr.length; i++){
  9.           imgNodeArr[i].onmouseover = function(e){
  10.             var de=!document.documentElement.clientWidth?document.body:document.documentElement; // IE6
  11.             var sx=gk?pageXOffset:de.scrollLeft; //scroll h
  12.             var sy=gk?pageYOffset:de.scrollTop; //scroll v
  13.             var x=gk?e.pageX:event.clientX+sx; //curseur x
  14.             var y=gk?e.pageY:event.clientY+sy; //curseur y
  15.             var el=gk?e.target:event.srcElement;
  16.             if ( pop = document.getElementById(this.parentNode.getAttribute('href').replace('#','')) ){
  17.               if ( current != pop ){
  18.                 if ( current != undefined ){
  19.                   current.style.display='none';
  20.                 }
  21.                 pop.style.display = 'block';
  22.                 pop.style.left = x+'px';
  23.                 pop.style.top = y+'px';
  24.                 current = pop;
  25.               } else if (current != undefined){
  26.                 current.style.display='none';
  27.                 current = undefined;
  28.               }
  29.             }
  30.           }
  31.         }
  32.       }
  33.     }
  34.   }


Et tu vires tout le js qu'il y avait avant pour éviter les conflits!
 
 

Arjuna a écrit :

Fallait la trouver :o
Bon, ok, j'ai vu le truc.
Bon, je te laisse te débrouiller pour l'aider, j'aime pas ces trucs, je préfère résoudre les problème de Sylvain :p


Moi j'ai fini :p ...  
 

Reply

Marsh Posté le 10-07-2006 à 21:47:57    

Merci anapajari, ça marche du tonnerre ... sur Firefox ! lol  
 
Comme je ne voudrai pas mettre de côté la moitié de mes visiteurs (plus de la moitié surfe sur Firefox et Safari !), comprenez ceux qui utilisent IE je me permets de vous demander s'il est possible de mettre quelque chose en place pour que cela fonctionne aussi sous Internet Explorer ?
 
Encore merci !

Reply

Marsh Posté le 10-07-2006 à 22:35:05    

Hello,
 
En attendant un truc qui devrait fonctionne sur tous les navigateurs avec ton ancien script (mais bon anaparaji va peut-être te faire une petite modif du script pour IE si besoin)
 
Puisque l'image pose problème en étant "devant" le lien, tu peux feinter de cette manière:
- tu mets l'image en visibility:hidden pour conserver la bonne taille
- tu mets l'image en background du lien
 
ça donne ça à rajouter dans ton CSS:
 

Code :
  1. img.def {visibility:hidden;}
  2. a.pop {background:url(images/def.gif) no-repeat 0 60%;}

Reply

Marsh Posté le 10-07-2006 à 22:45:13    

Salut Pitsy,
 
Merci ça fonctionne parfaitement. ;)
 
Si anapajari souhaite poster son script (très utile) il est évidemment le bienvenu. J'ai bien aimé le fait de devoir repasser sur l'image pour faire disparaître la div.  
 
Je trouve cela plus accessible (possibilité de sélectionner le texte par exemple), mais ta suggestion me satisfait Pitsy, merci beaucoup !
 
Je passerai le topic en réglé quand notre ami anapajari nous dira s'il souhaite ou non adapter son code pour IE.

Reply

Marsh Posté le 11-07-2006 à 09:31:42    

ah ouais ça marche pas sous IE, sorry :o
Bon en fait il y a quasiment rien à corriger, c'est juste un problème d'attribut href.
Pour FF, le href de tes balises A c'est : #popX
Pour IE, c'est: http://www.tonsite.com/tonRep/tapage.html#pop1
donc tous les tests sur le href merdouillent ;)
Il suffit de changer:

Code :
  1. if( aNodeArr[a].getAttribute('href') != undefined && aNodeArr[a].getAttribute('href').substr(0,4) == '#pop')


par  

Code :
  1. if( aNodeArr[a].getAttribute('href') != undefined && aNodeArr[a].getAttribute('href').search(/#pop/) >= 0){


et  

Code :
  1. if ( pop = document.getElementById(this.parentNode.getAttribute('href').replace('#','')) ){


par

Code :
  1. if ( pop = document.getElementById(this.parentNode.getAttribute('href').match(/pop\d+/)[0]) ){


et ça résoud les problèmes.
 
Voici donc la "dernière" version, y'a pas de commentaires ( un peu la flemme) mais si quelqu'un a une question qu'il hésite po:

Code :
  1. var gk=window.Event?1:0; // navigateurs Gecko ou IE
  2.   var current=undefined;
  3.   window.onload = function(){
  4.     aNodeArr = document.getElementsByTagName('A');
  5.     for( var a=0; a < aNodeArr.length; a++){
  6.       if( aNodeArr[a].getAttribute('href') != undefined && aNodeArr[a].getAttribute('href').search(/#pop/) >= 0){
  7.         imgNodeArr = aNodeArr[a].getElementsByTagName('img');
  8.         for(var i =0; i < imgNodeArr.length; i++){
  9.           imgNodeArr[i].onmouseover = function(e){
  10.             var de=!document.documentElement.clientWidth?document.body:document.documentElement; // IE6
  11.             var sx=gk?pageXOffset:de.scrollLeft; //scroll h
  12.             var sy=gk?pageYOffset:de.scrollTop; //scroll v
  13.             var x=gk?e.pageX:event.clientX+sx; //curseur x
  14.             var y=gk?e.pageY:event.clientY+sy; //curseur y
  15.             var el=gk?e.target:event.srcElement;
  16.             /*** since IE has href like http... using match to get target ***/
  17.             if ( pop = document.getElementById(this.parentNode.getAttribute('href').match(/pop\d+/)[0]) ){
  18.               if ( current != pop ){
  19.                 if ( current != undefined ){
  20.                   current.style.display='none';
  21.                 }
  22.                 pop.style.display = 'block';
  23.                 pop.style.left = x+'px';
  24.                 pop.style.top = y+'px';
  25.                 current = pop;
  26.               } else if (current != undefined){
  27.                 current.style.display='none';
  28.                 current = undefined;
  29.               }
  30.             }
  31.           }
  32.         }
  33.       }
  34.     }
  35.   }

Reply

Marsh Posté le 11-07-2006 à 09:48:16    

Thanks again mais ça marche pô.

Message cité 1 fois

---------------
Consultant SEO
Reply

Marsh Posté le 11-07-2006 à 10:03:53    

ultratoonz a écrit :

Thanks again mais ça marche pô.


Si ça marche :o ce coup ci j'ai vérifié sur IE & FF :o
T'es sur que tu as bien copié?

Message cité 1 fois
Reply

Marsh Posté le 11-07-2006 à 12:54:00    

anapajari a écrit :

Si ça marche :o ce coup ci j'ai vérifié sur IE & FF :o
T'es sur que tu as bien copié?


 
Ben copié c'est pourtant ma spécialité ! lol
 
Ca ça n'a pas bougé.

Citation :

<a href="#pop1" class="pop"><img src="images/def.gif" alt="Définition" width="6" height="6" class="def" /></a>


 
Et voilà la js que je viens de mettre en ligne quand même :

Citation :

     var gk=window.Event?1:0; // navigateurs Gecko ou IE
       var current=undefined;
       window.onload = function(){
         aNodeArr = document.getElementsByTagName('A');
         for( var a=0; a < aNodeArr.length; a++){
           if( aNodeArr[a].getAttribute('href') != undefined && aNodeArr[a].getAttribute('href').search(/#pop/) >= 0){
             imgNodeArr = aNodeArr[a].getElementsByTagName('img');
             for(var i =0; i < imgNodeArr.length; i++){
               imgNodeArr[i].onmouseover = function(e){
                 var de=!document.documentElement.clientWidth?document.body:document.documentElement; // IE6
                 var sx=gk?pageXOffset:de.scrollLeft; //scroll h
                 var sy=gk?pageYOffset:de.scrollTop; //scroll v
                 var x=gk?e.pageX:event.clientX+sx; //curseur x
                 var y=gk?e.pageY:event.clientY+sy; //curseur y
                 var el=gk?e.target:event.srcElement;
                 /*** since IE has href like http... using match to get target ***/
                 if ( pop = document.getElementById(this.parentNode.getAttribute('href').match(/popd+/)[0]) ){
                   if ( current != pop ){
                     if ( current != undefined ){
                       current.style.display='none';
                     }
                     pop.style.display = 'block';
                     pop.style.left = x+'px';
                     pop.style.top = y+'px';
                     current = pop;
                   } else if (current != undefined){
                     current.style.display='none';
                     current = undefined;
                   }
                 }
               }
             }
           }
         }
       }


 
PS : dans la section M#quettiste et sous Firefox je rencontre un problème que je ne rencontre dans aucune autre rubrique (pourtant j'utilise les mêmes classes) avec l'image class="def" qui se comporte comme si il y avait un margin-right important / alors que tout s'affiche correctement ailleurs donc.
 
Si vous avez une idée pour ça aussi, je suis client !


---------------
Consultant SEO
Reply

Marsh Posté le 11-07-2006 à 13:25:37    

tiens voila la page que j'ai utilisée pour tester ;)

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <script type="text/javascript">
  8.   var gk=window.Event?1:0; // navigateurs Gecko ou IE  
  9.   var current=undefined;
  10.   window.onload = function(){
  11.     aNodeArr = document.getElementsByTagName('A');
  12.     for( var a=0; a < aNodeArr.length; a++){
  13.       if( aNodeArr[a].getAttribute('href') != undefined && aNodeArr[a].getAttribute('href').search(/#pop/) >= 0){
  14.         imgNodeArr = aNodeArr[a].getElementsByTagName('img');
  15.         for(var i =0; i < imgNodeArr.length; i++){
  16.           imgNodeArr[i].onmouseover = function(e){
  17.             var de=!document.documentElement.clientWidth?document.body:document.documentElement; // IE6
  18.             var sx=gk?pageXOffset:de.scrollLeft; //scroll h
  19.             var sy=gk?pageYOffset:de.scrollTop; //scroll v
  20.             var x=gk?e.pageX:event.clientX+sx; //curseur x
  21.             var y=gk?e.pageY:event.clientY+sy; //curseur y
  22.             var el=gk?e.target:event.srcElement;
  23.             /*** since IE has href like http... using match to get target ***/
  24.             if ( pop = document.getElementById(this.parentNode.getAttribute('href').match(/pop\d+/)[0]) ){
  25.               if ( current != pop ){
  26.                 if ( current != undefined ){
  27.                   current.style.display='none';
  28.                 }
  29.                 pop.style.display = 'block';
  30.                 pop.style.left = x+'px';
  31.                 pop.style.top = y+'px';
  32.                 current = pop;
  33.               } else if (current != undefined){
  34.                 current.style.display='none';
  35.                 current = undefined;
  36.               }
  37.             }
  38.           }
  39.         }
  40.       }
  41.     }
  42.   }
  43.   </script>
  44.   <style type="text/css">
  45. img.def { color:#FF9100;  width:11px; height:8px; }
  46. #pop1 {
  47.   position:absolute;
  48.   top:50px;
  49.   display:none;
  50.   width: 18em;
  51.   border:2px double black;
  52.   background: #FF9100;
  53.   z-index: 1500;
  54.   font-size: 100%;
  55.   margin-left:0px;
  56.   margin-right:0px;
  57.   margin-top:30px;
  58. }
  60.   </style>
  61. </head>
  62. <body>
  63. <a href="#pop1" class="pop"><img  src="arbre/minus.png" alt="Definition" width="11" height="8" class="def" /></a>
  65. <div id="pop1">
  66.    <h3>PAO</h3>
  67.      <p><strong>La publication assist&eacute;e par ordinateur</strong>, commun&eacute;ment abr&eacute;g&eacute;e <strong>PAO</strong>, est l&rsquo;ensemble des proc&eacute;d&eacute;s informatiques (micro-ordinateur, logiciels, p&eacute;riph&eacute;riques d&rsquo;acquisition, d&rsquo;&eacute;criture...) permettant de fabriquer des documents destin&eacute;s &agrave; l&rsquo; impression.</p>
  69. </div>
  70. </body>
  71. </html>


Tu pourras vérifier que ça marche bien :o
Est ce que chez toi tu pourrais rajouter

Code :
  1. alert('pouet');


juste en dessous de

Code :
  1. window.onload = function(){


Et me dire si ça fait pouet!
 
Et le 2eme pb on verra ensuite!

Reply

Marsh Posté le 11-07-2006 à 13:37:48    

Euh ouais ça sent pas très bon. lol Une fenêtre s'ouvre et ça fait bien pouet!
 
Mais dans la page que tu me donnes je survole le lien mais en vain : toujours pas d'affichage de la div.


Message édité par ultratoonz le 11-07-2006 à 13:41:31

---------------
Consultant SEO
Reply

Marsh Posté le 11-07-2006 à 13:45:16    

Attends deux secondes (trop rapide anapajari !) je regarde ma CSS.


---------------
Consultant SEO
Reply

Marsh Posté le 11-07-2006 à 14:00:21    

Bon, je récapétète :
 

Citation :

<a href="#pop1" class="pop"><img src="images/def.gif" alt="Définition" width="6" height="6" class="def" /></a>


 

Citation :

div#gauche a.pop { }
div#gauche img.def { color:#FF9100;  width:6px; height:6px; }


 
Et le javascript est texto ce qui est donné. Je l'ai mis en ligne pour que tu puisses le vérifier.


---------------
Consultant SEO
Reply

Marsh Posté le 11-07-2006 à 14:01:23    

Bon, je récapétète :
 

Citation :

<a href="#pop1" class="pop"><img src="images/def.gif" alt="Définition" width="6" height="6" class="def" /></a>


 

Citation :

div#gauche a.pop { }
div#gauche img.def { color:#FF9100;  width:6px; height:6px; }


 
Et le javascript est texto ce qui est donné. Je l'ai mis en ligne pour que tu puisses le vérifier mais c'est du copier-coller garanti.  ;)  


---------------
Consultant SEO
Reply

Marsh Posté le 11-07-2006 à 14:24:20    

:D
pour rire défini tes styles

Code :
  1. #pop1, #pop2, #pop3, #pop4, #pop5, #pop6, #pop7, #pop8 {
  2. position:absolute;
  3. top:50px;
  4. display:none;
  5. width: 18em;
  6. border:2px double black;
  7. background: #FF9100;
  8. z-index: 1500;
  9. font-size: 100%;
  10. margin-left:0px;
  11. margin-right:0px;
  12. margin-top:30px;
  13. }


Directement dans la page html au lieu de les mettres dans un import ...
Et dis moi ce qu'il se passe!

Reply

Marsh Posté le 12-07-2006 à 10:33:13    

Bah alors juste pour rire, hein ? lol
 
La page se trouve à la racine de mon site : index-cssdanspage.php C'était pas plus cher alors j'ai mis tous les styles dedans.
 


---------------
Consultant SEO
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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