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
 TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Arnault Nouvel et Antoine Dongois Le processus à prendre : Apprendre (découvrir la plateforme) Préparer (documenter l'historique et choisir la méthode de MAJ) Test (Test de MAJ) Implémenter (Effectuer la MAJ) Valid...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOURTECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice
Après un retour sur l'histoire des TechDays de Paris et le fait que ce soit le plus gros event MS au monde (du fait de sa gratuité), le président de MS France (Eric Boustoullier) a fait une présentation de la vision Microsoft pour les années à venir...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Logiciels
 DB-MAIN (9.1.0)DB-MAIN (9.1.0)DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal... Cliquez pour télécharger DB-MAIN Xilisoft DPG Convertisseur (5.1.37.0120)XILISOFT DPG CONVERTISSEUR (5.1.37.0120)Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé... Cliquez pour télécharger Xilisoft DPG Convertisseur GraphicsGale (2.01.01)GRAPHICSGALE (2.01.01)GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ... Cliquez pour télécharger GraphicsGale Architecte 3D (Platinum 2010)ARCHITECTE 3D (PLATINUM 2010)Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é... Cliquez pour télécharger Architecte 3D TeamViewer 5 (TeamViewer 5)TEAMVIEWER 5 (TEAMVIEWER 5)Dépanner un ami,expliquer une manipulation devient un jeu d'enfant.
Prise en main d'un autre ord... Cliquez pour télécharger TeamViewer 5
|