Accueil > Forum > > > > carte interactive
 carte interactive
dimanche 7 septembre 2003 à 14:11:15 |
carte interactive
Auklaar
|
Bonjour à tous ! voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> Comment puis-je faire? merci d'avance ______________________________________________________ Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème. |
|
lundi 8 septembre 2003 à 02:13:30 |
Re : carte interactive
Houzefa
|
dans le <area> tu rajoutes : | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
et tu fais une fonction survol de ce style : function survol(objet, type){
objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
} |
pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : | <span id="calque"></span> |
et pour écrire qqchose dans calque : | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
Houzéf@ - www.123toto.com------------------------------- Réponse au message : ------------------------------- > Bonjour à tous ! > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > Comment puis-je faire? > merci d'avance > > ______________________________________________________ > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème. |
|
mardi 9 septembre 2003 à 17:01:27 |
Re : carte interactive
Auklaar
|
merci mais j'ai toujours un problème, ta fonction surbol tu la met ou et entre quel balises? merci beaucoup ------------------------------- Réponse au message : ------------------------------- > dans le <area> tu rajoutes : > | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
> et tu fais une fonction survol de ce style : > function survol(objet, type){
> objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> } |
> > pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : > | <span id="calque"></span> |
> et pour écrire qqchose dans calque : > | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
> > Houzéf@ - www.123toto.com> > > ------------------------------- > Réponse au message : > ------------------------------- > > > Bonjour à tous ! > > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > > Comment puis-je faire? > > merci d'avance > > > > ______________________________________________________ > > > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème.> |
|
mercredi 10 septembre 2003 à 01:23:26 |
Re : carte interactive
Houzefa
|
voici la structure de ta page : <html>
<head>
<title>Titre</title>
<script language="JavaScript">
function survol(objet, type){
objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
}
function message(){
document.getElementById("calque").innerHTML="<b>Code HTML</b>";
}
</script>
</head>
<body>
<area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()">
<span id="calque"></span>
</body>
</html> |
Houzéf@ - www.123toto.com------------------------------- Réponse au message : ------------------------------- > merci mais j'ai toujours un problème, ta fonction surbol tu la met ou et entre quel balises? > merci beaucoup > > ------------------------------- > Réponse au message : > ------------------------------- > > > dans le <area> tu rajoutes : > > | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
> > et tu fais une fonction survol de ce style : > > function survol(objet, type){
> > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > } |
> > > > pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : > > | <span id="calque"></span> |
> > et pour écrire qqchose dans calque : > > | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
> > > > Houzéf@ - www.123toto.com> > > > > > ------------------------------- > > Réponse au message : > > ------------------------------- > > > > > Bonjour à tous ! > > > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > > > Comment puis-je faire? > > > merci d'avance > > > > > > ______________________________________________________ > > > > > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème.> > > |
|
mercredi 10 septembre 2003 à 20:32:18 |
Re : carte interactive
Auklaar
|
merci de consacrer un peu de ton temps pour moi mais es-tu sur que ca marche? Chez moi ca ne marche pas et je ne comprend pas pourkoi. Pour afficher un text au click de la sourie jme suis demerdé avec une iframe mais pour la couleur qui change au survol ca marche pas pourtant j'ai bien mis la fonction juste avant le </head> et rajouter la ligne de code dans le <area shape>. Ya-t'il un autre moyen? merci beaucoup. ------------------------------- Réponse au message : ------------------------------- > voici la structure de ta page : > <html>
>
> <head>
> <title>Titre</title>
>
> <script language="JavaScript">
> function survol(objet, type){
> objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> }
> function message(){
> document.getElementById("calque").innerHTML="<b>Code HTML</b>";
> }
> </script>
>
> </head>
>
> <body>
>
> <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()">
>
> <span id="calque"></span>
>
> </body>
>
> </html> |
> > Houzéf@ - www.123toto.com> > > ------------------------------- > Réponse au message : > ------------------------------- > > > merci mais j'ai toujours un problème, ta fonction surbol tu la met ou et entre quel balises? > > merci beaucoup > > > > ------------------------------- > > Réponse au message : > > ------------------------------- > > > > > dans le <area> tu rajoutes : > > > | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
> > > et tu fais une fonction survol de ce style : > > > function survol(objet, type){
> > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > } |
> > > > > > pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : > > > | <span id="calque"></span> |
> > > et pour écrire qqchose dans calque : > > > | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
> > > > > > Houzéf@ - www.123toto.com> > > > > > > > > ------------------------------- > > > Réponse au message : > > > ------------------------------- > > > > > > > Bonjour à tous ! > > > > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > > > > Comment puis-je faire? > > > > merci d'avance > > > > > > > > ______________________________________________________ > > > > > > > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème.> > > > > > |
|
jeudi 11 septembre 2003 à 01:04:51 |
Re : carte interactive
Houzefa
|
je viens de tester ce code avec une image et ca marche très bien. cependant, il faut bien choisir l'image de laquelle tu veux changer la couleur d'arrière-plan : il faut que ce soit une image gif, avec certaines parties de cette image qui soient transparentes. avec d'autres types d'images non-transparentes, ca peut pas marcher. a cette adresse, voila l'icone de mon site, qui est une image gif avec un fond transparent :  [ Lien ]pour faire un test, remplace : | <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
par : | <img src="http://www.123toto.com/icone.gif" href="#" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
Houzéf@ - www.123toto.com------------------------------- Réponse au message : ------------------------------- > merci de consacrer un peu de ton temps pour moi mais es-tu sur que ca marche? Chez moi ca ne marche pas et je ne comprend pas pourkoi. Pour afficher un text au click de la sourie jme suis demerdé avec une iframe mais pour la couleur qui change au survol ca marche pas pourtant j'ai bien mis la fonction juste avant le </head> et rajouter la ligne de code dans le <area shape>. Ya-t'il un autre moyen? merci beaucoup. > > ------------------------------- > Réponse au message : > ------------------------------- > > > voici la structure de ta page : > > <html>
> >
> > <head>
> > <title>Titre</title>
> >
> > <script language="JavaScript">
> > function survol(objet, type){
> > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > }
> > function message(){
> > document.getElementById("calque").innerHTML="<b>Code HTML</b>";
> > }
> > </script>
> >
> > </head>
> >
> > <body>
> >
> > <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()">
> >
> > <span id="calque"></span>
> >
> > </body>
> >
> > </html> |
> > > > Houzéf@ - www.123toto.com> > > > > > ------------------------------- > > Réponse au message : > > ------------------------------- > > > > > merci mais j'ai toujours un problème, ta fonction surbol tu la met ou et entre quel balises? > > > merci beaucoup > > > > > > ------------------------------- > > > Réponse au message : > > > ------------------------------- > > > > > > > dans le <area> tu rajoutes : > > > > | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
> > > > et tu fais une fonction survol de ce style : > > > > function survol(objet, type){
> > > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > > } |
> > > > > > > > pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : > > > > | <span id="calque"></span> |
> > > > et pour écrire qqchose dans calque : > > > > | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
> > > > > > > > Houzéf@ - www.123toto.com> > > > > > > > > > > > ------------------------------- > > > > Réponse au message : > > > > ------------------------------- > > > > > > > > > Bonjour à tous ! > > > > > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > > > > > Comment puis-je faire? > > > > > merci d'avance > > > > > > > > > > ______________________________________________________ > > > > > > > > > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème.> > > > > > > > > > |
|
samedi 13 septembre 2003 à 15:39:03 |
Re : carte interactive
Auklaar
|
Ton script marche très bien avec une image mais il ne marche pas avec une zone interactive de type<area>. En plus je crois que tu n'as pas compris ce que je veux. Ce n'est pas l'arrière plan que je veux changer mails la couleur de la zone interactive qui est sur mon image. Mon image est une carte et il n'ya pas d'arrière plan. Merci quand meme. Si quelqu'un peut m'aidez svp! merci d'avance. ------------------------------- Réponse au message : ------------------------------- > je viens de tester ce code avec une image et ca marche très bien. cependant, il faut bien choisir l'image de laquelle tu veux changer la couleur d'arrière-plan : il faut que ce soit une image gif, avec certaines parties de cette image qui soient transparentes. avec d'autres types d'images non-transparentes, ca peut pas marcher. > > a cette adresse, voila l'icone de mon site, qui est une image gif avec un fond transparent : [ Lien ]> > pour faire un test, remplace : > | <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
> > par : > | <img src="http://www.123toto.com/icone.gif" href="#" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
> > Houzéf@ - www.123toto.com> > > ------------------------------- > Réponse au message : > ------------------------------- > > > merci de consacrer un peu de ton temps pour moi mais es-tu sur que ca marche? Chez moi ca ne marche pas et je ne comprend pas pourkoi. Pour afficher un text au click de la sourie jme suis demerdé avec une iframe mais pour la couleur qui change au survol ca marche pas pourtant j'ai bien mis la fonction juste avant le </head> et rajouter la ligne de code dans le <area shape>. Ya-t'il un autre moyen? merci beaucoup. > > > > ------------------------------- > > Réponse au message : > > ------------------------------- > > > > > voici la structure de ta page : > > > <html>
> > >
> > > <head>
> > > <title>Titre</title>
> > >
> > > <script language="JavaScript">
> > > function survol(objet, type){
> > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > }
> > > function message(){
> > > document.getElementById("calque").innerHTML="<b>Code HTML</b>";
> > > }
> > > </script>
> > >
> > > </head>
> > >
> > > <body>
> > >
> > > <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()">
> > >
> > > <span id="calque"></span>
> > >
> > > </body>
> > >
> > > </html> |
> > > > > > Houzéf@ - www.123toto.com> > > > > > > > > ------------------------------- > > > Réponse au message : > > > ------------------------------- > > > > > > > merci mais j'ai toujours un problème, ta fonction surbol tu la met ou et entre quel balises? > > > > merci beaucoup > > > > > > > > ------------------------------- > > > > Réponse au message : > > > > ------------------------------- > > > > > > > > > dans le <area> tu rajoutes : > > > > > | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
> > > > > et tu fais une fonction survol de ce style : > > > > > function survol(objet, type){
> > > > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > > > } |
> > > > > > > > > > pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : > > > > > | <span id="calque"></span> |
> > > > > et pour écrire qqchose dans calque : > > > > > | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
> > > > > > > > > > Houzéf@ - www.123toto.com> > > > > > > > > > > > > > > ------------------------------- > > > > > Réponse au message : > > > > > ------------------------------- > > > > > > > > > > > Bonjour à tous ! > > > > > > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > > > > > > Comment puis-je faire? > > > > > > merci d'avance > > > > > > > > > > > > ______________________________________________________ > > > > > > > > > > > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème.> > > > > > > > > > > > > > > |
|
dimanche 14 septembre 2003 à 05:59:54 |
Re : carte interactive
Houzefa
|
dans ce cas g pas trop de réponse... tu ne peux pas changer le contenu d'une image, puisque ce que tu veux faire revient a peu près a untiliser l'outil "pot de peinture" qu'il ya dans les logiciels de dessin. et en javascript c impossible. par contre ya une solution en PHP, mais assez compliquée : pour chaque zone <area>, PHP génère automatiquement une image différente de l'image de base et la sauve dans un répertoire. ensuite dans le script, faut juste changer l'adresse de l'image chaque fois qu'on survole une <area>. si ton image ne change pas, tu peux aussi faire ces images toi-meme et les mettre dans un dossier. ensuite le javascript est très simple, suffit de mettre : | onMouseOver="document.images [ 0 ] .src='image_1.jpg'" onMouseOut="document.images [ 0 ] .src='image_0.jpg'" |
ce code suppose que l'image a changer (celle qui contient l'ensemble des zones réactives) s'appelle image_0.jpg et que lorsqu'on survole une zone faut mettre l'image image_1.jpg. de + faut que ton image soit la 1ère de la page. si c'est par ex la 6ème image de la page, faut mettre un [ 5 ] au lieu du [ 0 ]. Chaque problème a sa solution, et jcrois bien l'avoir trouvée ! :)Houzéf@ - [url="http://www.123toto.com"]www.123toto.com[/url]------------------------------- Réponse au message : ------------------------------- > Ton script marche très bien avec une image mais il ne marche pas avec une zone interactive de type<area>. En plus je crois que tu n'as pas compris ce que je veux. Ce n'est pas l'arrière plan que je veux changer mails la couleur de la zone interactive qui est sur mon image. Mon image est une carte et il n'ya pas d'arrière plan. Merci quand meme. Si quelqu'un peut m'aidez svp! merci d'avance. > > ------------------------------- > Réponse au message : > ------------------------------- > > > je viens de tester ce code avec une image et ca marche très bien. cependant, il faut bien choisir l'image de laquelle tu veux changer la couleur d'arrière-plan : il faut que ce soit une image gif, avec certaines parties de cette image qui soient transparentes. avec d'autres types d'images non-transparentes, ca peut pas marcher. > > > > a cette adresse, voila l'icone de mon site, qui est une image gif avec un fond transparent : [url]http://www.123toto.com/icone.gif[/url] > > > > pour faire un test, remplace : > > | <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
> > > > par : > > | <img src="http://www.123toto.com/icone.gif" href="#" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
> > > > Houzéf@ - [url="http://www.123toto.com"]www.123toto.com[/url]> > > > > > ------------------------------- > > Réponse au message : > > ------------------------------- > > > > > merci de consacrer un peu de ton temps pour moi mais es-tu sur que ca marche? Chez moi ca ne marche pas et je ne comprend pas pourkoi. Pour afficher un text au click de la sourie jme suis demerdé avec une iframe mais pour la couleur qui change au survol ca marche pas pourtant j'ai bien mis la fonction juste avant le </head> et rajouter la ligne de code dans le <area shape>. Ya-t'il un autre moyen? merci beaucoup. > > > > > > ------------------------------- > > > Réponse au message : > > > ------------------------------- > > > > > > > voici la structure de ta page : > > > > <html>
> > > >
> > > > <head>
> > > > <title>Titre</title>
> > > >
> > > > <script language="JavaScript">
> > > > function survol(objet, type){
> > > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > > }
> > > > function message(){
> > > > document.getElementById("calque").innerHTML="<b>Code HTML</b>";
> > > > }
> > > > </script>
> > > >
> > > > </head>
> > > >
> > > > <body>
> > > >
> > > > <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()">
> > > >
> > > > <span id="calque"></span>
> > > >
> > > > </body>
> > > >
> > > > </html> |
> > > > > > > > Houzéf@ - [url="http://www.123toto.com"]www.123toto.com[/url]> > > > > > > > > > > > ------------------------------- > > > > Réponse au message : > > > > ------------------------------- > > > > > > > > > merci mais j'ai toujours un problème, ta fonction surbol tu la met ou et entre quel balises? > > > > > merci beaucoup > > > > > > > > > > ------------------------------- > > > > > Réponse au message : > > > > > ------------------------------- > > > > > > > > > > > dans le <area> tu rajoutes : > > > > > > | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
> > > > > > et tu fais une fonction survol de ce style : > > > > > > function survol(objet, type){
> > > > > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > > > > } |
> > > > > > > > > > > > pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : > > > > > > | <span id="calque"></span> |
> > > > > > et pour écrire qqchose dans calque : > > > > > > | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
> > > > > > > > > > > > Houzéf@ - [url="http://www.123toto.com"]www.123toto.com[/url]> > > > > > > > > > > > > > > > > > ------------------------------- > > > > > > Réponse au message : > > > > > > ------------------------------- > > > > > > > > > > > > > Bonjour à tous ! > > > > > > > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > > > > > > > Comment puis-je faire? > > > > > > > merci d'avance > > > > > > > > > > > > > > ______________________________________________________ > > > > > > > > > > > > > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème.> > > > > > > > > > > > > > > > > > > > > |
|
dimanche 14 septembre 2003 à 11:11:26 |
Re : carte interactive
Auklaar
|
merci beaucoup, je vais tester cette solution dès que j'ai le temps. Je pense que ca dvrait marcher. Je te tiendrais informé. encore merci. ------------------------------- Réponse au message : ------------------------------- > dans ce cas g pas trop de réponse... tu ne peux pas changer le contenu d'une image, puisque ce que tu veux faire revient a peu près a untiliser l'outil "pot de peinture" qu'il ya dans les logiciels de dessin. et en javascript c impossible. > > par contre ya une solution en PHP, mais assez compliquée : pour chaque zone <area>, PHP génère automatiquement une image différente de l'image de base et la sauve dans un répertoire. ensuite dans le script, faut juste changer l'adresse de l'image chaque fois qu'on survole une <area>. > > si ton image ne change pas, tu peux aussi faire ces images toi-meme et les mettre dans un dossier. ensuite le javascript est très simple, suffit de mettre : > | onMouseOver="document.images [ 0 ] .src='image_1.jpg'" onMouseOut="document.images [ 0 ] .src='image_0.jpg'" |
> ce code suppose que l'image a changer (celle qui contient l'ensemble des zones réactives) s'appelle image_0.jpg et que lorsqu'on survole une zone faut mettre l'image image_1.jpg. de + faut que ton image soit la 1ère de la page. si c'est par ex la 6ème image de la page, faut mettre un [ 5 ] au lieu du [ 0 ]. > > Chaque problème a sa solution, et jcrois bien l'avoir trouvée ! :)> > > Houzéf@ - www.123toto.com> > > ------------------------------- > Réponse au message : > ------------------------------- > > > Ton script marche très bien avec une image mais il ne marche pas avec une zone interactive de type<area>. En plus je crois que tu n'as pas compris ce que je veux. Ce n'est pas l'arrière plan que je veux changer mails la couleur de la zone interactive qui est sur mon image. Mon image est une carte et il n'ya pas d'arrière plan. Merci quand meme. Si quelqu'un peut m'aidez svp! merci d'avance. > > > > ------------------------------- > > Réponse au message : > > ------------------------------- > > > > > je viens de tester ce code avec une image et ca marche très bien. cependant, il faut bien choisir l'image de laquelle tu veux changer la couleur d'arrière-plan : il faut que ce soit une image gif, avec certaines parties de cette image qui soient transparentes. avec d'autres types d'images non-transparentes, ca peut pas marcher. > > > > > > a cette adresse, voila l'icone de mon site, qui est une image gif avec un fond transparent : [ Lien ]> > > > > > pour faire un test, remplace : > > > | <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
> > > > > > par : > > > | <img src="http://www.123toto.com/icone.gif" href="#" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
> > > > > > Houzéf@ - www.123toto.com> > > > > > > > > ------------------------------- > > > Réponse au message : > > > ------------------------------- > > > > > > > merci de consacrer un peu de ton temps pour moi mais es-tu sur que ca marche? Chez moi ca ne marche pas et je ne comprend pas pourkoi. Pour afficher un text au click de la sourie jme suis demerdé avec une iframe mais pour la couleur qui change au survol ca marche pas pourtant j'ai bien mis la fonction juste avant le </head> et rajouter la ligne de code dans le <area shape>. Ya-t'il un autre moyen? merci beaucoup. > > > > > > > > ------------------------------- > > > > Réponse au message : > > > > ------------------------------- > > > > > > > > > voici la structure de ta page : > > > > > <html>
> > > > >
> > > > > <head>
> > > > > <title>Titre</title>
> > > > >
> > > > > <script language="JavaScript">
> > > > > function survol(objet, type){
> > > > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > > > }
> > > > > function message(){
> > > > > document.getElementById("calque").innerHTML="<b>Code HTML</b>";
> > > > > }
> > > > > </script>
> > > > >
> > > > > </head>
> > > > >
> > > > > <body>
> > > > >
> > > > > <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()">
> > > > >
> > > > > <span id="calque"></span>
> > > > >
> > > > > </body>
> > > > >
> > > > > </html> |
> > > > > > > > > > Houzéf@ - www.123toto.com> > > > > > > > > > > > > > > ------------------------------- > > > > > Réponse au message : > > > > > ------------------------------- > > > > > > > > > > > merci mais j'ai toujours un problème, ta fonction surbol tu la met ou et entre quel balises? > > > > > > merci beaucoup > > > > > > > > > > > > ------------------------------- > > > > > > Réponse au message : > > > > > > ------------------------------- > > > > > > > > > > > > > dans le <area> tu rajoutes : > > > > > > > | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
> > > > > > > et tu fais une fonction survol de ce style : > > > > > > > function survol(objet, type){
> > > > > > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > > > > > } |
> > > > > > > > > > > > > > pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : > > > > > > > | <span id="calque"></span> |
> > > > > > > et pour écrire qqchose dans calque : > > > > > > > | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
> > > > > > > > > > > > > > Houzéf@ - www.123toto.com> > > > > > > > > > > > > > > > > > > > > ------------------------------- > > > > > > > Réponse au message : > > > > > > > ------------------------------- > > > > > > > > > > > > > > > Bonjour à tous ! > > > > > > > > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > > > > > > > > Comment puis-je faire? > > > > > > > > merci d'avance > > > > > > > > > > > > > > > > ______________________________________________________ > > > > > > > > > > > > > > > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème.> > > > > > > > > > > > > > > > > > > > > > > > > > > > |
|
dimanche 14 septembre 2003 à 11:42:36 |
Re : carte interactive
Houzefa
|
ah oui si l'image est grande il se peut que ce soit trop long pke a chaque fois qu'on passe la souris sur une zone réactive faut charger l'image, et ca peut etre long selon la taille de l'image. donc pour éviter ca, faut sauver toutes les images qui seront utilisées dans le cache de l'utilisateur. pour cela tu rajoutes dans <body> : et entre <head> et </head> : <script language="JavaScript">
function sauver_images(){
obj_image=new Image();
obj_image.src="image_0.jpg";
obj_image=new Image();
obj_image.src="image_1.jpg";
// ainsi de suite pour sauver chaque image
}
</script> |
Houzéf@ - www.123toto.com------------------------------- Réponse au message : ------------------------------- > merci beaucoup, je vais tester cette solution dès que j'ai le temps. Je pense que ca dvrait marcher. Je te tiendrais informé. encore merci. > > ------------------------------- > Réponse au message : > ------------------------------- > > > dans ce cas g pas trop de réponse... tu ne peux pas changer le contenu d'une image, puisque ce que tu veux faire revient a peu près a untiliser l'outil "pot de peinture" qu'il ya dans les logiciels de dessin. et en javascript c impossible. > > > > par contre ya une solution en PHP, mais assez compliquée : pour chaque zone <area>, PHP génère automatiquement une image différente de l'image de base et la sauve dans un répertoire. ensuite dans le script, faut juste changer l'adresse de l'image chaque fois qu'on survole une <area>. > > > > si ton image ne change pas, tu peux aussi faire ces images toi-meme et les mettre dans un dossier. ensuite le javascript est très simple, suffit de mettre : > > | onMouseOver="document.images [ 0 ] .src='image_1.jpg'" onMouseOut="document.images [ 0 ] .src='image_0.jpg'" |
> > ce code suppose que l'image a changer (celle qui contient l'ensemble des zones réactives) s'appelle image_0.jpg et que lorsqu'on survole une zone faut mettre l'image image_1.jpg. de + faut que ton image soit la 1ère de la page. si c'est par ex la 6ème image de la page, faut mettre un [ 5 ] au lieu du [ 0 ]. > > > > Chaque problème a sa solution, et jcrois bien l'avoir trouvée ! :)> > > > > > Houzéf@ - www.123toto.com> > > > > > ------------------------------- > > Réponse au message : > > ------------------------------- > > > > > Ton script marche très bien avec une image mais il ne marche pas avec une zone interactive de type<area>. En plus je crois que tu n'as pas compris ce que je veux. Ce n'est pas l'arrière plan que je veux changer mails la couleur de la zone interactive qui est sur mon image. Mon image est une carte et il n'ya pas d'arrière plan. Merci quand meme. Si quelqu'un peut m'aidez svp! merci d'avance. > > > > > > ------------------------------- > > > Réponse au message : > > > ------------------------------- > > > > > > > je viens de tester ce code avec une image et ca marche très bien. cependant, il faut bien choisir l'image de laquelle tu veux changer la couleur d'arrière-plan : il faut que ce soit une image gif, avec certaines parties de cette image qui soient transparentes. avec d'autres types d'images non-transparentes, ca peut pas marcher. > > > > > > > > a cette adresse, voila l'icone de mon site, qui est une image gif avec un fond transparent : [ Lien ]> > > > > > > > pour faire un test, remplace : > > > > | <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
> > > > > > > > par : > > > > | <img src="http://www.123toto.com/icone.gif" href="#" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()"> |
> > > > > > > > Houzéf@ - www.123toto.com> > > > > > > > > > > > ------------------------------- > > > > Réponse au message : > > > > ------------------------------- > > > > > > > > > merci de consacrer un peu de ton temps pour moi mais es-tu sur que ca marche? Chez moi ca ne marche pas et je ne comprend pas pourkoi. Pour afficher un text au click de la sourie jme suis demerdé avec une iframe mais pour la couleur qui change au survol ca marche pas pourtant j'ai bien mis la fonction juste avant le </head> et rajouter la ligne de code dans le <area shape>. Ya-t'il un autre moyen? merci beaucoup. > > > > > > > > > > ------------------------------- > > > > > Réponse au message : > > > > > ------------------------------- > > > > > > > > > > > voici la structure de ta page : > > > > > > <html>
> > > > > >
> > > > > > <head>
> > > > > > <title>Titre</title>
> > > > > >
> > > > > > <script language="JavaScript">
> > > > > > function survol(objet, type){
> > > > > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > > > > }
> > > > > > function message(){
> > > > > > document.getElementById("calque").innerHTML="<b>Code HTML</b>";
> > > > > > }
> > > > > > </script>
> > > > > >
> > > > > > </head>
> > > > > >
> > > > > > <body>
> > > > > >
> > > > > > <area shape="rect" coords="150,116,220,178" href="#conte" onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" onClick="message()">
> > > > > >
> > > > > > <span id="calque"></span>
> > > > > >
> > > > > > </body>
> > > > > >
> > > > > > </html> |
> > > > > > > > > > > > Houzéf@ - www.123toto.com> > > > > > > > > > > > > > > > > > ------------------------------- > > > > > > Réponse au message : > > > > > > ------------------------------- > > > > > > > > > > > > > merci mais j'ai toujours un problème, ta fonction surbol tu la met ou et entre quel balises? > > > > > > > merci beaucoup > > > > > > > > > > > > > > ------------------------------- > > > > > > > Réponse au message : > > > > > > > ------------------------------- > > > > > > > > > > > > > > > dans le <area> tu rajoutes : > > > > > > > > | onMouseOver="survol(this, 0)" onMouseOut="survol(this, 1)" |
> > > > > > > > et tu fais une fonction survol de ce style : > > > > > > > > function survol(objet, type){
> > > > > > > > objet.style.background = (type==0) ? "#FF0000" : "#FFFFFF" ;
> > > > > > > > } |
> > > > > > > > > > > > > > > > pour ton 2ème pb tu mets des <span> dans ta page (les cellules) et tu utilises des innerHTML : > > > > > > > > | <span id="calque"></span> |
> > > > > > > > et pour écrire qqchose dans calque : > > > > > > > > | document.getElementById("calque").innerHTML="<b>Code HTML</b>"; |
> > > > > > > > > > > > > > > > Houzéf@ - www.123toto.com> > > > > > > > > > > > > > > > > > > > > > > > ------------------------------- > > > > > > > > Réponse au message : > > > > > > > > ------------------------------- > > > > > > > > > > > > > > > > > Bonjour à tous ! > > > > > > > > > voila g un problème.J'ai une image sur laquelle j'ai créer des zones reactives. Je voudrais que lorsque je passe la sourie sur ces zones reactives, la couleur de ces zones change. Je voudrais aussi que lorsque je clique sur ces zones reactives un texte s'affiche dans une autre cellule. Un exemple d'une zone reactive : <area shape="rect" coords="150,116,220,178" href="#conte"> > > > > > > > > > Comment puis-je faire? > > > > > > > > > merci d'avance > > > > > > > > > > > > > > > > > > ______________________________________________________ > > > > > > > > > > > > > > > > > > Chaque problème a sa solution, si tu n'en as pas ne t'inquiète pas ca ne change rien au problème.> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > |
|
Cette discussion est classée dans : problème, zones, carte, interactive, reactives
 Répondre à ce message
 Sujets en rapport avec ce message
carte dynamique [ par missmaroc ]
Bonjour J ai une carte de paris divisée en Zone elle en a 37; insérée avec cette syntaxe : . avec les zones de types polyg
changement de couleur sur zones reactives [ par hos ]
Bonjour,Voila , j'ai un plan de ville(22ko) avec 4 zones reactives de couleurs différentes (4 quartiers) et je voudrais lors d'un passage de souris su
Problème de péplacement de calque dans une application de carte [ par akiko ]
Avant toute chose bonjour et merci d'avance d'avoir ou de prendre le temps de lire le contenu de mon problème... je travaille actuellement sur une ap
Déroulement de Checkbox cachées [ par wowitta ]
Bonjour,Mon problème est le suivant:J'ai créé 4 checkbox principales et pour chacune une dizaine de checkbox secondaires qui sont cachées. Cela marche
Devis a partir d'une carte cliquable [ par jpdollo ]
Bonjour Je suis debutant Je voudrais realiser un formulaire de devis a partir d'une carte cliquable: Je clique sur une ville, 4 autres s'inscrivent su
Problème de traduction [ par rs9000 ]
Bonjour à tous,Je l'administrateur d'un forum dont voici le lien : http://kawasaki-1700-voyage.forumactif.com/index.htm<p class="
zone reactive et pop up [ par veinerd ]
bon ben je ne sais plus coment fairehttp://www.cafe-sushi.fr/carte.htmc'est le projet que je dois realiser pour ecole en alternance donc j'ai le contr
Problème avec setInterval [ par VirusB ]
Bonjour, j'aimerais savoir pourquoi ce code ne fonctionne pas.setInterval(, 3000);</scr
Problème d'impression des couleurs de la page [ par JulianRenan ]
Bonjour à tous,Dans une page j'ai créé un tableau avec un background noir et divers inputs avec également différentes couleurs en background.Quand je
Menu déroulant [ par artax1977 ]
Bonjour à tous,Tout d'abord tous mes meilleurs voeux pour l'année nouvelle...J'utilise le script "javascriptfr_MENU-DEROULANT". C'était absolument cec
 Livres en rapport
|
Derniers Blogs
 SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|