Sujet Précédent Sujet Suivant

Zone reactives

missceline33 Messages postés 42 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 8 février 2007 - 17 mai 2005 à 13:17
missceline33 Messages postés 42 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 8 février 2007 - 18 mai 2005 à 09:41
Bonjout,

je travaille actuellement sur une image, sur laquelle je fais
apparaitre des objets et je souhaiterais pouvoir afficher des
informations quand je passe sur les objets.

J'ai vu différents script qui utilise des Area, mais le problème c'est
qu'il faut utiliser un type

8 réponses

Réponse 1 / 8
cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
17 mai 2005 à 16:20
Bonjour,
"j'ai rien compris"
ou ça se gère
exactement pareil, c'est la même chose.
il s'agit d'afficher des images ( img ou
input type="image" ) ? => dans les script vus
le fait de gérer un textarea ou une image
ça devrait être pareil. ce sont des objets
et c'est tout.
mettre une image à la place du textarea
et ça devrait coller.

Cordialement. Bul. ~Site~~[mailto:marcelBultez@tiscali.fr Mail]~
0
Réponse 2 / 8
missceline33 Messages postés 42 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 8 février 2007
17 mai 2005 à 17:03
je ne suis pas sure que ce soit pareil parc que le champ USEMAP ne semble existait que pour les champ de type



j'ai testé ceci "exemple"

<html>

<head>

<title>Untitled</title>

</head>



<script type="text/javascript" src="bubble.js"></script>

<center>





</center>

<MAP NAME="SystemMap">





















</MAP>



</html>



avec le scipt "bubble.js"

document.write('<style>.message {FILTER:
progid:DXImageTransform.Microsoft.Alpha(
style=0,opacity=50);font-family:verdana;font-size:18px;color:#ffffff;width:200;height:20;background:#0000ff;
}</style>');

document.write('

');

objmove = document.onmousemove;

document.onmousemove = position;

obj = document.getElementById("alt");



function position(evenement)

{

if (objmove) objmove();

posx = document.all'event.x+document.body.scrollLeft:evenement.pageX;

posy = document.all'event.y+document.body.scrollTop:evenement.pageY;

topscroll = document.all?document.body.scrollTop:window.pageYOffset;

leftscroll = document.all?document.body.scrollLeft:window.pageXOffset;

hauteur_ecran = document.all?document.body.offsetHeight:window.innerHeight;

largeur_ecran = document.all?document.body.offsetWidth:window.innerWidth;

}



function voirmessage(message)

{



html = ''+message+'';

document.getElementById('alt').innerHTML = html;

bouge = setTimeout("fairesuivre()",1)

}

function fairesuivre()

{

hauteur_layer = obj.offsetHeight;

largeur_layer = obj.offsetWidth;

if (posy-topscroll > (hauteur_ecran/2))

posiy = posy-hauteur_layer-15;

else

posiy = posy+25;

decalerL = posx-(largeur_layer/2)<0?posx-(largeur_layer/2)-25:0;

decalerR = posx+(largeur_layer/2)>largeur_ecran?posx+(largeur_layer/2)-largeur_ecran+25:0;

posix = (posx-(largeur_layer/2))-decalerL-decalerR;



obj.style.top = posiy;

obj.style.left = posix;

obj.style.display = "block";

bouge = setTimeout("fairesuivre()",5)

}

function killMessage()

{

clearTimeout(bouge);

obj.style.display = "none";

}







et tu peux remarquer que cela marhce avec
0
Réponse 3 / 8
cs_garfield90 Messages postés 388 Date d'inscription lundi 7 juillet 2003 Statut Webmaster Dernière intervention 10 février 2009
17 mai 2005 à 17:07
Ah bon, je savais pas ca moi. ;)



j'utilise les usemap avec les balises img et ca marche très bien




"They are 10 sorts of persons whose understand binary and whose not"
0
Réponse 4 / 8
missceline33 Messages postés 42 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 8 février 2007
17 mai 2005 à 17:23
Dans ce cas là , peux-tu me dire ce qui cloche dans le script ci-dessus? :)

(Remarque: l'espace qu'il manque entre mapSRC et mapbSRC et une erreur
liée au copier-coller car il y a un espace dans mon script)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 8
cs_garfield90 Messages postés 388 Date d'inscription lundi 7 juillet 2003 Statut Webmaster Dernière intervention 10 février 2009
17 mai 2005 à 19:08
Aucune erreur, une fois les espaces mis correctement et toutes les valeurs en "



Fais de meme avec ton code source, mais tes balises en minuscule ainsi que les infos à l'interieur (trou quant au mot correct )





Testé sous IE et FF avec 2 usemap différents et 1 seul usemap



Cordialement


"They are 10 sorts of persons whose understand binary and whose not"
0
Réponse 6 / 8
missceline33 Messages postés 42 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 8 février 2007
18 mai 2005 à 09:12
Désolée,

mais j'ai toujours le même problème, moi ca ne marche pas. Peux-tu me dire précisément ce qui ne vas pas?

J'ai changé mes balises en minuscules ainsi que leur valeur....(je n'ai
pas compris ce que tu voulais dire par "trou quant au mot correct").



document.write('<style>.message {FILTER:
progid:DXImageTransform.Microsoft.Alpha(
style=0,opacity=50);font-family:verdana;font-size:18px;color:#ffffff;width:200;height:20;background:#0000ff;
}</style>');

document.write('

');

objmove = document.onmousemove;

document.onmousemove = position;

obj = document.getElementById("alt");



function position(evenement)

{

if (objmove) objmove();

posx = document.all'event.x + document.body.scrollLeft:evenement.pageX;

posy = document.all'event.y + document.body.scrollTop:evenement.pageY;

topscroll = document.all?document.body.scrollTop:window.pageYOffset;

leftscroll = document.all?document.body.scrollLeft:window.pageXOffset;

hauteur_ecran = document.all?document.body.offsetHeight:window.innerHeight;

largeur_ecran = document.all?document.body.offsetWidth:window.innerWidth;

}



function voirmessage(message)

{



html = "span class='message'>"+message+'';

document.getElementById("alt").innerHTML = html;

bouge = setTimeout("fairesuivre()",1)

}

function fairesuivre()

{

hauteur_layer = obj.offsetHeight;

largeur_layer = obj.offsetWidth;

if (posy-topscroll > (hauteur_ecran / 2))

posiy = posy-hauteur_layer - 15;

else

posiy = posy + 25;

decalerL = posx - (largeur_layer / 2) < 0 ? posx -(largeur_layer / 2) - 25:0;

decalerR = posx + (largeur_layer / 2 ) > largeur_ecran ? posx + (largeur_layer / 2 ) - largeur_ecran + 25:0;

posix = (posx - (largeur_layer / 2 )) - decalerL - decalerR;



obj.style.top = posiy;

obj.style.left = posix;

obj.style.display = "block";

bouge = setTimeout("fairesuivre()",5)

}

function killMessage()

{

clearTimeout(bouge);

obj.style.display = "none";

}







/*-----------------------------------------*/

<html>

<head>

<title>Untitled</title>

</head>



<script type="text/javascript" src="bubble.js"></script>

<center>



<!-- -->

</center>

<map name="SystemMap">





















</map>



</html>





Sorry, mais je débute et là je ne comprends pas pourquoi toi tu arrives à le faire marcher et pas moi!!

Céline
0
Réponse 7 / 8
missceline33 Messages postés 42 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 8 février 2007
18 mai 2005 à 09:16
Désolée je n'avais pas vu que tu m'avais envoyé des sources, je vais
tester ca directe et je te dis plus tard, ce qu'il en est....

Merci.



Céline
0
Réponse 8 / 8
missceline33 Messages postés 42 Date d'inscription mercredi 27 avril 2005 Statut Membre Dernière intervention 8 février 2007
18 mai 2005 à 09:41
Non, ca marche pas.

Enfin, ca marche pas sous Internet 6.0 mais ca marche sous fireFox!!

Quelle est ta version de Internet Explorer???
0

Discussions similaires

Zone de texte dans un canvas
_Moise_ -
_Moise_ -

4 réponses
Boite de dialogue avec plusieurs zones de saisie
sleep -
sleep -

9 réponses
zones d'édition
tzan -
garslouche -

4 réponses
zone de texte sur image
gregml -
gregml -

27 réponses
Lier des zones de textes dans Canva
LucCha -
LucCha -

0 réponse
Rejoignez-nous