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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Zone réactive de lien d'une image : hors de l'image

ultratoonz

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 :

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

Publicité

bobleponge6

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

bobleponge6

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

anapajari

s/travail/glanding on hfr/gs;

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 :

<img ... pop="pop1".../>

3- tu fais un fonction init dans le onload:

Code :

document.onload = function {
var imgs = document.getElementsByTagName('img');
for(imgNode in imgs){
if ( imgNode.getAttribute('pop') != undefined && imgNode.getAttribute('pop') != ''){
imgNode.onmouseover = function (e) {
popup = this.getAttribute('pop').substring(this.getAttribute('pop').lastIndexOf('#') + 1)).style;
//... la suite de ta fonction ...
}
}
}
}

Un truc dans le genre ... mais j'ai rien testé
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

Arjuna

Aircraft Ident.: F-MBSD

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

Arjuna

Aircraft Ident.: F-MBSD

/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

anapajari

s/travail/glanding on hfr/gs;

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é
Il est juste sur le node A et pas sur l'image

ultratoonz

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

anapajari

s/travail/glanding on hfr/gs;

t'es pas très débrouillard
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 :

var gk=window.Event?1:0; // navigateurs Gecko ou IE
var current;
document.onload = function(){
aNodes = document.getElementsByTagName('A');
for( var aNode in aNodeArr){
if( aNode.getAttribute('src') != undefined && aNode.getAttribute('src').substr(0,3) == '#pop'){
imgNodeArr = aNode.getElementsByTagName('img');
for(imgNode in imgNodeArr){
imgNode.onmouseOver = function(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?this.pageX:event.clientX+sx; //curseur x
y=gk?this.pageY:event.clientY+sy; //curseur y
el=gk?this.target:event.srcElement;
if ( pop = document.getElementById(aNode.getAttribue('src').replace('#','')) ){
if ( current != pop ){
current.style.display='none';
pop.style.display = 'block';
pop.style.left = x+'px';
pop.style.top = y+'px';
current = pop;
} else {
current.style.display = 'none';
current = undefined;
}
}
}
}
}
}
}

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

anapajari

s/travail/glanding on hfr/gs;

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/

Publicité

Arjuna

Aircraft Ident.: F-MBSD

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

anapajari

s/travail/glanding on hfr/gs;

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
Tu regardes pas au bon endroit
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

ultratoonz

Citation :

t'es pas très débrouillard

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 :

n'était plus d'actualité.

Message cité 1 fois

---------------
Consultant SEO

Arjuna

Aircraft Ident.: F-MBSD

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

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

Message cité 1 fois

anapajari

s/travail/glanding on hfr/gs;

ultratoonz a écrit :

Citation :

t'es pas très débrouillard

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 est très important

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 :

n'était plus d'actualité.

Nan ça tu touches pas!!!

Donc la fonction ça donne:

Code :

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').substr(0,4) == '#pop'){
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;
if ( pop = document.getElementById(this.parentNode.getAttribute('href').replace('#','')) ){
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;
}
}
}
}
}
}
}

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

Arjuna a écrit :

Fallait la trouver
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

Moi j'ai fini ...

ultratoonz

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 !

Pitsy

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 :

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

ultratoonz

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.

anapajari

s/travail/glanding on hfr/gs;

ah ouais ça marche pas sous IE, sorry
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 :

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

par

Code :

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

Code :

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

par

Code :

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 :

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(/pop\d+/)[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;
}
}
}
}
}
}
}

ultratoonz

Thanks again mais ça marche pô.

Message cité 1 fois

---------------
Consultant SEO

anapajari

s/travail/glanding on hfr/gs;

ultratoonz a écrit :

Thanks again mais ça marche pô.

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

Message cité 1 fois

ultratoonz

anapajari a écrit :

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

Ben copié c'est pourtant ma spécialité ! lol

Ca ça n'a pas bougé.

Citation :

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

Citation :

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

anapajari

s/travail/glanding on hfr/gs;

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

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Exemple</title>
<script type="text/javascript">
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(/pop\d+/)[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;
}
}
}
}
}
}
}
</script>
<style type="text/css">
img.def { color:#FF9100; width:11px; height:8px; }
#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;
}
</style>
</head>
<body>
<a href="#pop1" class="pop"><img src="arbre/minus.png" alt="Definition" width="11" height="8" class="def" /></a>
<div id="pop1">
<h3>PAO</h3>
<p><strong>La publication assistée par ordinateur</strong>, communément abrégée <strong>PAO</strong>, est l’ensemble des procédés informatiques (micro-ordinateur, logiciels, périphériques d’acquisition, d’écriture...) permettant de fabriquer des documents destinés à l’ impression.</p>
</div>
</body>
</html>

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

Code :

alert('pouet');

juste en dessous de

Code :

window.onload = function(){

Et me dire si ça fait pouet!

Et le 2eme pb on verra ensuite!

ultratoonz

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

ultratoonz

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

---------------
Consultant SEO

ultratoonz

Bon, je récapétète :

Citation :

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

ultratoonz

Bon, je récapétète :

Citation :

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

anapajari

s/travail/glanding on hfr/gs;

pour rire défini tes styles

Code :

#pop1, #pop2, #pop3, #pop4, #pop5, #pop6, #pop7, #pop8 {
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;
}

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

ultratoonz

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Pb de lien sous masque	Changer une image quand ajout dans une bdd
image qui suit le curseur dans une animation flash	[Flash] aide mettre des boutons dans une image
Creer une image GIF a partir de texte	fonction dans un lien php
formulaire : alignement à droite dans zone saisie ?	Redimensionnement d'image au survol
pblm de lien php avec un include	HTML : faire un lien direct vers une page précise d'un PDF
Plus de sujets relatifs à : Zone réactive de lien d'une image : hors de l'image

Page générée en 0.147 secondes