Commit e0d93964 authored by Anatoly Mihalchenko's avatar Anatoly Mihalchenko

Merge branch 'master' of github.com:Sankore/Sankore-3.1

parents 4ab21015 ac24a97e
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- <!--
GeoInfo permet d'obtenir différentes informations sur les pays du monde. * This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
Copyright (C) 2010 Baptiste Sottas — Tous droits réservés. * the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
Ce programme est un logiciel libre ; vous pouvez le redistribuer ou le *
modifier suivant les termes de la “GNU General Public License” telle que * This program is distributed in the hope that it will be useful,
publiée par la Free Software Foundation : soit la version 3 de cette * but WITHOUT ANY WARRANTY; without even the implied warranty of
licence, soit (à votre gré) toute version ultérieure. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
Ce programme est distribué dans l’espoir qu’il vous sera utile, mais SANS *
AUCUNE GARANTIE : sans même la garantie implicite de COMMERCIALISABILITÉ * You should have received a copy of the GNU General Public License
ni d’ADÉQUATION À UN OBJECTIF PARTICULIER. Consultez la Licence Générale * along with this program. If not, see <http://www.gnu.org/licenses/>.
Publique GNU pour plus de détails.
Vous devriez avoir reçu une copie de la Licence Générale Publique GNU avec
ce programme ; si ce n’est pas le cas, consultez :
http://www.gnu.org/licenses
baptiste.sottas@bluewin.ch
--> -->
<html> <html>
<head> <head>
...@@ -33,7 +26,7 @@ ...@@ -33,7 +26,7 @@
<script type="text/javascript" src="js/GeoInfo.js"></script> <script type="text/javascript" src="js/GeoInfo.js"></script>
</head> </head>
<body onLoad="recevoirPays('')"; onClick="coords = coords + (event.clientX-13) + ',' + (event.clientY-13) + ','"> <body onLoad="recevoirPays('')" onClick="coords = coords + (event.clientX-13) + ',' + (event.clientY-13) + ','">
<!-- Div contenant le point d'interrogation pour les satistiques--> <!-- Div contenant le point d'interrogation pour les satistiques-->
<div class="question"> <div class="question">
...@@ -46,28 +39,28 @@ ...@@ -46,28 +39,28 @@
<!-- Zones délimitant chaque continent--> <!-- Zones délimitant chaque continent-->
<map name="monde1"> <map name="monde1">
<area class="curseur" alt="Amerique du Nord" shape="poly" coords="10,57,45,32,103,31,120,20,142,25,172,10,210,8,283,9,270,24,262,37,197,74,198,83,134,119,168,149,171,169,159,166,139,160,124,167,114,173,65,146,46,106,49,89,57,68,47,56,22,65,9,64" <area class="curseur" alt="North America" shape="poly" coords="10,57,45,32,103,31,120,20,142,25,172,10,210,8,283,9,270,24,262,37,197,74,198,83,134,119,168,149,171,169,159,166,139,160,124,167,114,173,65,146,46,106,49,89,57,68,47,56,22,65,9,64"
onMouseOver="writeText('Amerique du Nord'); document.getElementById('monde').src='images/Cartes/Carte_Monde_AmeriqueNord.bmp'" onMouseOver="writeText('North America'); document.getElementById('monde').src='images/Cartes/Carte_Monde_AmeriqueNord.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'" onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteAmeriqueNord').innerHTML = imageAmeriqueNord; apparition('carteAmeriqueNord')" onClick="document.getElementById('carteAmeriqueNord').innerHTML = imageAmeriqueNord; apparition('carteAmeriqueNord')"
/> />
<area class="curseur" alt="Eurasie" shape="poly" coords="279,104,309,101,357,114,384,152,415,141,434,142,453,177,466,175,476,144,505,207,554,211,562,184,542,134,545,118,573,108,560,71,583,73,580,59,604,40,460,20,416,12,401,23,377,17,366,30,339,25,335,13,307,14,313,33,296,48,300,65,284,54,269,38,257,46,275,68,284,83,272,90,272,102,279,102,294,100" <area class="curseur" alt="Eurasia" shape="poly" coords="279,104,309,101,357,114,384,152,415,141,434,142,453,177,466,175,476,144,505,207,554,211,562,184,542,134,545,118,573,108,560,71,583,73,580,59,604,40,460,20,416,12,401,23,377,17,366,30,339,25,335,13,307,14,313,33,296,48,300,65,284,54,269,38,257,46,275,68,284,83,272,90,272,102,279,102,294,100"
onMouseOver="writeText('Eurasie'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Eurasie.bmp'" onMouseOver="writeText('Eurasia'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Eurasie.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'" onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteEurasie').innerHTML = imageEurasie; apparition('carteEurasie')" onClick="document.getElementById('carteEurasie').innerHTML = imageEurasie; apparition('carteEurasie')"
/> />
<area class="curseur" alt="Amerique du Sud" shape="poly" coords="139,160,159,167,220,201,206,241,171,291,188,305,174,318,148,299,141,234,113,198,124,177,124,168,139,158" <area class="curseur" alt="South America" shape="poly" coords="139,160,159,167,220,201,206,241,171,291,188,305,174,318,148,299,141,234,113,198,124,177,124,168,139,158"
onMouseOver="writeText('Amerique du Sud'); document.getElementById('monde').src='images/Cartes/Carte_Monde_AmeriqueSud.bmp'" onMouseOver="writeText('South America'); document.getElementById('monde').src='images/Cartes/Carte_Monde_AmeriqueSud.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'" onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteAmeriqueSud').innerHTML = imageAmeriqueSud; apparition('carteAmeriqueSud')" onClick="document.getElementById('carteAmeriqueSud').innerHTML = imageAmeriqueSud; apparition('carteAmeriqueSud')"
/> />
<area class="curseur" alt="Afrique" shape="poly" coords="279,107,356,119,395,165,390,237,334,267,301,179,257,174,265,135" <area class="curseur" alt="Africa" shape="poly" coords="279,107,356,119,395,165,390,237,334,267,301,179,257,174,265,135"
onMouseOver="writeText('Afrique'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Afrique.bmp'" onMouseOver="writeText('Africa'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Afrique.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'" onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteAfrique').innerHTML = imageAfrique; apparition('carteAfrique')" onClick="document.getElementById('carteAfrique').innerHTML = imageAfrique; apparition('carteAfrique')"
/> />
<area class="curseur" alt="Oceanie" shape="poly" coords="566,191,563,215,522,238,519,271,553,264,570,290,607,298,644,278,643,225,610,194,567,189,565,194,566,213,547,223" <area class="curseur" alt="Oceania" shape="poly" coords="566,191,563,215,522,238,519,271,553,264,570,290,607,298,644,278,643,225,610,194,567,189,565,194,566,213,547,223"
onMouseOver="writeText('Oceanie'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Oceanie.bmp'" onMouseOver="writeText('Oceania'); document.getElementById('monde').src='images/Cartes/Carte_Monde_Oceanie.bmp'"
onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'" onMouseOut="effaceTexte(); document.getElementById('monde').src='images/Cartes/Carte_Monde_1.png'"
onClick="document.getElementById('carteOceanie').innerHTML = imageOceanie; apparition('carteOceanie')"/> onClick="document.getElementById('carteOceanie').innerHTML = imageOceanie; apparition('carteOceanie')"/>
</map> </map>
...@@ -1010,7 +1003,7 @@ ...@@ -1010,7 +1003,7 @@
</div></br> </div></br>
<!-- Divs pour afficher les détails des pays comparés--> <!-- Divs pour afficher les détails des pays comparés-->
<span class="comparer">Comparer les pays: <input id="compare" type="checkbox" onClick="vide()" ></span> <span class="comparer">Compare countries:<input id="compare" type="checkbox" onClick="vide()" ></span>
<table width="654px" border="0"> <table width="654px" border="0">
<tr> <tr>
<td><div class="styleDiv" id="info1"></td> <td><div class="styleDiv" id="info1"></td>
...@@ -1023,1062 +1016,1062 @@ ...@@ -1023,1062 +1016,1062 @@
<!-- Informations sur les pays d'Afrique--> <!-- Informations sur les pays d'Afrique-->
<div id="MA" class="cacher"> <div id="MA" class="cacher">
<span class="nomPays">Maroc</span></br> <span class="nomPays">Morocco</span></br>
<span class="capitalePays">Capitale: Rabat</span></br> <span class="capitalePays">Capital city: Rabat</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Morocco.png" class="drapeaux"/> <object data="images/Drapeaux/Afrique/Flag_of_Morocco.png" class="drapeaux"/>
</div> </div>
<div id="DZ" class="cacher"> <div id="DZ" class="cacher">
<span class="nomPays">Algerie</span></br> <span class="nomPays">Algeria</span></br>
<span class="capitalePays">Capitale: Alger</span></br> <span class="capitalePays">Capital city: Alger</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Algeria.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Algeria.png" class="drapeaux"/>
</div> </div>
<div id="TN" class="cacher"> <div id="TN" class="cacher">
<span class="nomPays">Tunisie</span></br> <span class="nomPays">Tunisia/span></br>
<span class="capitalePays">Capitale: Tunis</span></br> <span class="capitalePays">Capital city: Tunis</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Tunisia.png" class="drapeaux"/> <object data="images/Drapeaux/Afrique/Flag_of_Tunisia.png" class="drapeaux"/>
</div> </div>
<div id="LY" class="cacher"> <div id="LY" class="cacher">
<span class="nomPays">Libye</span></br> <span class="nomPays">Libya</span></br>
<span class="capitalePays">Capitale: Tripoli</span></br> <span class="capitalePays">Capital city: Tripoli</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Libya.png" class="drapeaux"/> <object data="images/Drapeaux/Afrique/Flag_of_Libya.png" class="drapeaux"/>
</div> </div>
<div id="EG" class="cacher"> <div id="EG" class="cacher">
<span class="nomPays">Egypte</span></br> <span class="nomPays">Egypt</span></br>
<span class="capitalePays">Capitale: Le Caire</span></br> <span class="capitalePays">Capital city: Cairo</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Egypt.png" class="drapeaux"/> <object data="images/Drapeaux/Afrique/Flag_of_Egypt.png" class="drapeaux"/>
</div> </div>
<div id="Sahara occidental" class="cacher"> <div id="Sahara occidental" class="cacher">
<span class="nomPays">Sahara occidental</span></br> <span class="nomPays">Sahara occidental</span></br>
<span class="capitalePays">Capitale: </span></br> <span class="capitalePays">Capital city: </span></br>
<object data="images/Drapeaux/Afrique/Flag_of_.png" class="drapeaux"/> <object data="images/Drapeaux/Afrique/Flag_of_.png" class="drapeaux"/>
</div> </div>
<div id="MR" class="cacher"> <div id="MR" class="cacher">
<span class="nomPays">Mauritanie</span></br> <span class="nomPays">Mauritania</span></br>
<span class="capitalePays">Capitale: Nouakchott</span></br> <span class="capitalePays">Capital city: Nouakchott</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Mauritania.png" class="drapeaux"/> <object data="images/Drapeaux/Afrique/Flag_of_Mauritania.png" class="drapeaux"/>
</div> </div>
<div id="ML" class="cacher"> <div id="ML" class="cacher">
<span class="nomPays">Mali</span></br> <span class="nomPays">Mali</span></br>
<span class="capitalePays">Capitale: Bamako</span></br> <span class="capitalePays">Capital city: Bamako</span></br>
<object data="images/Drapeaux/Afrique/Flag_of_Mali.png" class="drapeaux"/> <object data="images/Drapeaux/Afrique/Flag_of_Mali.png" class="drapeaux"/>
</div> </div>
<div id="NE" class="cacher"> <div id="NE" class="cacher">
<span class="nomPays">Niger</span></br> <span class="nomPays">Niger</span></br>
<span class="capitalePays">Capitale: Niamey</span></br> <span class="capitalePays">Capital city: Niamey</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Niger.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Niger.png" class="drapeaux"/>
</div> </div>
<div id="TD" class="cacher"> <div id="TD" class="cacher">
<span class="nomPays">Tchad</span></br> <span class="nomPays">Tchad</span></br>
<span class="capitalePays">Capitale: Ndjamena</span></br> <span class="capitalePays">Capital city: Ndjamena</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Chad.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Chad.png" class="drapeaux"/>
</div> </div>
<div id="SD" class="cacher"> <div id="SD" class="cacher">
<span class="nomPays">Soudan</span></br> <span class="nomPays">Soudan</span></br>
<span class="capitalePays">Capitale: Khartoum</span></br> <span class="capitalePays">Capital city: Khartoum</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Sudan.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Sudan.png" class="drapeaux"/>
</div> </div>
<div id="ER" class="cacher"> <div id="ER" class="cacher">
<span class="nomPays">Erythree</span></br> <span class="nomPays">Eritrea</span></br>
<span class="capitalePays">Capitale: Asmara</span></br> <span class="capitalePays">Capital city: Asmara</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Eritrea.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Eritrea.png" class="drapeaux"/>
</div> </div>
<div id="DJ" class="cacher"><span class="nomPays">Djibouti</span></br> <div id="DJ" class="cacher"><span class="nomPays">Djibouti</span></br>
<span class="capitalePays">Capitale: Djibouti</span></br> <span class="capitalePays">Capital city: Djibouti</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Djibouti.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Djibouti.png" class="drapeaux"/>
</div> </div>
<div id="ET" class="cacher"> <div id="ET" class="cacher">
<span class="nomPays">Ethiopie</span></br> <span class="nomPays">Ethiopia</span></br>
<span class="capitalePays">Capitale: Addis Abeba</span></br> <span class="capitalePays">Capital city: Addis Ababa</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Ethiopia.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Ethiopia.png" class="drapeaux"/>
</div> </div>
<div id="SO" class="cacher"> <div id="SO" class="cacher">
<span class="nomPays">Somalie</span></br> <span class="nomPays">Somalia</span></br>
<span class="capitalePays">Capitale: Mogadiscio</span></br> <span class="capitalePays">Capital city: Mogadiscio</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Somalia.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Somalia.png" class="drapeaux"/>
</div> </div>
<div id="KE" class="cacher"> <div id="KE" class="cacher">
<span class="nomPays">Kenya</span></br> <span class="nomPays">Kenya</span></br>
<span class="capitalePays">Capitale: Nairobi</span></br> <span class="capitalePays">Capital city: Nairobi</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Kenya.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Kenya.png" class="drapeaux"/>
</div> </div>
<div id="UG" class="cacher"> <div id="UG" class="cacher">
<span class="nomPays">Ouganda</span></br> <span class="nomPays">Uganda</span></br>
<span class="capitalePays">Capitale: Kampala</span></br> <span class="capitalePays">Capital city: Kampala</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Uganda.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Uganda.png" class="drapeaux"/>
</div> </div>
<div id="CD" class="cacher"> <div id="CD" class="cacher">
<span class="nomPays">Republique democratique du Congo</span></br> <span class="nomPays">Democratic Republic of Congo</span></br>
<span class="capitalePays">Capitale: Kinshasa</span></br> <span class="capitalePays">Capital city: Kinshasa</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_the_Democratic_Republic_of_the_Congo.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_the_Democratic_Republic_of_the_Congo.png" class="drapeaux"/>
</div> </div>
<div id="CF" class="cacher"> <div id="CF" class="cacher">
<span class="nomPays">Republique centrafricaine</span></br> <span class="nomPays">Central African Republic</span></br>
<span class="capitalePays">Capitale: Bangui</span></br> <span class="capitalePays">Capital city: Bangui</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_the_Central_African_Republic.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_the_Central_African_Republic.png" class="drapeaux"/>
</div> </div>
<div id="CM" class="cacher"> <div id="CM" class="cacher">
<span class="nomPays">Cameroun</span></br> <span class="nomPays">Cameroun</span></br>
<span class="capitalePays">Capitale: Yaounde</span></br> <span class="capitalePays">Capital city: Yaounde</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Cameroon.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Cameroon.png" class="drapeaux"/>
</div> </div>
<div id="NG" class="cacher"> <div id="NG" class="cacher">
<span class="nomPays">Nigeria</span></br> <span class="nomPays">Nigeria</span></br>
<span class="capitalePays">Capitale: Abuja</span></br> <span class="capitalePays">Capital city: Abuja</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Nigeria.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Nigeria.png" class="drapeaux"/>
</div> </div>
<div id="BJ" class="cacher"> <div id="BJ" class="cacher">
<span class="nomPays">Benin</span></br> <span class="nomPays">Benin</span></br>
<span class="capitalePays">Capitale: Porto Novo</span></br> <span class="capitalePays">Capital city: Porto Novo</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Benin.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Benin.png" class="drapeaux"/>
</div> </div>
<div id="TG" class="cacher"> <div id="TG" class="cacher">
<span class="nomPays">Togo</span></br> <span class="nomPays">Togo</span></br>
<span class="capitalePays">Capitale: Lome</span></br> <span class="capitalePays">Capital city: Lome</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Togo.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Togo.png" class="drapeaux"/>
</div> </div>
<div id="GH" class="cacher"> <div id="GH" class="cacher">
<span class="nomPays">Ghana</span></br> <span class="nomPays">Ghana</span></br>
<span class="capitalePays">Capitale: Accra</span></br> <span class="capitalePays">Capital city: Accra</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Ghana.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Ghana.png" class="drapeaux"/>
</div> </div>
<div id="CI" class="cacher"> <div id="CI" class="cacher">
<span class="nomPays">Cote d'Ivoire</span></br> <span class="nomPays">Cote d'Ivoire</span></br>
<span class="capitalePays">Capitale: Yamoussoukro</span></br> <span class="capitalePays">Capital city: Yamoussoukro</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Cote_d'Ivoire.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Cote_d'Ivoire.png" class="drapeaux"/>
</div> </div>
<div id="BF" class="cacher"> <div id="BF" class="cacher">
<span class="nomPays">Burkina Faso</span></br> <span class="nomPays">Burkina Faso</span></br>
<span class="capitalePays">Capitale: Ouagadougou</span></br> <span class="capitalePays">Capital city: Ouagadougou</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Burkina_Faso.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Burkina_Faso.png" class="drapeaux"/>
</div> </div>
<div id="LR" class="cacher"> <div id="LR" class="cacher">
<span class="nomPays">Liberia</span></br> <span class="nomPays">Liberia</span></br>
<span class="capitalePays">Capitale: Monravia</span></br> <span class="capitalePays">Capital city: Monravia</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Liberia.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Liberia.png" class="drapeaux"/>
</div> </div>
<div id="SL" class="cacher"> <div id="SL" class="cacher">
<span class="nomPays">Sierra Leone</span></br> <span class="nomPays">Sierra Leone</span></br>
<span class="capitalePays">Capitale: Freetown</span></br> <span class="capitalePays">Capital city: Freetown</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Sierra_Leone.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Sierra_Leone.png" class="drapeaux"/>
</div> </div>
<div id="GN" class="cacher"> <div id="GN" class="cacher">
<span class="nomPays">Guinee</span></br> <span class="nomPays">Guinea</span></br>
<span class="capitalePays">Capitale: Conakry</span></br> <span class="capitalePays">Capital city: Conakry</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Guinea.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Guinea.png" class="drapeaux"/>
</div> </div>
<div id="GW" class="cacher"> <div id="GW" class="cacher">
<span class="nomPays">Guinee-Bissau</span></br> <span class="nomPays">Guinea-Bissau</span></br>
<span class="capitalePays">Capitale: Bissau</span></br> <span class="capitalePays">Capital city: Bissau</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Guinea-Bissau.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Guinea-Bissau.png" class="drapeaux"/>
</div> </div>
<div id="SN" class="cacher"> <div id="SN" class="cacher">
<span class="nomPays">Senegal</span></br> <span class="nomPays">Senegal</span></br>
<span class="capitalePays">Capitale: Dakar</span></br> <span class="capitalePays">Capital city: Dakar</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Senegal.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Senegal.png" class="drapeaux"/>
</div> </div>
<div id="GM" class="cacher"> <div id="GM" class="cacher">
<span class="nomPays">Gambie</span></br> <span class="nomPays">Gambia</span></br>
<span class="capitalePays">Capitale: Banjul</span></br> <span class="capitalePays">Capital city: Banjul</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_The_Gambia.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_The_Gambia.png" class="drapeaux"/>
</div> </div>
<div id="RW" class="cacher"> <div id="RW" class="cacher">
<span class="nomPays">Rwanda</span></br> <span class="nomPays">Rwanda</span></br>
<span class="capitalePays">Capitale: Kigali</span></br> <span class="capitalePays">Capital city: Kigali</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Rwanda.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Rwanda.png" class="drapeaux"/>
</div> </div>
<div id="BI" class="cacher"> <div id="BI" class="cacher">
<span class="nomPays">Burundi</span></br> <span class="nomPays">Burundi</span></br>
<span class="capitalePays">Capitale: Bujumbura</span></br> <span class="capitalePays">Capital city: Bujumbura</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Burundi.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Burundi.png" class="drapeaux"/>
</div> </div>
<div id="CG" class="cacher"> <div id="CG" class="cacher">
<span class="nomPays">Republique du Congo</span></br> <span class="nomPays">Republic of Congo</span></br>
<span class="capitalePays">Capitale: Brazzaville</span></br> <span class="capitalePays">Capital city: Brazzaville</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_the_Republic_of_the_Congo.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_the_Republic_of_the_Congo.png" class="drapeaux"/>
</div> </div>
<div id="GA" class="cacher"> <div id="GA" class="cacher">
<span class="nomPays">Gabon</span></br> <span class="nomPays">Gabon</span></br>
<span class="capitalePays">Capitale: Libreville</span></br> <span class="capitalePays">Capital city: Libreville</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Gabon.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Gabon.png" class="drapeaux"/>
</div> </div>
<div id="GQ" class="cacher"> <div id="GQ" class="cacher">
<span class="nomPays">Guinee Equatoriale</span></br> <span class="nomPays">Equatorial Guinea</span></br>
<span class="capitalePays">Capitale: Malabo</span></br> <span class="capitalePays">Capital city: Malabo</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Equatorial_Guinea.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Equatorial_Guinea.png" class="drapeaux"/>
</div> </div>
<div id="TZ" class="cacher"> <div id="TZ" class="cacher">
<span class="nomPays">Tanzanie</span></br> <span class="nomPays">Tanzania</span></br>
<span class="capitalePays">Capitale: Dodoma</span></br> <span class="capitalePays">Capital city: Dodoma</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Tanzania.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Tanzania.png" class="drapeaux"/>
</div> </div>
<div id="MW" class="cacher"> <div id="MW" class="cacher">
<span class="nomPays">Malawi</span></br> <span class="nomPays">Malawi</span></br>
<span class="capitalePays">Capitale: Lilongwe</span></br> <span class="capitalePays">Capital city: Lilongwe</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Malawi.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Malawi.png" class="drapeaux"/>
</div> </div>
<div id="ZM" class="cacher"> <div id="ZM" class="cacher">
<span class="nomPays">Zambie</span></br> <span class="nomPays">Zambia</span></br>
<span class="capitalePays">Capitale: Lusaka</span></br> <span class="capitalePays">Capital city: Lusaka</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Zambia.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Zambia.png" class="drapeaux"/>
</div> </div>
<div id="AO" class="cacher"> <div id="AO" class="cacher">
<span class="nomPays">Angola</span></br> <span class="nomPays">Angola</span></br>
<span class="capitalePays">Capitale: Luanda</span></br> <span class="capitalePays">Capital city: Luanda</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Angola.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Angola.png" class="drapeaux"/>
</div> </div>
<div id="MZ" class="cacher"> <div id="MZ" class="cacher">
<span class="nomPays">Mozambique</span></br> <span class="nomPays">Mozambique</span></br>
<span class="capitalePays">Capitale: Maputo</span></br> <span class="capitalePays">Capital city: Maputo</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Mozambique.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Mozambique.png" class="drapeaux"/>
</div> </div>
<div id="ZW" class="cacher"> <div id="ZW" class="cacher">
<span class="nomPays">Zimbabwe</span></br> <span class="nomPays">Zimbabwe</span></br>
<span class="capitalePays">Capitale: Harare</span></br> <span class="capitalePays">Capital city: Harare</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Zimbabwe.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Zimbabwe.png" class="drapeaux"/>
</div> </div>
<div id="BW" class="cacher"> <div id="BW" class="cacher">
<span class="nomPays">Botswana</span></br> <span class="nomPays">Botswana</span></br>
<span class="capitalePays">Capitale: Gaborone</span></br> <span class="capitalePays">Capital city: Gaborone</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Botswana.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Botswana.png" class="drapeaux"/>
</div> </div>
<div id="NA" class="cacher"> <div id="NA" class="cacher">
<span class="nomPays">Namibie</span></br> <span class="nomPays">Namibia</span></br>
<span class="capitalePays">Capitale: Windhoec</span></br> <span class="capitalePays">Capital city: Windhoec</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Namibia.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Namibia.png" class="drapeaux"/>
</div> </div>
<div id="ZA" class="cacher"> <div id="ZA" class="cacher">
<span class="nomPays">Afrique du Sud</span></br> <span class="nomPays">South Africa</span></br>
<span class="capitalePays">Capitale: Pretoria</span></br> <span class="capitalePays">Capital city: Pretoria</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_South_Africa.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_South_Africa.png" class="drapeaux"/>
</div> </div>
<div id="LS" class="cacher"> <div id="LS" class="cacher">
<span class="nomPays">Lesotho</span></br> <span class="nomPays">Lesotho</span></br>
<span class="capitalePays">Capitale: Maseru</span></br> <span class="capitalePays">Capital city: Maseru</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Lesotho.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Lesotho.png" class="drapeaux"/>
</div> </div>
<div id="SZ" class="cacher"> <div id="SZ" class="cacher">
<span class="nomPays">Swaziland</span></br> <span class="nomPays">Swaziland</span></br>
<span class="capitalePays">Capitale: Mbabane</span></br> <span class="capitalePays">Capital city: Mbabane</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Swaziland.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Swaziland.png" class="drapeaux"/>
</div> </div>
<div id="MG" class="cacher"> <div id="MG" class="cacher">
<span class="nomPays">Madagascar</span></br> <span class="nomPays">Madagascar</span></br>
<span class="capitalePays">Capitale: Antananarivo</span></br> <span class="capitalePays">Capital city: Antananarivo</span></br>
<img src="images/Drapeaux/Afrique/Flag_of_Madagascar.png" class="drapeaux"/> <img src="images/Drapeaux/Afrique/Flag_of_Madagascar.png" class="drapeaux"/>
</div> </div>
<!-- Informations sur les pays d'Amerique du Sud--> <!-- Informations sur les pays d'Amerique du Sud-->
<div id="AR" class="cacher"> <div id="AR" class="cacher">
<span class="nomPays">Argentine</span></br> <span class="nomPays">Argentine</span></br>
<span class="capitalePays">Capitale: Buenos Aires</span></br> <span class="capitalePays">Capital city: Buenos Aires</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Argentina.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Argentina.png" class="drapeaux"/>
</div> </div>
<div id="CL" class="cacher"> <div id="CL" class="cacher">
<span class="nomPays">Chili</span></br> <span class="nomPays">Chili</span></br>
<span class="capitalePays">Capitale: Santiago</span></br> <span class="capitalePays">Capital city: Santiago</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Chile.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Chile.png" class="drapeaux"/>
</div> </div>
<div id="UY" class="cacher"> <div id="UY" class="cacher">
<span class="nomPays">Uruguay</span></br> <span class="nomPays">Uruguay</span></br>
<span class="capitalePays">Capitale: Montevideo</span></br> <span class="capitalePays">Capital city: Montevideo</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Uruguay.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Uruguay.png" class="drapeaux"/>
</div> </div>
<div id="PY" class="cacher"> <div id="PY" class="cacher">
<span class="nomPays">Paraguay</span></br> <span class="nomPays">Paraguay</span></br>
<span class="capitalePays">Capitale: Asuncion</span></br> <span class="capitalePays">Capital city: Asuncion</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Paraguay.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Paraguay.png" class="drapeaux"/>
</div> </div>
<div id="BO" class="cacher"> <div id="BO" class="cacher">
<span class="nomPays">Bolivie</span></br> <span class="nomPays">Bolivia</span></br>
<span class="capitalePays">Capitale: La Paz</span></br> <span class="capitalePays">Capital city: La Paz</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Bolivia.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Bolivia.png" class="drapeaux"/>
</div> </div>
<div id="BR" class="cacher"> <div id="BR" class="cacher">
<span class="nomPays">Bresil</span></br> <span class="nomPays">Brazil</span></br>
<span class="capitalePays">Capitale: Brasilia</span></br> <span class="capitalePays">Capital city: Brasilia</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Brazil.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Brazil.png" class="drapeaux"/>
</div> </div>
<div id="PE" class="cacher"> <div id="PE" class="cacher">
<span class="nomPays">Perou</span></br> <span class="nomPays">Peru</span></br>
<span class="capitalePays">Capitale: Lima</span></br> <span class="capitalePays">Capital city: Lima</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Peru.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Peru.png" class="drapeaux"/>
</div> </div>
<div id="EC" class="cacher"> <div id="EC" class="cacher">
<span class="nomPays">Equateur</span></br> <span class="nomPays">Ecuador</span></br>
<span class="capitalePays">Capitale: Quito</span></br> <span class="capitalePays">Capital city: Quito</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Ecuador.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Ecuador.png" class="drapeaux"/>
</div> </div>
<div id="CO" class="cacher"> <div id="CO" class="cacher">
<span class="nomPays">Colombie</span></br> <span class="nomPays">Colombia</span></br>
<span class="capitalePays">Capitale: Bogota</span></br> <span class="capitalePays">Capital city: Bogota</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Colombia.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Colombia.png" class="drapeaux"/>
</div> </div>
<div id="VE" class="cacher"> <div id="VE" class="cacher">
<span class="nomPays">Venezuela</span></br> <span class="nomPays">Venezuela</span></br>
<span class="capitalePays">Capitale: Caracas</span></br> <span class="capitalePays">Capital city: Caracas</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Venezuela.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Venezuela.png" class="drapeaux"/>
</div> </div>
<div id="GY" class="cacher"> <div id="GY" class="cacher">
<span class="nomPays">Guyana</span></br> <span class="nomPays">Guyana</span></br>
<span class="capitalePays">Capitale: Georgetown</span></br> <span class="capitalePays">Capital city: Georgetown</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Guyana.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Guyana.png" class="drapeaux"/>
</div> </div>
<div id="SR" class="cacher"> <div id="SR" class="cacher">
<span class="nomPays">Suriname</span></br> <span class="nomPays">Suriname</span></br>
<span class="capitalePays">Capitale: Paramaribo</span></br> <span class="capitalePays">Capital city: Paramaribo</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_Suriname.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_Suriname.png" class="drapeaux"/>
</div> </div>
<div id="GF" class="cacher"> <div id="GF" class="cacher">
<span class="nomPays">Guyane</span></br> <span class="nomPays">Guyana</span></br>
<span class="capitalePays">Capitale: Paris</span></br> <span class="capitalePays">Capital city: Paris</span></br>
<img src="images/Drapeaux/AmeriqueSud/Flag_of_France.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueSud/Flag_of_France.png" class="drapeaux"/>
</div> </div>
<!-- Informations sur les pays d'Amérique du Nord--> <!-- Informations sur les pays d'Amérique du Nord-->
<div id="CA" class="cacher"> <div id="CA" class="cacher">
<span class="nomPays">Canada</span></br> <span class="nomPays">Canada</span></br>
<span class="capitalePays">Capitale: Ottawa</span></br> <span class="capitalePays">Capital city: Ottawa</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Canada.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Canada.png" class="drapeaux"/>
</div> </div>
<div id="GL" class="cacher"> <div id="GL" class="cacher">
<span class="nomPays">Groenland</span></br> <span class="nomPays">Greenland</span></br>
<span class="capitalePays">Capitale: Nuuk</span></br> <span class="capitalePays">Capital city: Nuuk</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Greenland.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Greenland.png" class="drapeaux"/>
</div> </div>
<div id="US" class="cacher"> <div id="US" class="cacher">
<span class="nomPays">Etats-Unis d'Amerique</span></br> <span class="nomPays">United States of America</span></br>
<span class="capitalePays">Capitale: Washington DC</span></br> <span class="capitalePays">Capital city: Washington DC</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_the_United_States.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_the_United_States.png" class="drapeaux"/>
</div> </div>
<div id="MX" class="cacher"> <div id="MX" class="cacher">
<span class="nomPays">Mexique</span></br> <span class="nomPays">Mexico</span></br>
<span class="capitalePays">Capitale: Mexico</span></br> <span class="capitalePays">Capital city: Mexico</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Mexico.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Mexico.png" class="drapeaux"/>
</div> </div>
<div id="CU" class="cacher"> <div id="CU" class="cacher">
<span class="nomPays">Cuba</span></br> <span class="nomPays">Cuba</span></br>
<span class="capitalePays">Capitale: La Havane</span></br> <span class="capitalePays">Capital city: Havana</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Cuba.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Cuba.png" class="drapeaux"/>
</div> </div>
<div id="HT" class="cacher"> <div id="HT" class="cacher">
<span class="nomPays">Haiti</span></br> <span class="nomPays">Haiti</span></br>
<span class="capitalePays">Capitale: Port-au-Prince</span></br> <span class="capitalePays">Capital city: Port-au-Prince</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Haiti.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Haiti.png" class="drapeaux"/>
</div> </div>
<div id="DO" class="cacher"> <div id="DO" class="cacher">
<span class="nomPays">Republique dominicaine</span></br> <span class="nomPays">Dominican Republic</span></br>
<span class="capitalePays">Capitale: Saint-Domingue</span></br> <span class="capitalePays">Capital city: Santo Domingo</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_the_Dominican_Republic.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_the_Dominican_Republic.png" class="drapeaux"/>
</div> </div>
<div id="JM" class="cacher"> <div id="JM" class="cacher">
<span class="nomPays">Jamaique</span></br> <span class="nomPays">Jamaica</span></br>
<span class="capitalePays">Capitale: Kingston</span></br> <span class="capitalePays">Capital city: Kingston</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Jamaica.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Jamaica.png" class="drapeaux"/>
</div> </div>
<div id="BS" class="cacher"> <div id="BS" class="cacher">
<span class="nomPays">Bahamas</span></br> <span class="nomPays">Bahamas</span></br>
<span class="capitalePays">Capitale: Nassau</span></br> <span class="capitalePays">Capital city: Nassau</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_the_Bahamas.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_the_Bahamas.png" class="drapeaux"/>
</div> </div>
<div id="GT" class="cacher"> <div id="GT" class="cacher">
<span class="nomPays">Guatemala</span></br> <span class="nomPays">Guatemala</span></br>
<span class="capitalePays">Capitale: Guatemala</span></br> <span class="capitalePays">Capital city: Guatemala</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Guatemala.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Guatemala.png" class="drapeaux"/>
</div> </div>
<div id="BZ" class="cacher"> <div id="BZ" class="cacher">
<span class="nomPays">Belize</span></br> <span class="nomPays">Belize</span></br>
<span class="capitalePays">Capitale: Belmopan</span></br> <span class="capitalePays">Capital city: Belmopan</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Belize.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Belize.png" class="drapeaux"/>
</div> </div>
<div id="SV" class="cacher"> <div id="SV" class="cacher">
<span class="nomPays">El Salvador</span></br> <span class="nomPays">Salvador</span></br>
<span class="capitalePays">Capitale: San Salvador</span></br> <span class="capitalePays">Capital city: San Salvador</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_El_Salvador.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_El_Salvador.png" class="drapeaux"/>
</div> </div>
<div id="HN" class="cacher"> <div id="HN" class="cacher">
<span class="nomPays">Honduras</span></br> <span class="nomPays">Honduras</span></br>
<span class="capitalePays">Capitale: Tegucigalpa</span></br> <span class="capitalePays">Capital city: Tegucigalpa</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Honduras.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Honduras.png" class="drapeaux"/>
</div> </div>
<div id="NI" class="cacher"> <div id="NI" class="cacher">
<span class="nomPays">Nicaragua</span></br> <span class="nomPays">Nicaragua</span></br>
<span class="capitalePays">Capitale: Managua</span></br> <span class="capitalePays">Capital city: Managua</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Nicaragua.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Nicaragua.png" class="drapeaux"/>
</div> </div>
<div id="CR" class="cacher"> <div id="CR" class="cacher">
<span class="nomPays">Costa-Rica</span></br> <span class="nomPays">Costa-Rica</span></br>
<span class="capitalePays">Capitale: San Jose</span></br> <span class="capitalePays">Capital city: San Jose</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Costa_Rica.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Costa_Rica.png" class="drapeaux"/>
</div> </div>
<div id="PA" class="cacher"> <div id="PA" class="cacher">
<span class="nomPays">Panama</span></br> <span class="nomPays">Panama</span></br>
<span class="capitalePays">Capitale: Panama</span></br> <span class="capitalePays">Capital city: Panama</span></br>
<img src="images/Drapeaux/AmeriqueNord/Flag_of_Panama.png" class="drapeaux"/> <img src="images/Drapeaux/AmeriqueNord/Flag_of_Panama.png" class="drapeaux"/>
</div> </div>
<!-- Informations sur les pays d'Oceanie--> <!-- Informations sur les pays d'Oceanie-->
<div id="AU" class="cacher"> <div id="AU" class="cacher">
<span class="nomPays">Australie</span></br> <span class="nomPays">Australia</span></br>
<span class="capitalePays">Capitale: Canberra</span></br> <span class="capitalePays">Capital city: Canberra</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_Australia.png" class="drapeaux"/> <img src="images/Drapeaux/Oceanie/Flag_of_Australia.png" class="drapeaux"/>
</div> </div>
<div id="NZ" class="cacher"> <div id="NZ" class="cacher">
<span class="nomPays">Nouvelle-Zelande</span></br> <span class="nomPays">New Zealand</span></br>
<span class="capitalePays">Capitale: Wellington</span></br> <span class="capitalePays">Capital city: Wellington</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_New_Zealand.png" class="drapeaux"/> <img src="images/Drapeaux/Oceanie/Flag_of_New_Zealand.png" class="drapeaux"/>
</div> </div>
<div id="PG" class="cacher"> <div id="PG" class="cacher">
<span class="nomPays">Papouasie-Nouvelle-Guinee</span></br> <span class="nomPays">Papua New Guinea</span></br>
<span class="capitalePays">Capitale: Port Moresby</span></br> <span class="capitalePays">Capital city: Port Moresby</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_Papua_New_Guinea.png" class="drapeaux"/> <img src="images/Drapeaux/Oceanie/Flag_of_Papua_New_Guinea.png" class="drapeaux"/>
</div> </div>
<div id="ID" class="cacher"> <div id="ID" class="cacher">
<span class="nomPays">Indonesie</span></br> <span class="nomPays">Indonesia</span></br>
<span class="capitalePays">Capitale: Jakarta</span></br> <span class="capitalePays">Capital city: Jakarta</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_Indonesia.png" class="drapeaux"/> <img src="images/Drapeaux/Oceanie/Flag_of_Indonesia.png" class="drapeaux"/>
</div> </div>
<div id="SB" class="cacher"> <div id="SB" class="cacher">
<span class="nomPays">Iles Salomon</span></br> <span class="nomPays">Solomon Islands</span></br>
<span class="capitalePays">Capitale: Honiara</span></br> <span class="capitalePays">Capital city: Honiara</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_the_Solomon_Islands.png" class="drapeaux"/> <img src="images/Drapeaux/Oceanie/Flag_of_the_Solomon_Islands.png" class="drapeaux"/>
</div> </div>
<div id="VU" class="cacher"> <div id="VU" class="cacher">
<span class="nomPays">Vanuatu</span></br> <span class="nomPays">Vanuatu</span></br>
<span class="capitalePays">Capitale: Port-Vila</span></br> <span class="capitalePays">Capital city: Port-Vila</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_Vanuatu.png" class="drapeaux"/> <img src="images/Drapeaux/Oceanie/Flag_of_Vanuatu.png" class="drapeaux"/>
</div> </div>
<div id="NC" class="cacher"> <div id="NC" class="cacher">
<span class="nomPays">Nouvelle-Caledonie</span></br> <span class="nomPays">New Caledonia</span></br>
<span class="capitalePays">Capitale: Paris</span></br> <span class="capitalePays">Capital city: Paris</span></br>
<img src="images/Drapeaux/Oceanie/Flag_of_France.png" class="drapeaux"/> <img src="images/Drapeaux/Oceanie/Flag_of_France.png" class="drapeaux"/>
</div> </div>
<!-- Informations sur les pays d'Europe--> <!-- Informations sur les pays d'Europe-->
<div id="AL" class="cacher"> <div id="AL" class="cacher">
<span class="nomPays">Albanie</span></br> <span class="nomPays">Albania</span></br>
<span class="capitalePays">Capitale: Tirana</span></br> <span class="capitalePays">Capital city: Tirana</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Albania.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Albania.png" class="drapeaux"/>
</div> </div>
<div id="DE" class="cacher"> <div id="DE" class="cacher">
<span class="nomPays">Allemagne</span></br> <span class="nomPays">Germany</span></br>
<span class="capitalePays">Capitale: Berlin</span></br> <span class="capitalePays">Capital city: Berlin</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Germany.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Germany.png" class="drapeaux"/>
</div> </div>
<div id="AD" class="cacher"> <div id="AD" class="cacher">
<span class="nomPays">Andorre</span></br> <span class="nomPays">Andorra</span></br>
<span class="capitalePays">Capitale: Andorre-la-Vieille</span></br> <span class="capitalePays">Capital city: Andorra la Vella</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Andorra.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Andorra.png" class="drapeaux"/>
</div> </div>
<div id="AM" class="cacher"> <div id="AM" class="cacher">
<span class="nomPays">Armenie</span></br> <span class="nomPays">Armenia</span></br>
<span class="capitalePays">Capitale: Erevan</span></br> <span class="capitalePays">Capital city: Erevan</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Armenia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Armenia.png" class="drapeaux"/>
</div> </div>
<div id="AT" class="cacher"> <div id="AT" class="cacher">
<span class="nomPays">Autriche</span></br> <span class="nomPays">Austria</span></br>
<span class="capitalePays">Capitale: Vienne</span></br> <span class="capitalePays">Capital city: Vienne</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Austria.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Austria.png" class="drapeaux"/>
</div> </div>
<div id="AZ" class="cacher"> <div id="AZ" class="cacher">
<span class="nomPays">Azerbaidjan</span></br> <span class="nomPays">Azerbaijan</span></br>
<span class="capitalePays">Capitale: Bakou</span></br> <span class="capitalePays">Capital city: Baku</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Azerbaijan.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Azerbaijan.png" class="drapeaux"/>
</div> </div>
<div id="BE" class="cacher"> <div id="BE" class="cacher">
<span class="nomPays">Belgique</span></br> <span class="nomPays">Belgium</span></br>
<span class="capitalePays">Capitale: Bruxelles</span></br> <span class="capitalePays">Capital city: Bruxelles</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Belgium.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Belgium.png" class="drapeaux"/>
</div> </div>
<div id="BY" class="cacher"> <div id="BY" class="cacher">
<span class="nomPays">Belarus</span></br> <span class="nomPays">Belarus</span></br>
<span class="capitalePays">Capitale: Minsk</span></br> <span class="capitalePays">Capital city: Minsk</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Belarus.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Belarus.png" class="drapeaux"/>
</div> </div>
<div id="BA" class="cacher"> <div id="BA" class="cacher">
<span class="nomPays">Bosnie</span></br> <span class="nomPays">Bosnia</span></br>
<span class="capitalePays">Capitale: Sarajevo</span></br> <span class="capitalePays">Capital city: Sarajevo</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Bosnia_and_Herzegovina.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Bosnia_and_Herzegovina.png" class="drapeaux"/>
</div> </div>
<div id="BG" class="cacher"> <div id="BG" class="cacher">
<span class="nomPays">Bulgarie</span></br> <span class="nomPays">Bulgaria</span></br>
<span class="capitalePays">Capitale: Sofia</span></br> <span class="capitalePays">Capital city: Sofia</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Bulgaria.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Bulgaria.png" class="drapeaux"/>
</div> </div>
<div id="CY" class="cacher"> <div id="CY" class="cacher">
<span class="nomPays">Chypre</span></br> <span class="nomPays">Cyprus</span></br>
<span class="capitalePays">Capitale: Nicosie</span></br> <span class="capitalePays">Capital city: Nicosia</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Cyprus.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Cyprus.png" class="drapeaux"/>
</div> </div>
<div id="HR" class="cacher"> <div id="HR" class="cacher">
<span class="nomPays">Croatie</span></br> <span class="nomPays">Croatia</span></br>
<span class="capitalePays">Capitale: Zagreb</span></br> <span class="capitalePays">Capital city: Zagreb</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Croatia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Croatia.png" class="drapeaux"/>
</div> </div>
<div id="DK" class="cacher"> <div id="DK" class="cacher">
<span class="nomPays">Danemark</span></br> <span class="nomPays">Denmark</span></br>
<span class="capitalePays">Capitale: Copenhague</span></br> <span class="capitalePays">Capital city: Copenhagen</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Denmark.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Denmark.png" class="drapeaux"/>
</div> </div>
<div id="ES" class="cacher"> <div id="ES" class="cacher">
<span class="nomPays">Espagne</span></br> <span class="nomPays">Spain</span></br>
<span class="capitalePays">Capitale: Madrid</span></br> <span class="capitalePays">Capital city: Madrid</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Spain.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Spain.png" class="drapeaux"/>
</div> </div>
<div id="EE" class="cacher"> <div id="EE" class="cacher">
<span class="nomPays">Estonie</span></br> <span class="nomPays">Estonia</span></br>
<span class="capitalePays">Capitale: Tallinn</span></br> <span class="capitalePays">Capital city: Tallinn</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Estonia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Estonia.png" class="drapeaux"/>
</div> </div>
<div id="FI" class="cacher"> <div id="FI" class="cacher">
<span class="nomPays">Finlande</span></br> <span class="nomPays">Finland</span></br>
<span class="capitalePays">Capitale: Helsinki</span></br> <span class="capitalePays">Capital city: Helsinki</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Finland.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Finland.png" class="drapeaux"/>
</div> </div>
<div id="FR" class="cacher"> <div id="FR" class="cacher">
<span class="nomPays">France</span></br> <span class="nomPays">France</span></br>
<span class="capitalePays">Capitale: Paris</span></br> <span class="capitalePays">Capital city: Paris</span></br>
<img src="images/Drapeaux/Europe/Flag_of_France.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_France.png" class="drapeaux"/>
</div> </div>
<div id="GE" class="cacher"> <div id="GE" class="cacher">
<span class="nomPays">Georgie</span></br> <span class="nomPays">Georgia</span></br>
<span class="capitalePays">Capitale: Tbilissi</span></br> <span class="capitalePays">Capital city: Tbilisi</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Georgia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Georgia.png" class="drapeaux"/>
</div> </div>
<div id="EL" class="cacher"> <div id="EL" class="cacher">
<span class="nomPays">Grece</span></br> <span class="nomPays">Greece</span></br>
<span class="capitalePays">Capitale: Athenes</span></br> <span class="capitalePays">Capital city: Athenes</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Greece.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Greece.png" class="drapeaux"/>
</div> </div>
<div id="HU" class="cacher"> <div id="HU" class="cacher">
<span class="nomPays">Hongrie</span></br> <span class="nomPays">Hungary</span></br>
<span class="capitalePays">Capitale: Budapest</span></br> <span class="capitalePays">Capital city: Budapest</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Hungary.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Hungary.png" class="drapeaux"/>
</div> </div>
<div id="IE" class="cacher"> <div id="IE" class="cacher">
<span class="nomPays">Irlande</span></br> <span class="nomPays">Ireland</span></br>
<span class="capitalePays">Capitale: Dublin</span></br> <span class="capitalePays">Capital city: Dublin</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Ireland.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Ireland.png" class="drapeaux"/>
</div> </div>
<div id="IS" class="cacher"> <div id="IS" class="cacher">
<span class="nomPays">Islande</span></br> <span class="nomPays">Island</span></br>
<span class="capitalePays">Capitale: Reykjavik</span></br> <span class="capitalePays">Capital city: Reykjavik</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Iceland.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Iceland.png" class="drapeaux"/>
</div> </div>
<div id="IT" class="cacher"> <div id="IT" class="cacher">
<span class="nomPays">Italie</span></br> <span class="nomPays">Italy</span></br>
<span class="capitalePays">Capitale: Rome</span></br> <span class="capitalePays">Capital city: Rome</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Italy.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Italy.png" class="drapeaux"/>
</div> </div>
<div id="LV" class="cacher"> <div id="LV" class="cacher">
<span class="nomPays">Lettonie</span></br> <span class="nomPays">Latvia</span></br>
<span class="capitalePays">Capitale: Riga</span></br> <span class="capitalePays">Capital city: Riga</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Latvia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Latvia.png" class="drapeaux"/>
</div> </div>
<div id="LI" class="cacher"> <div id="LI" class="cacher">
<span class="nomPays">Liechtenstein</span></br> <span class="nomPays">Liechtenstein</span></br>
<span class="capitalePays">Capitale: Vaduz</span></br> <span class="capitalePays">Capital city: Vaduz</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Liechtenstein.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Liechtenstein.png" class="drapeaux"/>
</div> </div>
<div id="LT" class="cacher"> <div id="LT" class="cacher">
<span class="nomPays">Lituanie</span></br> <span class="nomPays">Lithuania</span></br>
<span class="capitalePays">Capitale: Vilnius</span></br> <span class="capitalePays">Capital city: Vilnius</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Lithuania.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Lithuania.png" class="drapeaux"/>
</div> </div>
<div id="LU" class="cacher"> <div id="LU" class="cacher">
<span class="nomPays">Luxembourg</span></br> <span class="nomPays">Luxembourg</span></br>
<span class="capitalePays">Capitale: Luxembourg</span></br> <span class="capitalePays">Capital city: Luxembourg</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Luxembourg.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Luxembourg.png" class="drapeaux"/>
</div> </div>
<div id="MK" class="cacher"> <div id="MK" class="cacher">
<span class="nomPays">Macedoine</span></br> <span class="nomPays">Macedoine</span></br>
<span class="capitalePays">Capitale: Skopje</span></br> <span class="capitalePays">Capital city: Skopje</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Macedonia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Macedonia.png" class="drapeaux"/>
</div> </div>
<div id="MT" class="cacher"> <div id="MT" class="cacher">
<span class="nomPays">Malte</span></br> <span class="nomPays">Malta</span></br>
<span class="capitalePays">Capitale: La Valette</span></br> <span class="capitalePays">Capital city: La Valetta</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Malta.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Malta.png" class="drapeaux"/>
</div> </div>
<div id="MD" class="cacher"> <div id="MD" class="cacher">
<span class="nomPays">Moldavie</span></br> <span class="nomPays">Moldavia</span></br>
<span class="capitalePays">Capitale: Chisinau</span></br> <span class="capitalePays">Capital city: Chisinau</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Moldova.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Moldova.png" class="drapeaux"/>
</div> </div>
<div id="MC" class="cacher"> <div id="MC" class="cacher">
<span class="nomPays">Monaco</span></br> <span class="nomPays">Monaco</span></br>
<span class="capitalePays">Capitale: Monaco</span></br> <span class="capitalePays">Capital city: Monaco</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Monaco.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Monaco.png" class="drapeaux"/>
</div> </div>
<div id="ME" class="cacher"> <div id="ME" class="cacher">
<span class="nomPays">Montenegro</span></br> <span class="nomPays">Montenegro</span></br>
<span class="capitalePays">Capitale: Podaorica</span></br> <span class="capitalePays">Capital city: Podaorica</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Montenegro.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Montenegro.png" class="drapeaux"/>
</div> </div>
<div id="NO" class="cacher"> <div id="NO" class="cacher">
<span class="nomPays">Norvege</span></br> <span class="nomPays">Norway</span></br>
<span class="capitalePays">Capitale: Oslo</span></br> <span class="capitalePays">Capital city: Oslo</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Norway.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Norway.png" class="drapeaux"/>
</div> </div>
<div id="NL" class="cacher"> <div id="NL" class="cacher">
<span class="nomPays">Pays-Bas</span></br> <span class="nomPays">Pays-Bas</span></br>
<span class="capitalePays">Capitale: Amsterdam</span></br> <span class="capitalePays">Capital city: Amsterdam</span></br>
<img src="images/Drapeaux/Europe/Flag_of_the_Netherlands.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_the_Netherlands.png" class="drapeaux"/>
</div> </div>
<div id="PL" class="cacher"> <div id="PL" class="cacher">
<span class="nomPays">Pologne</span></br> <span class="nomPays">Poland</span></br>
<span class="capitalePays">Capitale: Varsovie</span></br> <span class="capitalePays">Capital city: Warsaw</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Poland.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Poland.png" class="drapeaux"/>
</div> </div>
<div id="PT" class="cacher"> <div id="PT" class="cacher">
<span class="nomPays">Portugal</span></br> <span class="nomPays">Portugal</span></br>
<span class="capitalePays">Capitale: Lisbonne</span></br> <span class="capitalePays">Capital city: Lisbon</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Portugal.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Portugal.png" class="drapeaux"/>
</div> </div>
<div id="CZ" class="cacher"> <div id="CZ" class="cacher">
<span class="nomPays">Republique tcheque</span></br> <span class="nomPays">Czech Republic</span></br>
<span class="capitalePays">Capitale: Prague</span></br> <span class="capitalePays">Capital city: Prague</span></br>
<img src="images/Drapeaux/Europe/Flag_of_the_Czech_Republic.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_the_Czech_Republic.png" class="drapeaux"/>
</div> </div>
<div id="RO" class="cacher"> <div id="RO" class="cacher">
<span class="nomPays">Roumanie</span></br> <span class="nomPays">Romania</span></br>
<span class="capitalePays">Capitale: Bucarest</span></br> <span class="capitalePays">Capital city: Bucharest</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Romania.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Romania.png" class="drapeaux"/>
</div> </div>
<div id="UK" class="cacher"> <div id="UK" class="cacher">
<span class="nomPays">Royaume-Uni</span></br> <span class="nomPays">United Kingdom</span></br>
<span class="capitalePays">Capitale: Londres</span></br> <span class="capitalePays">Capital city: London</span></br>
<img src="images/Drapeaux/Europe/Flag_of_the_United_Kingdom.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_the_United_Kingdom.png" class="drapeaux"/>
</div> </div>
<div id="SM" class="cacher"> <div id="SM" class="cacher">
<span class="nomPays">Saint-Marin</span></br> <span class="nomPays">Saint-Marin</span></br>
<span class="capitalePays">Capitale: Saint-Marin</span></br> <span class="capitalePays">Capital city: Saint-Marin</span></br>
<img src="images/Drapeaux/Europe/Flag_of_San_Marino.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_San_Marino.png" class="drapeaux"/>
</div> </div>
<div id="RS" class="cacher"> <div id="RS" class="cacher">
<span class="nomPays">Serbie</span></br> <span class="nomPays">Serbia</span></br>
<span class="capitalePays">Capitale: Belgrade</span></br> <span class="capitalePays">Capital city: Belgrade</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Serbia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Serbia.png" class="drapeaux"/>
</div> </div>
<div id="SK" class="cacher"> <div id="SK" class="cacher">
<span class="nomPays">Slovaquie</span></br> <span class="nomPays">Slovakia</span></br>
<span class="capitalePays">Capitale: Bratislava</span></br> <span class="capitalePays">Capital city: Bratislava</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Slovakia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Slovakia.png" class="drapeaux"/>
</div> </div>
<div id="SI" class="cacher"> <div id="SI" class="cacher">
<span class="nomPays">Slovenie</span></br> <span class="nomPays">Slovenia</span></br>
<span class="capitalePays">Capitale: Ljubljana</span></br> <span class="capitalePays">Capital city: Ljubljana</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Slovenia.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Slovenia.png" class="drapeaux"/>
</div> </div>
<div id="SE" class="cacher"> <div id="SE" class="cacher">
<span class="nomPays">Suede</span></br> <span class="nomPays">Suede</span></br>
<span class="capitalePays">Capitale: Stockholm</span></br> <span class="capitalePays">Capital city: Stockholm</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Sweden.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Sweden.png" class="drapeaux"/>
</div> </div>
<div id="CH" class="cacher"> <div id="CH" class="cacher">
<span class="nomPays">Suisse</span></br> <span class="nomPays">Suisse</span></br>
<span class="capitalePays">Capitale: Berne</span></br> <span class="capitalePays">Capital city: Berne</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Switzerland.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Switzerland.png" class="drapeaux"/>
</div> </div>
<div id="TR" class="cacher"> <div id="TR" class="cacher">
<span class="nomPays">Turquie</span></br> <span class="nomPays">Turkey</span></br>
<span class="capitalePays">Capitale: Ankara</span></br> <span class="capitalePays">Capital city: Ankara</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Turkey.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Turkey.png" class="drapeaux"/>
</div> </div>
<div id="UA" class="cacher"> <div id="UA" class="cacher">
<span class="nomPays">Ukraine</span></br> <span class="nomPays">Ukraine</span></br>
<span class="capitalePays">Capitale: Kiev</span></br> <span class="capitalePays">Capital city: Kiev</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Ukraine.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Ukraine.png" class="drapeaux"/>
</div> </div>
<div id="VA" class="cacher"> <div id="VA" class="cacher">
<span class="nomPays">Vatican</span></br> <span class="nomPays">Vatican</span></br>
<span class="capitalePays">Capitale: Cite du Vatican</span></br> <span class="capitalePays">Capital city: Cite du Vatican</span></br>
<img src="images/Drapeaux/Europe/Flag_of_the_Vatican_City.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_the_Vatican_City.png" class="drapeaux"/>
</div> </div>
<!-- Informations sur les pays d'Asie--> <!-- Informations sur les pays d'Asie-->
<div id="AF" class="cacher"> <div id="AF" class="cacher">
<span class="nomPays">Afghanistan</span></br> <span class="nomPays">Afghanistan</span></br>
<span class="capitalePays">Capitale: Kaboul</span></br> <span class="capitalePays">Capital city: Kabul</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Afghanistan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Afghanistan.png" class="drapeaux"/>
</div> </div>
<div id="SA" class="cacher"> <div id="SA" class="cacher">
<span class="nomPays">Arabie Saoudite</span></br> <span class="nomPays">Saudi Arabia</span></br>
<span class="capitalePays">Capitale: Riyad</span></br> <span class="capitalePays">Capital city: Riyadh</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Saudi_Arabia.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Saudi_Arabia.png" class="drapeaux"/>
</div> </div>
<div id="BH" class="cacher"> <div id="BH" class="cacher">
<span class="nomPays">Bahrein</span></br> <span class="nomPays">Bahrein</span></br>
<span class="capitalePays">Capitale: Manama</span></br> <span class="capitalePays">Capital city: Manama</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Bahrain.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Bahrain.png" class="drapeaux"/>
</div> </div>
<div id="BD" class="cacher"> <div id="BD" class="cacher">
<span class="nomPays">Bangladesh</span></br> <span class="nomPays">Bangladesh</span></br>
<span class="capitalePays">Capitale: Dhaka</span></br> <span class="capitalePays">Capital city: Dhaka</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Bangladesh.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Bangladesh.png" class="drapeaux"/>
</div> </div>
<div id="BT" class="cacher"> <div id="BT" class="cacher">
<span class="nomPays">Bhoutan</span></br> <span class="nomPays">Bhutan</span></br>
<span class="capitalePays">Capitale: Thimphou</span></br> <span class="capitalePays">Capital city: Thimphu</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Bhutan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Bhutan.png" class="drapeaux"/>
</div> </div>
<div id="BN" class="cacher"> <div id="BN" class="cacher">
<span class="nomPays">Brunei</span></br> <span class="nomPays">Brunei</span></br>
<span class="capitalePays">Capitale: Bandar Seri Begawan</span></br> <span class="capitalePays">Capital city: Bandar Seri Begawan</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Brunei.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Brunei.png" class="drapeaux"/>
</div> </div>
<div id="KH" class="cacher"> <div id="KH" class="cacher">
<span class="nomPays">Cambodge</span></br> <span class="nomPays">Cambodia</span></br>
<span class="capitalePays">Capitale: Phnom Penh</span></br> <span class="capitalePays">Capital city: Phnom Penh</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Cambodia.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Cambodia.png" class="drapeaux"/>
</div> </div>
<div id="CN" class="cacher"> <div id="CN" class="cacher">
<span class="nomPays">Chine</span></br> <span class="nomPays">Chine</span></br>
<span class="capitalePays">Capitale: Pekin</span></br> <span class="capitalePays">Capital city: Pekin</span></br>
<img src="images/Drapeaux/Asie/Flag_of_the_People's_Republic_of_China.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_the_People's_Republic_of_China.png" class="drapeaux"/>
</div> </div>
<div id="KP" class="cacher"> <div id="KP" class="cacher">
<span class="nomPays">Coree du Nord</span></br> <span class="nomPays">North Korea</span></br>
<span class="capitalePays">Capitale: Pyongyang</span></br> <span class="capitalePays">Capital city: Pyongyang</span></br>
<img src="images/Drapeaux/Asie/Flag_of_North_Korea.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_North_Korea.png" class="drapeaux"/>
</div> </div>
<div id="KR" class="cacher"> <div id="KR" class="cacher">
<span class="nomPays">Coree du Sud</span></br> <span class="nomPays">South Korea</span></br>
<span class="capitalePays">Capitale: Seoul</span></br> <span class="capitalePays">Capital city: Seoul</span></br>
<img src="images/Drapeaux/Asie/Flag_of_South_Korea.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_South_Korea.png" class="drapeaux"/>
</div> </div>
<div id="AE" class="cacher"> <div id="AE" class="cacher">
<span class="nomPays">Emirats arabes unis</span></br> <span class="nomPays">United Arab Emirates</span></br>
<span class="capitalePays">Capitale: Abou Dabi</span></br> <span class="capitalePays">Capital city: Abu Dhabi</span></br>
<img src="images/Drapeaux/Asie/Flag_of_the_United_Arab_Emirates.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_the_United_Arab_Emirates.png" class="drapeaux"/>
</div> </div>
<div id="IN" class="cacher"> <div id="IN" class="cacher">
<span class="nomPays">Inde</span></br> <span class="nomPays">India</span></br>
<span class="capitalePays">Capitale: New Delhi</span></br> <span class="capitalePays">Capital city: New Delhi</span></br>
<img src="images/Drapeaux/Asie/Flag_of_India.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_India.png" class="drapeaux"/>
</div> </div>
<div id="ID" class="cacher"> <div id="ID" class="cacher">
<span class="nomPays">Indonesie</span></br> <span class="nomPays">Indonesia</span></br>
<span class="capitalePays">Capitale: Jakarta</span></br> <span class="capitalePays">Capital city: Jakarta</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Indonesia.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Indonesia.png" class="drapeaux"/>
</div> </div>
<div id="IR" class="cacher"> <div id="IR" class="cacher">
<span class="nomPays">Iran</span></br> <span class="nomPays">Iran</span></br>
<span class="capitalePays">Capitale: Teheran</span></br> <span class="capitalePays">Capital city: Teheran</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Iran.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Iran.png" class="drapeaux"/>
</div> </div>
<div id="IQ" class="cacher"> <div id="IQ" class="cacher">
<span class="nomPays">Iraq</span></br> <span class="nomPays">Iraq</span></br>
<span class="capitalePays">Capitale: Bagdad</span></br> <span class="capitalePays">Capital city: Bagdad</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Iraq.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Iraq.png" class="drapeaux"/>
</div> </div>
<div id="IL" class="cacher"> <div id="IL" class="cacher">
<span class="nomPays">Israel</span></br> <span class="nomPays">Israel</span></br>
<span class="capitalePays">Capitale: Jerusalem</span></br> <span class="capitalePays">Capital city: Jerusalem</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Israel.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Israel.png" class="drapeaux"/>
</div> </div>
<div id="JP" class="cacher"> <div id="JP" class="cacher">
<span class="nomPays">Japon</span></br> <span class="nomPays">Japan</span></br>
<span class="capitalePays">Capitale: Tokyo</span></br> <span class="capitalePays">Capital city: Tokyo</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Japan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Japan.png" class="drapeaux"/>
</div> </div>
<div id="JO" class="cacher"> <div id="JO" class="cacher">
<span class="nomPays">Jordanie</span></br> <span class="nomPays">Jordan</span></br>
<span class="capitalePays">Capitale: Amman</span></br> <span class="capitalePays">Capital city: Amman</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Jordan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Jordan.png" class="drapeaux"/>
</div> </div>
<div id="KZ" class="cacher"> <div id="KZ" class="cacher">
<span class="nomPays">Kazakhstan</span></br> <span class="nomPays">Kazakhstan</span></br>
<span class="capitalePays">Capitale: Astana</span></br> <span class="capitalePays">Capital city: Astana</span></br>
<img src="images/Drapeaux/Europe/Flag_of_Kazakhstan.png" class="drapeaux"/> <img src="images/Drapeaux/Europe/Flag_of_Kazakhstan.png" class="drapeaux"/>
</div> </div>
<div id="KG" class="cacher"> <div id="KG" class="cacher">
<span class="nomPays">Kirghizistan</span></br> <span class="nomPays">Kyrgyzstan</span></br>
<span class="capitalePays">Capitale: Bichkek</span></br> <span class="capitalePays">Capital city: Bishkek</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Kyrgyzstan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Kyrgyzstan.png" class="drapeaux"/>
</div> </div>
<div id="KW" class="cacher"> <div id="KW" class="cacher">
<span class="nomPays">Koweit</span></br> <span class="nomPays">Koweit</span></br>
<span class="capitalePays">Capitale: Koweit</span></br> <span class="capitalePays">Capital city: Koweit</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Kuwait.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Kuwait.png" class="drapeaux"/>
</div> </div>
<div id="LA" class="cacher"> <div id="LA" class="cacher">
<span class="nomPays">Laos</span></br> <span class="nomPays">Laos</span></br>
<span class="capitalePays">Capitale: Vientiane</span></br> <span class="capitalePays">Capital city: Vientiane</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Laos.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Laos.png" class="drapeaux"/>
</div> </div>
<div id="LB" class="cacher"> <div id="LB" class="cacher">
<span class="nomPays">Liban</span></br> <span class="nomPays">Lebanon</span></br>
<span class="capitalePays">Capitale: Beyrouth</span></br> <span class="capitalePays">Capital city: Beyrouth</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Lebanon.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Lebanon.png" class="drapeaux"/>
</div> </div>
<div id="MY" class="cacher"> <div id="MY" class="cacher">
<span class="nomPays">Malaisie</span></br> <span class="nomPays">Malaysia</span></br>
<span class="capitalePays">Capitale: Kuala Lumpur</span></br> <span class="capitalePays">Capital city: Kuala Lumpur</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Malaysia.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Malaysia.png" class="drapeaux"/>
</div> </div>
<div id="MV" class="cacher"> <div id="MV" class="cacher">
<span class="nomPays">Maldives</span></br> <span class="nomPays">Maldives</span></br>
<span class="capitalePays">Capitale: Male</span></br> <span class="capitalePays">Capital city: Male</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Maldives.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Maldives.png" class="drapeaux"/>
</div> </div>
<div id="MN" class="cacher"> <div id="MN" class="cacher">
<span class="nomPays">Mongolie</span></br> <span class="nomPays">Mongolia</span></br>
<span class="capitalePays">Capitale: Oulan-Bator</span></br> <span class="capitalePays">Capital city: Ulan-Bator</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Mongolia.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Mongolia.png" class="drapeaux"/>
</div> </div>
<div id="MM" class="cacher"> <div id="MM" class="cacher">
<span class="nomPays">Myanmar</span></br> <span class="nomPays">Myanmar</span></br>
<span class="capitalePays">Capitale: Naypyidaw</span></br> <span class="capitalePays">Capital city: Naypyidaw</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Myanmar.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Myanmar.png" class="drapeaux"/>
</div> </div>
<div id="NP" class="cacher"> <div id="NP" class="cacher">
<span class="nomPays">Nepal</span></br> <span class="nomPays">Nepal</span></br>
<span class="capitalePays">Capitale: Katmandou</span></br> <span class="capitalePays">Capital city: Katmandu</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Nepal.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Nepal.png" class="drapeaux"/>
</div> </div>
<div id="OM" class="cacher"> <div id="OM" class="cacher">
<span class="nomPays">Oman</span></br> <span class="nomPays">Oman</span></br>
<span class="capitalePays">Capitale: Mascate</span></br> <span class="capitalePays">Capital city: Muscat</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Oman.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Oman.png" class="drapeaux"/>
</div> </div>
<div id="UZ" class="cacher"> <div id="UZ" class="cacher">
<span class="nomPays">Ouzbekistan</span></br> <span class="nomPays">Uzbekistan</span></br>
<span class="capitalePays">Capitale: Tachkent</span></br> <span class="capitalePays">Capital city: Tashkent</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Uzbekistan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Uzbekistan.png" class="drapeaux"/>
</div> </div>
<div id="PK" class="cacher"> <div id="PK" class="cacher">
<span class="nomPays">Pakistan</span></br> <span class="nomPays">Pakistan</span></br>
<span class="capitalePays">Capitale: Islamabad</span></br> <span class="capitalePays">Capital city: Islamabad</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Pakistan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Pakistan.png" class="drapeaux"/>
</div> </div>
<div id="PH" class="cacher"> <div id="PH" class="cacher">
<span class="nomPays">Philippines</span></br> <span class="nomPays">Philippines</span></br>
<span class="capitalePays">Capitale: Manille</span></br> <span class="capitalePays">Capital city: Manille</span></br>
<img src="images/Drapeaux/Asie/Flag_of_the_Philippines.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_the_Philippines.png" class="drapeaux"/>
</div> </div>
<div id="QA" class="cacher"> <div id="QA" class="cacher">
<span class="nomPays">Qatar</span></br> <span class="nomPays">Qatar</span></br>
<span class="capitalePays">Capitale: Doha</span></br> <span class="capitalePays">Capital city: Doha</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Qatar.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Qatar.png" class="drapeaux"/>
</div> </div>
<div id="RU" class="cacher"> <div id="RU" class="cacher">
<span class="nomPays">Russie</span></br> <span class="nomPays">Russia</span></br>
<span class="capitalePays">Capitale: Moscou</span></br> <span class="capitalePays">Capital city: Moscow</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Russia.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Russia.png" class="drapeaux"/>
</div> </div>
<div id="SG" class="cacher"> <div id="SG" class="cacher">
<span class="nomPays">Singapour</span></br> <span class="nomPays">Singapore</span></br>
<span class="capitalePays">Capitale: Singapour</span></br> <span class="capitalePays">Capital city: Singapore</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Singapore.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Singapore.png" class="drapeaux"/>
</div> </div>
<div id="LK" class="cacher"> <div id="LK" class="cacher">
<span class="nomPays">Sri Lanka</span></br> <span class="nomPays">Sri Lanka</span></br>
<span class="capitalePays">Capitale: Colombo</span></br> <span class="capitalePays">Capital city: Colombo</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Sri_Lanka.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Sri_Lanka.png" class="drapeaux"/>
</div> </div>
<div id="SY" class="cacher"> <div id="SY" class="cacher">
<span class="nomPays">Syrie</span></br> <span class="nomPays">Syria</span></br>
<span class="capitalePays">Capitale: Damas</span></br> <span class="capitalePays">Capital city: Damask</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Syria.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Syria.png" class="drapeaux"/>
</div> </div>
<div id="TJ" class="cacher"> <div id="TJ" class="cacher">
<span class="nomPays">Tadjikistan</span></br> <span class="nomPays">Tajikistan</span></br>
<span class="capitalePays">Capitale: Douchanbe</span></br> <span class="capitalePays">Capital city: Dushanbe</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Tajikistan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Tajikistan.png" class="drapeaux"/>
</div> </div>
<div id="TH" class="cacher"> <div id="TH" class="cacher">
<span class="nomPays">Thailande</span></br> <span class="nomPays">Thailand</span></br>
<span class="capitalePays">Capitale: Bangkok</span></br> <span class="capitalePays">Capital city: Bangkok</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Thailand.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Thailand.png" class="drapeaux"/>
</div> </div>
<div id="TL" class="cacher"> <div id="TL" class="cacher">
<span class="nomPays">Timor-oriental</span></br> <span class="nomPays">Timor-oriental</span></br>
<span class="capitalePays">Capitale: Dili</span></br> <span class="capitalePays">Capital city: Dili</span></br>
<img src="images/Drapeaux/Asie/Flag_of_East_Timor.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_East_Timor.png" class="drapeaux"/>
</div> </div>
<div id="TM" class="cacher"> <div id="TM" class="cacher">
<span class="nomPays">Turkmenistan</span></br> <span class="nomPays">Turkmenistan</span></br>
<span class="capitalePays">Capitale: Achgabat</span></br> <span class="capitalePays">Capital city: Ashgabat</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Turkmenistan.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Turkmenistan.png" class="drapeaux"/>
</div> </div>
<div id="VN" class="cacher"> <div id="VN" class="cacher">
<span class="nomPays">Viet Nam</span></br> <span class="nomPays">Viet Nam</span></br>
<span class="capitalePays">Capitale: Hanoi</span></br> <span class="capitalePays">Capital city: Hanoi</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Vietnam.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Vietnam.png" class="drapeaux"/>
</div> </div>
<div id="YE" class="cacher"> <div id="YE" class="cacher">
<span class="nomPays">Yemen</span></br> <span class="nomPays">Yemen</span></br>
<span class="capitalePays">Capitale: Sanaa</span></br> <span class="capitalePays">Capital city: Sanaa</span></br>
<img src="images/Drapeaux/Asie/Flag_of_Yemen.png" class="drapeaux"/> <img src="images/Drapeaux/Asie/Flag_of_Yemen.png" class="drapeaux"/>
</div> </div>
</body> </body>
......
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="description" content="Traceur de fonctions mathématiques en JavaScript"/> <meta name="description" content="Traceur de fonctions mathématiques en JavaScript"/>
<meta name="author" content="Yannick Vessaz"/> <meta name="author" content="Yannick Vessaz"/>
<meta name="revised" content="2010/09/25"/> <meta name="revised" content="2010/09/25"/>
<title>Graphics</title> <title>Graphics</title>
<link rel="stylesheet" type="text/css" href="Style/default.css"/> <link rel="stylesheet" type="text/css" href="Style/default.css"/>
<script type="text/javascript" src="JavaScript/ColorPicker.js"></script> <script type="text/javascript" src="JavaScript/ColorPicker.js"></script>
<script type="text/javascript" src="JavaScript/Etude.js"></script> <script type="text/javascript" src="JavaScript/Etude.js"></script>
<script type="text/javascript" src="JavaScript/Interface.js"></script> <script type="text/javascript" src="JavaScript/Interface.js"></script>
<script type="text/javascript" src="JavaScript/Outils.js"></script> <script type="text/javascript" src="JavaScript/Outils.js"></script>
<script type="text/javascript" src="JavaScript/Sauvegardes.js"></script> <script type="text/javascript" src="JavaScript/Sauvegardes.js"></script>
<script type="text/javascript" src="JavaScript/AffichageStandard.js"></script> <script type="text/javascript" src="JavaScript/AffichageStandard.js"></script>
<script type="text/javascript" src="JavaScript/Affichage3D.js"></script> <script type="text/javascript" src="JavaScript/Affichage3D.js"></script>
<script type="text/javascript" src="JavaScript/AffichageUniboard.js"></script> <script type="text/javascript" src="JavaScript/AffichageUniboard.js"></script>
<script type="text/javascript" src="JavaScript/AffichageXPM.js"></script> <script type="text/javascript" src="JavaScript/AffichageXPM.js"></script>
<script type="text/javascript">
<script src="JavaScript/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="JavaScript/jQuery/jquery.disable.text.select.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[ // <![CDATA[
// --- Variables nécessaires au fonctionnement du widget --- // --- Variables nécessaires au fonctionnement du widget ---
var largeur = 500 $(document).ready(function(){
var hauteur = 400 $(document).disableTextSelect();
var graphique = ""
var image = "" $("input").mouseover(function(){
var tableau = new Array() $(document).enableTextSelect();
var ligne = new Array() });
var j = 0
$("input").mouseout(function(){
var interdit = new Array(";", "interdit", "'", '"', "eval", "new", "sankore", "=", "document", "window", "alert") $(document).disableTextSelect();
});
var menuActuel = "" //$("input").change(function(){$(this).trigger('blur');});
var mouseDown = false });
var outil = "point" var largeur = 500
var hauteur = 400
var pointX = new Array() var graphique = ""
var pointY = new Array() var image = ""
var pente = new Array() var tableau = new Array()
var pente2 = new Array() var ligne = new Array()
var precision = 0.02 var j = 0
var couleurFonction = "rgb(193,255,0)" var interdit = new Array(";", "interdit", "'", '"', "eval", "new", "sankore", "=", "document", "window", "alert")
var r = 255
var g = 0 var menuActuel = ""
var b = 0 var mouseDown = false
var couleurEchelle = "rgba(255,255,255,0.8)" var outil = "point"
var couleurGrille = "rgba(255,255,255,0.1)"
var couleurAxes = "rgba(0,0,0,0.5)" var pointX = new Array()
var pointY = new Array()
var decalageX = 0 var pente = new Array()
var decalageY = 0 var pente2 = new Array()
var precision = 0.02
var lineWidth = 3
//alert(navigator.appName+" ; "+navigator.appVersion+" ; "+navigator.userAgent) var couleurFonction = "rgb(193,255,0)"
var r = 255
// ------------- Fonctions du widgets ------------- var g = 0
// Lance la procédure pour dessiner la fonction qui se trouve dans l'input en haut du widget. var b = 0
// Permet aussi d'actualiser le graphique. var couleurEchelle = "rgba(255,255,255,0.8)"
function actualiserGraph(){ var couleurGrille = "rgba(255,255,255,0.1)"
evaluer(document.getElementById("inputEq").value) var couleurAxes = "rgba(0,0,0,0.5)"
}
var decalageX = 0
// Cette fonction détermine si la fonction entrée est valide ou non. var decalageY = 0
// Elle retourne "true" si la fonction ne comporte pas de caractères interdits et "false" dans le cas contraire.
function check(eq){ var lineWidth = 3
for(var i=0; i<interdit.length; i++){ //alert(navigator.appName+" ; "+navigator.appVersion+" ; "+navigator.userAgent)
var condition = ""
for(var k=0; k<interdit[i].length; k++){ // ------------- Fonctions du widgets -------------
if(k==0){ // Lance la procédure pour dessiner la fonction qui se trouve dans l'input en haut du widget.
condition = condition + "eq.charAt(j) == interdit[i].charAt(0)" // Permet aussi d'actualiser le graphique.
} function actualiserGraph(){
else{ evaluer(document.getElementById("inputEq").value)
condition = condition + "&& eq.charAt(j+"+k+") == interdit[i].charAt("+k+")" }
}
} // Cette fonction détermine si la fonction entrée est valide ou non.
//alert(interdit[i]+" ; "+condition) // Elle retourne "true" si la fonction ne comporte pas de caractères interdits et "false" dans le cas contraire.
for(var j=0; j<eq.length; j++){ function check(eq){
if(eval(condition)){ for(var i=0; i<interdit.length; i++){
document.getElementById("spanFctInterdite").innerHTML = interdit[i] var condition = ""
afficherMenu("fctInterdite") for(var k=0; k<interdit[i].length; k++){
//alert("------- Erreur -------\nImpossible de dessiner la fonction ... \nExpression ou carractère invalide : "+interdit[i]+"") if(k==0){
return false condition = condition + "eq.charAt(j) == interdit[i].charAt(0)"
} }
} else{
} condition = condition + "&& eq.charAt(j+"+k+") == interdit[i].charAt("+k+")"
return true }
} }
//alert(interdit[i]+" ; "+condition)
// Cette fonction permet de choisir la méthode d'affichage entre: for(var j=0; j<eq.length; j++){
// 1) Image au format XPM if(eval(condition)){
// 2) Affichage directe dans sankore document.getElementById("spanFctInterdite").innerHTML = interdit[i]
// 3) Autres Méthodes d'affichages (svg ou canvas) afficherMenu("fctInterdite")
function evaluer(eq){ //alert("------- Erreur -------\nImpossible de dessiner la fonction ... \nExpression ou carractère invalide : "+interdit[i]+"")
if(check(eq)){ return false
try{ }
if(historique[0]!=eq && eq!="1000"){ }
for(var i=0;i<historique.length;i++){ }
if(historique[i]==eq){ return true
historique.splice(i, 1) }
}
} // Cette fonction permet de choisir la méthode d'affichage entre:
historique.unshift(eq) // 1) Image au format XPM
actualiserHistorique() // 2) Affichage directe dans sankore
} // 3) Autres Méthodes d'affichages (svg ou canvas)
if(fonction3D){ function evaluer(eq){
dessiner3D(eq) if(check(eq)){
} try{
else if(document.getElementById("selectMethodeAffichage").value == "xpm"){ if(historique[0]!=eq && eq!="1000"){
evaluerXPM(eq) for(var i=0;i<historique.length;i++){
} if(historique[i]==eq){
else if(document.getElementById("selectMethodeAffichage").value == "sankore"){ historique.splice(i, 1)
evaluerUniboard(eq) }
} }
else if(document.getElementById("selectMethodeAffichage").value == "canvas" || document.getElementById("selectMethodeAffichage").value == "canvas2"){ historique.unshift(eq)
evaluerCanvas(eq) actualiserHistorique()
} }
else{ if(fonction3D){
evaluerSVG(eq) dessiner3D(eq)
} }
} else if(document.getElementById("selectMethodeAffichage").value == "xpm"){
catch(err){ evaluerXPM(eq)
afficherMenu("erreurFct") }
} else if(document.getElementById("selectMethodeAffichage").value == "sankore"){
} evaluerUniboard(eq)
} }
else if(document.getElementById("selectMethodeAffichage").value == "canvas" || document.getElementById("selectMethodeAffichage").value == "canvas2"){
// ---- Fonctions Mathématiques et constantes ---- evaluerCanvas(eq)
// (rempalce sin() par Math.sin(), cos() par Math.cos(), tan() par Math.tan(), etc. }
var pi = 4 * atan(1) else{
var e = exp(1) evaluerSVG(eq)
}
function sin(valeur){ }
return Math.sin(valeur) catch(err){
} afficherMenu("erreurFct")
function cos(valeur){ }
return Math.cos(valeur) }
} }
function tan(valeur){
return Math.tan(valeur) // ---- Fonctions Mathématiques et constantes ----
} // (rempalce sin() par Math.sin(), cos() par Math.cos(), tan() par Math.tan(), etc.
function cot(valeur){ var pi = 4 * atan(1)
return 1/Math.tan(valeur) var e = exp(1)
}
function sec(valeur){ function sin(valeur){
return 1/cos(valeur) return Math.sin(valeur)
} }
function csc(valeur){ function cos(valeur){
return 1/sin(valeur) return Math.cos(valeur)
} }
function tan(valeur){
function asin(valeur){ return Math.tan(valeur)
return Math.asin(valeur) }
} function cot(valeur){
function acos(valeur){ return 1/Math.tan(valeur)
return Math.acos(valeur) }
} function sec(valeur){
function atan(valeur){ return 1/cos(valeur)
return Math.atan(valeur) }
} function csc(valeur){
function acot(valeur){ return 1/sin(valeur)
return Math.atan(1/valeur) }
}
function asec(valeur){ function asin(valeur){
return Math.acos(1/valeur) return Math.asin(valeur)
} }
function acsc(valeur){ function acos(valeur){
return Math.asin(1/valeur) return Math.acos(valeur)
} }
function atan(valeur){
var arcsin = asin return Math.atan(valeur)
var arccos = acos }
var arctan = atan function acot(valeur){
var arccot = acot return Math.atan(1/valeur)
var arcsec = asec }
var arccsc = acsc function asec(valeur){
return Math.acos(1/valeur)
function sinh(valeur){ }
return (Math.exp(valeur)-Math.exp(-valeur))/2 function acsc(valeur){
} return Math.asin(1/valeur)
function cosh(valeur){ }
return (Math.exp(valeur)+Math.exp(-valeur))/2
} var arcsin = asin
function tanh(valeur){ var arccos = acos
return (Math.exp(valeur)-Math.exp(-valeur))/(Math.exp(valeur)+Math.exp(-valeur)) var arctan = atan
} var arccot = acot
function coth(valeur){ var arcsec = asec
return (Math.exp(valeur)+Math.exp(-valeur))/(Math.exp(valeur)-Math.exp(-valeur)) var arccsc = acsc
}
function sech(valeur){ function sinh(valeur){
return 1/cosh(valeur) return (Math.exp(valeur)-Math.exp(-valeur))/2
} }
function csch(valeur){ function cosh(valeur){
return 1/sinh(valeur) return (Math.exp(valeur)+Math.exp(-valeur))/2
} }
function tanh(valeur){
function asinh(valeur){ return (Math.exp(valeur)-Math.exp(-valeur))/(Math.exp(valeur)+Math.exp(-valeur))
return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)+1)) }
} function coth(valeur){
function acosh(valeur){ return (Math.exp(valeur)+Math.exp(-valeur))/(Math.exp(valeur)-Math.exp(-valeur))
return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)-1)) }
} function sech(valeur){
function atanh(valeur){ return 1/cosh(valeur)
return Math.log((1+valeur)/(1-valeur))/2 }
} function csch(valeur){
function acoth(valeur){ return 1/sinh(valeur)
return Math.log((valeur+1)/(valeur-1))/2 }
}
function asinh(valeur){
var arcsinh = asinh return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)+1))
var arccosh = acosh }
var arctanh = atanh function acosh(valeur){
var arccoth = acoth return Math.log(valeur+Math.sqrt(Math.pow(valeur,2)-1))
}
function sqrt(valeur){ function atanh(valeur){
return Math.sqrt(valeur) return Math.log((1+valeur)/(1-valeur))/2
} }
function pow(valeur1, valeur2){ function acoth(valeur){
return Math.pow(valeur1, valeur2) return Math.log((valeur+1)/(valeur-1))/2
} }
function root(valeur1, valeur2){
if(valeur2%2==1 && valeur1<0){ var arcsinh = asinh
return -Math.pow(-valeur1, (1/valeur2)) var arccosh = acosh
} var arctanh = atanh
else{ var arccoth = acoth
return Math.pow(valeur1, (1/valeur2))
} function sqrt(valeur){
} return Math.sqrt(valeur)
}
function exp(valeur){ function pow(valeur1, valeur2){
return Math.exp(valeur) return Math.pow(valeur1, valeur2)
} }
function log(valeur){ function root(valeur1, valeur2){
return Math.log(valeur)/Math.log(10) if(valeur2%2==1 && valeur1<0){
} return -Math.pow(-valeur1, (1/valeur2))
function ln(valeur){ }
return Math.log(valeur) else{
} return Math.pow(valeur1, (1/valeur2))
}
function abs(valeur){ }
return Math.abs(valeur)
} function exp(valeur){
function sign(valeur){ return Math.exp(valeur)
if(valeur<0){ }
return -1 function log(valeur){
} return Math.log(valeur)/Math.log(10)
else if(valeur>0){ }
return 1 function ln(valeur){
} return Math.log(valeur)
else{ }
return undefined
} function abs(valeur){
} return Math.abs(valeur)
}
function round(valeur){ function sign(valeur){
return Math.round(valeur) if(valeur<0){
} return -1
function ceil(valeur){ }
return Math.ceil(valeur) else if(valeur>0){
} return 1
function floor(valeur){ }
return Math.floor(valeur) else{
} return undefined
function random(){ }
return Math.random() }
}
function round(valeur){
return Math.round(valeur)
}
function ceil(valeur){
return Math.ceil(valeur)
}
function floor(valeur){
return Math.floor(valeur)
}
function random(){
return Math.random()
}
// ]]> // ]]>
</script> </script>
</head> </head>
<body onload="evaluer(1000);checkCouleurs3D();loadOptions();majAuto()" onkeypress="keyPress(event)"> <body onload="evaluer(1000);checkCouleurs3D();loadOptions();majAuto()" onkeypress="keyPress(event)">
<!-- ..... Haut du Widget ..... --> <!-- ..... Haut du Widget ..... -->
<span id="haut"> <span id="haut">
<span id="texteFonction">Function: </span><input id="inputEq" onkeypress='if(event.keyCode==13) evaluer(this.value)' onkeyup="document.getElementById('fonctionActuelle').innerHTML = this.value"/> <span id="texteFonction">Function: </span><input id="inputEq" onkeypress='if(event.keyCode==13) evaluer(this.value)' onkeyup="document.getElementById('fonctionActuelle').innerHTML = this.value"/>
<input type="button" onclick='evaluer(document.getElementById("inputEq").value)' value="Display"/><input type="button" style="width:21px;" onclick="menuFonctions()" value="+"/> <input type="button" onclick='evaluer(document.getElementById("inputEq").value)' value="Display"/><input type="button" style="width:21px;" onclick="menuFonctions()" value="+"/>
</span> </span>
<!--<div id="miniMax" onclick="miniMax()">-</div> ▶▼ --> <!--<div id="miniMax" onclick="miniMax()">-</div> ▶▼ -->
<div id="boutonAgrandir" class="miniBouton" onclick="agrandirAffichage()">^</div> <div id="boutonAgrandir" class="miniBouton" onclick="agrandirAffichage()">^</div>
<!--<div id="boutonFermer" class="miniBouton" onclick="close()"></div>--> <!--<div id="boutonFermer" class="miniBouton" onclick="close()"></div>-->
<br/> <br/>
<!-- ..... Millieu du Widget ..... --> <!-- ..... Millieu du Widget ..... -->
<!-- Zone d'affichage --> <!-- Zone d'affichage -->
<div id="affichage" onmousedown="sourisDown()" onmouseup="sourisUp()" onmousemove="sourisMove(event)" ondblclick="doubleClick(event.ctrlKey)"></div> <div id="affichage" onmousedown="sourisDown()" onmouseup="sourisUp()" onmousemove="sourisMove(event)" ondblclick="doubleClick(event.ctrlKey)"></div>
<!-- Zone de boutons gauche --> <!-- Zone de boutons gauche -->
<div id="gauche"> <div id="gauche">
X-axis: <br/> X-axis: <br/>
<input id="borneXGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneXDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> <br/> <input id="borneXGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneXDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> <br/>
Y-axis: <br/> Y-axis: <br/>
<input id="borneYGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneYDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> <input id="borneYGauche" class="smallInput" value="-5" onkeypress='if(event.keyCode==13) actualiserGraph()'/> à <input id="borneYDroite" class="smallInput" value="5" onkeypress='if(event.keyCode==13) actualiserGraph()'/>
<br/>Zoom: <br/> <br/>Zoom: <br/>
<input type="button" style="width:45%;" onclick='zoom(1.25)' value="-"/><input type="button" style="width:45%; position:relative; left: 9px;" onclick='zoom(0.8)' value="+"/><br/><br/> <input type="button" style="width:45%;" onclick='zoom(1.25)' value="-"/><input type="button" style="width:45%; position:relative; left: 9px;" onclick='zoom(0.8)' value="+"/><br/><br/>
Color: <br/> Color: <br/>
<div id="buttonColor" title="couleurFonction" onclick="colorPicker(this.id); afficherMenu('menuCouleur')"></div> <div id="buttonColor" title="couleurFonction" onclick="colorPicker(this.id); afficherMenu('menuCouleur')"></div>
<br/><br/> <br/><br/>
<hr/> <hr/>
<br/> <br/>
Menus: Menus:
<input type="button" class="boutonGauche" onclick='document.getElementById("etudeFct").innerHTML = document.getElementById("inputEq").value;afficherMenu("menuOutils")' value="Tools"/> <input type="button" class="boutonGauche" onclick='document.getElementById("etudeFct").innerHTML = document.getElementById("inputEq").value;afficherMenu("menuOutils")' value="Tools"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuOptions")' value="Options"/> <input type="button" class="boutonGauche" onclick='afficherMenu("menuOptions")' value="Options"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuAide")' value="Help"/> <input type="button" class="boutonGauche" onclick='afficherMenu("menuAide")' value="Help"/>
<input type="button" class="boutonGauche" onclick='afficherMenu("menuCredits")' value="About"/> <input type="button" class="boutonGauche" onclick='afficherMenu("menuCredits")' value="About"/>
<!-- ..... Menus ..... --> <!-- ..... Menus ..... -->
<div id="menu" class="menu"> <div id="menu" class="menu">
<div id="contenuMenu" class="contenuMenu"></div> <div id="contenuMenu" class="contenuMenu"></div>
<div class="barreBasMenu"> <div class="barreBasMenu">
<input type="button" onclick='cacherMenu()' value="Cancel"/> <input type="button" onclick='cacherMenu()' value="Cancel"/>
</div> </div>
</div> </div>
</div> </div>
<div id="gauche3D"> <div id="gauche3D">
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuCredits")' value="About"/> <input type="button" class="boutonGauche3D" onclick='afficherMenu("menuCredits")' value="About"/>
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuAide")' value="Help"/> <input type="button" class="boutonGauche3D" onclick='afficherMenu("menuAide")' value="Help"/>
<input type="button" class="boutonGauche3D" onclick='afficherMenu("menuOptions")' value="Options"/> <input type="button" class="boutonGauche3D" onclick='afficherMenu("menuOptions")' value="Options"/>
<input type="button" style="width:30px;" onclick='zoom3D(0.8)' value="-"/><input type="button" style="width:30px;" onclick='zoom3D(1.25)' value="+"/> <input type="button" style="width:30px;" onclick='zoom3D(0.8)' value="-"/><input type="button" style="width:30px;" onclick='zoom3D(1.25)' value="+"/>
</div> </div>
<!-- Options --> <!-- Options -->
<div id="menuOptions" class="menu"> <div id="menuOptions" class="menu">
<table class="ongletMenu"> <table class="ongletMenu">
<tr> <tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions")'>Widget</td> <td class="ongletMenuActuel" onclick='afficherMenu("menuOptions")'>Widget</td>
<td onclick='afficherMenu("menuOptions2D")'>2D</td> <td onclick='afficherMenu("menuOptions2D")'>2D</td>
<td onclick='afficherMenu("menuOptions3D")'>3D</td> <td onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr> </tr>
</table> </table>
<div class="contenuMenu avecBordures"> <div class="contenuMenu avecBordures">
<h3>Widget options</h3> <h3>Widget options</h3>
Themes of widget: <select id="selectTheme" onchange="changerTheme(this.value)"> Themes of widget: <select id="selectTheme" onchange="changerTheme(this.value)">
<option value="noir">Black</option> <option value="noir">Black</option>
<option value="bleu">Blue</option> <option value="bleu">Blue</option>
<option value="blanc">White</option> <option value="blanc">White</option>
</select><br/> </select><br/>
<br/><br/><br/> <br/><br/><br/>
<span class="gras">Control options:</span><br/> <span class="gras">Control options:</span><br/>
<input type="button" class="boutonSauvegarde" onclick="saveOptions()" value="Save"/><input type="button" class="boutonSauvegarde" onclick="loadOptions()" value="Load"/> <input class="boutonSauvegarde2" type="button" onclick="delOptions()" value="Delete"/><input class="boutonSauvegarde2" type="button" onclick="alertOptions()" value="Display"/><br/> <input type="button" class="boutonSauvegarde" onclick="saveOptions()" value="Save"/><input type="button" class="boutonSauvegarde" onclick="loadOptions()" value="Load"/> <input class="boutonSauvegarde2" type="button" onclick="delOptions()" value="Delete"/><input class="boutonSauvegarde2" type="button" onclick="alertOptions()" value="Display"/><br/>
<span class="texteSecondaire">Save a widget options in cookies or load an options from cookies or delete a registered options.</span> <span class="texteSecondaire">Save a widget options in cookies or load an options from cookies or delete a registered options.</span>
<br/><br/> <br/><br/>
<label for="checkMaJ">Automatically update when a widget opening.</label> <input type="checkbox" id="checkMaJ" onclick="checkboxMaJ()"/> <label for="checkMaJ">Automatically update when a widget opening.</label> <input type="checkbox" id="checkMaJ" onclick="checkboxMaJ()"/>
<br/> <br/>
<div id="cacheCookies"><br/><br/><h1>Cookies are disabled. You cannot save an options...</h1></div> <div id="cacheCookies"><br/><br/><h1>Cookies are disabled. You cannot save an options...</h1></div>
<div id="cacheMaJ">You are using the last version of this widget.</div> <div id="cacheMaJ">You are using the last version of this widget.</div>
<input type="button" onclick='reset()' value="Reload widget" style="position:absolute; bottom:20px; width:140px; height:32px;"/> <input type="button" onclick='reset()' value="Reload widget" style="position:absolute; bottom:20px; width:140px; height:32px;"/>
<input type="button" onclick='miseAjour()' value="Updated" style="position:absolute; bottom:20px; left:160px; width:140px; height:32px;"/> <input type="button" onclick='miseAjour()' value="Updated" style="position:absolute; bottom:20px; left:160px; width:140px; height:32px;"/>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick="cacherMenu(); actualiserGraph()" value="Check"/></div> <div class="barreBasMenu"><input type="button" onclick="cacherMenu(); actualiserGraph()" value="Check"/></div>
</div> </div>
<div id="menuOptions2D" class="menu"> <div id="menuOptions2D" class="menu">
<table class="ongletMenu"> <table class="ongletMenu">
<tr> <tr>
<td onclick='afficherMenu("menuOptions")'>Widget</td> <td onclick='afficherMenu("menuOptions")'>Widget</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions2D")'>2D</td> <td class="ongletMenuActuel" onclick='afficherMenu("menuOptions2D")'>2D</td>
<td onclick='afficherMenu("menuOptions3D")'>3D</td> <td onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr> </tr>
</table> </table>
<div class="contenuMenu avecBordures"> <div class="contenuMenu avecBordures">
<h3>Options 2D</h3> <h3>Options 2D</h3>
The graphical method displaying:<select id="selectMethodeAffichage"> The graphical method displaying:<select id="selectMethodeAffichage">
<option value="canvas">canvas (lines)</option> <option value="canvas">canvas (lines)</option>
<option value="canvas2">canvas (points)</option> <option value="canvas2">canvas (points)</option>
<option value="svg">svg</option> <option value="svg">svg</option>
<option value="svg2">svg (1 image)</option> <option value="svg2">svg (1 image)</option>
<option value="xpm">xpm</option> <option value="xpm">xpm</option>
<option value="sankore">sankore</option> <option value="sankore">sankore</option>
</select> <br/> </select> <br/>
Zoom default: Zoom default:
<input value="5" class="smallInput" id="zoomDefaut"/> <input value="5" class="smallInput" id="zoomDefaut"/>
<input type="button" onclick='reinitialiserZoom(document.getElementById("zoomDefaut").value)' value="Reset zoom"/> <br/> <input type="button" onclick='reinitialiserZoom(document.getElementById("zoomDefaut").value)' value="Reset zoom"/> <br/>
<br/> <br/>
<input type="checkbox" id="checkGrille" checked="true" onclick="actualiserGraph()"/><label for="checkGrille">Show grid</label> <br/> <input type="checkbox" id="checkGrille" checked="true" onclick="actualiserGraph()"/><label for="checkGrille">Show grid</label> <br/>
<input type="checkbox" id="checkAxes" checked="true" onclick="actualiserGraph()"/><label for="checkAxes">Show axis</label> <br/> <input type="checkbox" id="checkAxes" checked="true" onclick="actualiserGraph()"/><label for="checkAxes">Show axis</label> <br/>
<input type="checkbox" id="checkEchelle" checked="true" onclick="actualiserGraph()"/><label for="checkEchelle">Scale</label> <br/> <input type="checkbox" id="checkEchelle" checked="true" onclick="actualiserGraph()"/><label for="checkEchelle">Scale</label> <br/>
Thickness: <input id="inputTaille" class="smallInput" value="3" onkeypress='if(event.keyCode==13) actualiserGraph()' style=""/> Thickness: <input id="inputTaille" class="smallInput" value="3" onkeypress='if(event.keyCode==13) actualiserGraph()' style=""/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputTaille', 1); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputTaille', 1); actualiserGraph()">-</div> <br/> <div class="boutonPlus" type="button" onclick="boutonPlus('inputTaille', 1); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputTaille', 1); actualiserGraph()">-</div> <br/>
<br/> <br/>
Offset diagram: Offset diagram:
x=<input value="0" class="smallInput" id="inputDecalageX" onkeyup="decalageX = parseFloat(this.value)"/> x=<input value="0" class="smallInput" id="inputDecalageX" onkeyup="decalageX = parseFloat(this.value)"/>
y=<input value="0" class="smallInput" id="inputDecalageY" onkeyup="decalageY = parseFloat(this.value)"/> y=<input value="0" class="smallInput" id="inputDecalageY" onkeyup="decalageY = parseFloat(this.value)"/>
<br/> <br/>
Accuracy graph: Accuracy graph:
<input value="0.02" class="smallInput" id="inputPrecision" onkeyup="precision = parseFloat(this.value)"/> <input value="0.02" class="smallInput" id="inputPrecision" onkeyup="precision = parseFloat(this.value)"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">-</div> <br/> <div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision', 0.01); precision = parseFloat(document.getElementById('inputPrecision').value); actualiserGraph()">-</div> <br/>
<br/> <br/>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div>
</div> </div>
<div id="menuOptions3D" class="menu"> <div id="menuOptions3D" class="menu">
<table class="ongletMenu"> <table class="ongletMenu">
<tr> <tr>
<td onclick='afficherMenu("menuOptions")'>Widget</td> <td onclick='afficherMenu("menuOptions")'>Widget</td>
<td onclick='afficherMenu("menuOptions2D")'>2D</td> <td onclick='afficherMenu("menuOptions2D")'>2D</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuOptions3D")'>3D</td> <td class="ongletMenuActuel" onclick='afficherMenu("menuOptions3D")'>3D</td>
</tr> </tr>
</table> </table>
<div class="contenuMenu avecBordures"> <div class="contenuMenu avecBordures">
<h3>Options 3D</h3> <h3>Options 3D</h3>
Show the style: Show the style:
<select id="selectAffichage3D"> <select id="selectAffichage3D">
<option value="surfaces"> surfaces </option> <option value="surfaces"> surfaces </option>
<option value="points"> points </option> <option value="points"> points </option>
</select> <input type="button" onclick='reinitialiserZoom(5)' value="Reset display"/> <br/> </select> <input type="button" onclick='reinitialiserZoom(5)' value="Reset display"/> <br/>
<br/> <br/>
Accuracy function: <input value="0.2" class="smallInput" id="inputPrecision3D" onkeyup="precisionFonction3D = parseFloat(this.value)"/> Accuracy function: <input value="0.2" class="smallInput" id="inputPrecision3D" onkeyup="precisionFonction3D = parseFloat(this.value)"/>
<div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">-</div> <br/> <div class="boutonPlus" type="button" onclick="boutonPlus('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">+</div><div class="boutonMoins" type="button" onclick="boutonMoins('inputPrecision3D', 0.1); precisionFonction3D = parseFloat(document.getElementById('inputPrecision3D').value); actualiserGraph()">-</div> <br/>
<br/> <br/>
Use the color:<br/> Use the color:<br/>
red: red:
<select onchange="checkCouleurs3D()" id="selectRouge3D"> <select onchange="checkCouleurs3D()" id="selectRouge3D">
<option value="plus">positive value</option> <option value="plus">positive value</option>
<option value="moins">negative value</option> <option value="moins">negative value</option>
<option value="tout">general value</option> <option value="tout">general value</option>
</select> </select>
<br/> <br/>
green : green :
<select onchange="checkCouleurs3D()" id="selectVert3D"> <select onchange="checkCouleurs3D()" id="selectVert3D">
<option value="moins">negative value</option> <option value="moins">negative value</option>
<option value="plus">positive value</option> <option value="plus">positive value</option>
<option value="tout">general value</option> <option value="tout">general value</option>
</select> </select>
<br/> <br/>
blue : blue :
<select onchange="checkCouleurs3D()" id="selectBleu3D"> <select onchange="checkCouleurs3D()" id="selectBleu3D">
<option value="tout">general value</option> <option value="tout">general value</option>
<option value="plus">positive value</option> <option value="plus">positive value</option>
<option value="moins">negative value</option> <option value="moins">negative value</option>
</select> </select>
<br/> <br/>
General value : <input class="smallInput" id="couleur3Dgenerale" type="texte" value="0" onkeyup="checkCouleurs3D()"/> (from 0 to 255) General value : <input class="smallInput" id="couleur3Dgenerale" type="texte" value="0" onkeyup="checkCouleurs3D()"/> (from 0 to 255)
<br/> <br/>
<span id="apercuCouleur3D"></span> <span id="apercuCouleur3D"></span>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu(); actualiserGraph()' value="Check"/></div>
</div> </div>
<!-- Aide --> <!-- Aide -->
<div id="menuAide" class="menu"> <div id="menuAide" class="menu">
<table class="ongletMenu"> <table class="ongletMenu">
<tr> <tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAide")'>Using</td> <td class="ongletMenuActuel" onclick='afficherMenu("menuAide")'>Using</td>
<td onclick='afficherMenu("menuAideExemples")'>Examples</td> <td onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td onclick='afficherMenu("menuAideAutres")'>Other</td> <td onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr> </tr>
</table> </table>
<div class="contenuMenu avecBordures"> <div class="contenuMenu avecBordures">
<h1>How it work.</h1> <h1>How it work.</h1>
<p>This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press "Show".</p> <p>This widget allow to draw mathematical function. Enter function in the field in the top part of widget and press "Show".</p>
<p>You can enter following mathematical function:<br/> <p>You can enter following mathematical function:<br/>
<h2>Basic operations</h2> <h2>Basic operations</h2>
<ul> <ul>
<li>Plus -> <span class="gras">+</span></li> <li>Plus -> <span class="gras">+</span></li>
<li>Minus -> <span class="gras">-</span></li> <li>Minus -> <span class="gras">-</span></li>
<li>Multiplication -> <span class="gras">*</span></li> <li>Multiplication -> <span class="gras">*</span></li>
<li>Division -> <span class="gras">/</span></li> <li>Division -> <span class="gras">/</span></li>
<li>Mod -> <span class="gras">%</span></li> <li>Mod -> <span class="gras">%</span></li>
</ul> </ul>
<h2>Trigonometric functions</h2> <h2>Trigonometric functions</h2>
<ul> <ul>
<li>Sine -> <span class="gras">sin(x)</span></li> <li>Sine -> <span class="gras">sin(x)</span></li>
<li>Cosine -> <span class="gras">cos(x)</span></li> <li>Cosine -> <span class="gras">cos(x)</span></li>
<li>Tangent -> <span class="gras">tan(x)</span></li> <li>Tangent -> <span class="gras">tan(x)</span></li>
<li>Cotangent -> <span class="gras">cot(x)</span></li> <li>Cotangent -> <span class="gras">cot(x)</span></li>
<li>Secant -> <span class="gras">sec(x)</span></li> <li>Secant -> <span class="gras">sec(x)</span></li>
<li>Cosecant -> <span class="gras">csc(x)</span></li> <li>Cosecant -> <span class="gras">csc(x)</span></li>
</ul> </ul>
<ul> <ul>
<li>Arc sine -> <span class="gras">arcsin(x)</span> ou <span class="gras">asin(x)</span></li> <li>Arc sine -> <span class="gras">arcsin(x)</span> ou <span class="gras">asin(x)</span></li>
<li>Arc cosine -> <span class="gras">arccos(x)</span> ou <span class="gras">acos(x)</span></li> <li>Arc cosine -> <span class="gras">arccos(x)</span> ou <span class="gras">acos(x)</span></li>
<li>Arc tangent -> <span class="gras">arctan(x)</span> ou <span class="gras">atan(x)</span></li> <li>Arc tangent -> <span class="gras">arctan(x)</span> ou <span class="gras">atan(x)</span></li>
<li>Arc cotangent -> <span class="gras">arccot(x)</span> ou <span class="gras">acot(x)</span></li> <li>Arc cotangent -> <span class="gras">arccot(x)</span> ou <span class="gras">acot(x)</span></li>
</ul> </ul>
<h2>Hyperbolic functions</h2> <h2>Hyperbolic functions</h2>
<ul> <ul>
<li>Hyperbolic sine -> <span class="gras">sinh(x)</span></li> <li>Hyperbolic sine -> <span class="gras">sinh(x)</span></li>
<li>Hyperbolic cosine -> <span class="gras">cosh(x)</span></li> <li>Hyperbolic cosine -> <span class="gras">cosh(x)</span></li>
<li>Hyperbolic tangent -> <span class="gras">tanh(x)</span></li> <li>Hyperbolic tangent -> <span class="gras">tanh(x)</span></li>
<li>Hyperbolic cotangent -> <span class="gras">coth(x)</span></li> <li>Hyperbolic cotangent -> <span class="gras">coth(x)</span></li>
<li>Hyperbolic secant -> <span class="gras">sech(x)</span></li> <li>Hyperbolic secant -> <span class="gras">sech(x)</span></li>
<li>Hyperbolic cosecant -> <span class="gras">csch(x)</span></li> <li>Hyperbolic cosecant -> <span class="gras">csch(x)</span></li>
</ul> </ul>
<ul> <ul>
<li>Hyperbolic arc sine -> <span class="gras">arcsinh(x)</span> or <span class="gras">asinh(x)</span></li> <li>Hyperbolic arc sine -> <span class="gras">arcsinh(x)</span> or <span class="gras">asinh(x)</span></li>
<li>Hyperbolic arc cosine -> <span class="gras">arccosh(x)</span> or <span class="gras">acosh(x)</span></li> <li>Hyperbolic arc cosine -> <span class="gras">arccosh(x)</span> or <span class="gras">acosh(x)</span></li>
<li>Hyperbolic arc tangent -> <span class="gras">arctanh(x)</span> or <span class="gras">atanh(x)</span></li> <li>Hyperbolic arc tangent -> <span class="gras">arctanh(x)</span> or <span class="gras">atanh(x)</span></li>
<li>Hyperbolic arc cotangent -> <span class="gras">arccoth(x)</span> or <span class="gras">acoth(x)</span></li> <li>Hyperbolic arc cotangent -> <span class="gras">arccoth(x)</span> or <span class="gras">acoth(x)</span></li>
</ul> </ul>
<h2>Square roots and degrees</h2> <h2>Square roots and degrees</h2>
<ul> <ul>
<li>Square root -> <span class="gras">sqrt(x)</span></li> <li>Square root -> <span class="gras">sqrt(x)</span></li>
<li>Degree -> <span class="gras">pow(x, y)</span> <span class="texteSecondaire">Variable x to the power y</span></li> <li>Degree -> <span class="gras">pow(x, y)</span> <span class="texteSecondaire">Variable x to the power y</span></li>
<li>Root -> <span class="gras">root(x, y)</span> <span class="texteSecondaire">Root y of x</span></li> <li>Root -> <span class="gras">root(x, y)</span> <span class="texteSecondaire">Root y of x</span></li>
</ul> </ul>
<h2>Exponential and logarithm</h2> <h2>Exponential and logarithm</h2>
<ul> <ul>
<li>e<span style="vertical-align:super;">x</span> -> <span class="gras">exp(x)</span></li> <li>e<span style="vertical-align:super;">x</span> -> <span class="gras">exp(x)</span></li>
<li>Natural logarithm -> <span class="gras">ln(x)</span></li> <li>Natural logarithm -> <span class="gras">ln(x)</span></li>
<li>Decimal logarithm -> <span class="gras">log(x)</span></li> <li>Decimal logarithm -> <span class="gras">log(x)</span></li>
</ul> </ul>
<h2>Absolute number value</h2> <h2>Absolute number value</h2>
<ul> <ul>
<li>|x| -> <span class="gras">abs(x)</span></li> <li>|x| -> <span class="gras">abs(x)</span></li>
</ul> </ul>
<h2>Rounding</h2> <h2>Rounding</h2>
<ul> <ul>
<li><span class="gras">round(x)</span> -> rounding to the nearest whole number</li> <li><span class="gras">round(x)</span> -> rounding to the nearest whole number</li>
<li><span class="gras">ceil(x)</span> -> rounding to the nearest whole number in a big way</li> <li><span class="gras">ceil(x)</span> -> rounding to the nearest whole number in a big way</li>
<li><span class="gras">floor(x)</span> -> rounding to the nearest whole number the smaller side</li> <li><span class="gras">floor(x)</span> -> rounding to the nearest whole number the smaller side</li>
</ul> </ul>
</p> <br/> </p> <br/>
<hr/> <hr/>
<h1>Constants</h1> <h1>Constants</h1>
<p>Also are available some constants:<br/> <p>Also are available some constants:<br/>
<ul> <ul>
<li><span class="gras">pi</span> = 4 * atan(1) ≈ 3,141592653589793</li> <li><span class="gras">pi</span> = 4 * atan(1) ≈ 3,141592653589793</li>
<li><span class="gras">e</span> = exp(1) ≈ 2.718281828459045</li> <li><span class="gras">e</span> = exp(1) ≈ 2.718281828459045</li>
</ul> </ul>
</p> </p>
<br/> <br/>
<hr/> <hr/>
<h1>Keyboard keys</h1> <h1>Keyboard keys</h1>
<p style="font-size:90%;"> <p style="font-size:90%;">
esc -> reset widget <br/> esc -> reset widget <br/>
ctrl + left arrow -> graph will be moved left<br/> ctrl + left arrow -> graph will be moved left<br/>
ctrl + top arrow -> graph will be moved top<br/> ctrl + top arrow -> graph will be moved top<br/>
ctrl + right arrow -> graph will be moved right<br/> ctrl + right arrow -> graph will be moved right<br/>
ctrl + bottom arrow -> graph will be moved bottom<br/> ctrl + bottom arrow -> graph will be moved bottom<br/>
<br/> <br/>
</p> </p>
<br/> <br/>
<input type="button" value="User's guide" onclick="navigateur('Guide_Utilisateur.html')" style="position:absolute;bottom:0px;left:0px;"/> <input type="button" value="User's guide" onclick="navigateur('Guide_Utilisateur.html')" style="position:absolute;bottom:0px;left:0px;"/>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div> </div>
<div id="menuAideExemples" class="menu"> <div id="menuAideExemples" class="menu">
<table class="ongletMenu"> <table class="ongletMenu">
<tr> <tr>
<td onclick='afficherMenu("menuAide")'>Using</td> <td onclick='afficherMenu("menuAide")'>Using</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAideExemples")'>Examples</td> <td class="ongletMenuActuel" onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td onclick='afficherMenu("menuAideAutres")'>Other</td> <td onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr> </tr>
</table> </table>
<div class="contenuMenu avecBordures"> <div class="contenuMenu avecBordures">
<span class="texteSecondaire">(You can view example. Do not forget to set accuracy in options if necessary.)</span> <span class="texteSecondaire">(You can view example. Do not forget to set accuracy in options if necessary.)</span>
<br/><br/> <br/><br/>
<hr/> <hr/>
<h1>Functions 2D</h1> <h1>Functions 2D</h1>
<p> <p>
<span class="survol" onclick="document.getElementById('inputEq').value = '0.5*x+1' ; actualiserGraph()">0.5*x+1</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = '0.5*x+1' ; actualiserGraph()">0.5*x+1</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'pow(x,2)-3' ; actualiserGraph()">pow(x,2)-3</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = 'pow(x,2)-3' ; actualiserGraph()">pow(x,2)-3</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '1/x' ; actualiserGraph()">1/x</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = '1/x' ; actualiserGraph()">1/x</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)' ; actualiserGraph()">atan(x)</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)' ; actualiserGraph()">atan(x)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '(x+1/x)/1.2' ; actualiserGraph()">(x+1/x)/1.2</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = '(x+1/x)/1.2' ; actualiserGraph()">(x+1/x)/1.2</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sin(10*x*x)*0.5' ; actualiserGraph()">sin(10*x*x)*0.5</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = 'sin(10*x*x)*0.5' ; actualiserGraph()">sin(10*x*x)*0.5</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'log(pow(x-2,2))' ; actualiserGraph()">log(pow(x-2,2))</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = 'log(pow(x-2,2))' ; actualiserGraph()">log(pow(x-2,2))</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = '(x*x-5*x+5)*exp(x)/5' ; actualiserGraph()">(x*x-5*x+5)*exp(x)/5</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = '(x*x-5*x+5)*exp(x)/5' ; actualiserGraph()">(x*x-5*x+5)*exp(x)/5</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'random()' ; evaluer('random()')">random()</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = 'random()' ; evaluer('random()')">random()</span> <br/>
</p> </p>
<br/><br/> <br/><br/>
<hr/> <hr/>
<h1>Functions 3D</h1> <h1>Functions 3D</h1>
<p> <p>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sin(x)+cos(y)' ; actualiserGraph()">sin(x)+cos(y)</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = 'sin(x)+cos(y)' ; actualiserGraph()">sin(x)+cos(y)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'sqrt(10-x*x)' ; actualiserGraph()">sqrt(10-x*x)</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = 'sqrt(10-x*x)' ; actualiserGraph()">sqrt(10-x*x)</span> <br/>
<span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)+atan(y)' ; actualiserGraph()">atan(x)+atan(y)</span> <br/> <span class="survol" onclick="document.getElementById('inputEq').value = 'atan(x)+atan(y)' ; actualiserGraph()">atan(x)+atan(y)</span> <br/>
</p> </p>
<br/> <br/>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div> </div>
<div id="menuAideAutres" class="menu"> <div id="menuAideAutres" class="menu">
<table class="ongletMenu"> <table class="ongletMenu">
<tr> <tr>
<td onclick='afficherMenu("menuAide")'>Using</td> <td onclick='afficherMenu("menuAide")'>Using</td>
<td onclick='afficherMenu("menuAideExemples")'>Examples</td> <td onclick='afficherMenu("menuAideExemples")'>Examples</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuAideAutres")'>Other</td> <td class="ongletMenuActuel" onclick='afficherMenu("menuAideAutres")'>Other</td>
</tr> </tr>
</table> </table>
<div class="contenuMenu avecBordures"> <div class="contenuMenu avecBordures">
<h4>Save graph</h4> <h4>Save graph</h4>
In some browsers when used display method "Canvas" you can save graph by clicking it with right mouse button and selecting "Save image". Also you can save 3D-graphs. In some browsers when used display method "Canvas" you can save graph by clicking it with right mouse button and selecting "Save image". Also you can save 3D-graphs.
<br/><br/> <br/><br/>
<h4>Offset</h4> <h4>Offset</h4>
If graph isn't in the right place (larger than canvas) then can you set necessary parameters graph displaying in settings menu. If graph isn't in the right place (larger than canvas) then can you set necessary parameters graph displaying in settings menu.
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div> </div>
<!-- Crédits --> <!-- Crédits -->
<div id="menuCredits" class="menu"> <div id="menuCredits" class="menu">
<div class="contenuMenu" style="text-align:justify;"> <div class="contenuMenu" style="text-align:justify;">
<br/> <br/>
<table id="credits"> <table id="credits">
<tr> <tr>
<td> <td>
<img src="icon.png"/> <img src="icon.png"/>
<h3>Widget is developed by</h3> <h3>Widget is developed by</h3>
Yannick Vessaz <br/> Yannick Vessaz <br/>
<a href='mailto:yannick.vessaz@gmail.com'>yannick.vessaz@gmail.com</a> <a href='mailto:yannick.vessaz@gmail.com'>yannick.vessaz@gmail.com</a>
</td> </td>
</tr> </tr>
</table> </table>
<span class="texteSecondaire"> <span class="texteSecondaire">
<br/><br/> <br/><br/>
If you want to inform about bug, make a proposal or just ask some questions then you can contact to me at the following e-mail: <a href='mailto:yannick.vessaz@gmail.com'>e-mail</a>. If you want to inform about bug, make a proposal or just ask some questions then you can contact to me at the following e-mail: <a href='mailto:yannick.vessaz@gmail.com'>e-mail</a>.
<br/><br/> <br/><br/>
If you want to change background design then you can contact at following address: <a href="http://kde.org">KDE</a>. If you want to change background design then you can contact at following address: <a href="http://kde.org">KDE</a>.
</span> </span>
<span id="version" class="texteSecondaire" style="position:absolute;bottom:10px;left:15px;">version 1.3</span> <span id="version" class="texteSecondaire" style="position:absolute;bottom:10px;left:15px;">version 1.3</span>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div> </div>
<!-- Outils --> <!-- Outils -->
<div id="menuOutils" class="menu"> <div id="menuOutils" class="menu">
<div class="contenuMenu"> <div class="contenuMenu">
<h3 style="margin-top:0px; margin-bottom:15px;">Tools</h3> <h3 style="margin-top:0px; margin-bottom:15px;">Tools</h3>
Mouse events:<br/> Mouse events:<br/>
<input type="button" class="choixOutil" onclick="choixOutil('deplacement');cacherMenu()" value="Moving"/> <input type="button" class="choixOutil" onclick="choixOutil('deplacement');cacherMenu()" value="Moving"/>
<input type="button" class="choixOutil" onclick="choixOutil('tangente');cacherMenu()" value="Tangente"/> <input type="button" class="choixOutil" onclick="choixOutil('tangente');cacherMenu()" value="Tangente"/>
<input type="button" class="choixOutil" onclick="choixOutil('point');cacherMenu()" value="Point"/> <input type="button" class="choixOutil" onclick="choixOutil('point');cacherMenu()" value="Point"/>
<br/><br/> <br/><br/>
Derivative:<br/> Derivative:<br/>
<label for="checkDerivee"> f'(x) </label><input type="checkbox" id="checkDerivee" onclick="actualiserGraph()"/><label for="checkDerivee2"> f''(x) </label><input type="checkbox" id="checkDerivee2" onclick="actualiserGraph()"/> <label for="checkDerivee"> f'(x) </label><input type="checkbox" id="checkDerivee" onclick="actualiserGraph()"/><label for="checkDerivee2"> f''(x) </label><input type="checkbox" id="checkDerivee2" onclick="actualiserGraph()"/>
<br/><br/> <br/><br/>
Square under function:<br/> Square under function:<br/>
From <input value="-5" class="smallInput" id="aireG"/> to <input value="5" class="smallInput" id="aireD"/> <input type="button" onclick='calculerAire()' value="Calculate"/> <span id="outputAire"></span> From <input value="-5" class="smallInput" id="aireG"/> to <input value="5" class="smallInput" id="aireD"/> <input type="button" onclick='calculerAire()' value="Calculate"/> <span id="outputAire"></span>
<div style="float: right;"><label for="checkAire">Draw </label><input type="checkbox" id="checkAire" onclick="actualiserGraph()"/></div> <div style="float: right;"><label for="checkAire">Draw </label><input type="checkbox" id="checkAire" onclick="actualiserGraph()"/></div>
<br/><br/> <br/><br/>
Calculate the point on the function:<br/> Calculate the point on the function:<br/>
x=<input value="0" class="smallInput" id="inputX" onkeypress='if(event.keyCode==13) execute(document.getElementById("inputEq").value)'/> x=<input value="0" class="smallInput" id="inputX" onkeypress='if(event.keyCode==13) execute(document.getElementById("inputEq").value)'/>
<input type="button" onclick='execute(document.getElementById("inputEq").value)' value="Estimate"/> <input type="button" onclick='execute(document.getElementById("inputEq").value)' value="Estimate"/>
<span id="outputX"></span> <span id="outputX"></span>
<br/><br/> <br/><br/>
Analysis of function: <br/> Analysis of function: <br/>
f(x) = <span id="etudeFct"></span> <input type="button" value="Start to analysis" onclick='etudier(document.getElementById("inputEq").value);afficherMenu("menuEtude")'/> f(x) = <span id="etudeFct"></span> <input type="button" value="Start to analysis" onclick='etudier(document.getElementById("inputEq").value);afficherMenu("menuEtude")'/>
<br/><br/> <br/><br/>
Display test:<br/> Display test:<br/>
<input type="button" onclick='cacherMenu(); testXPM()' value="Test XPM"/><input type="button" onclick='cacherMenu(); testSVG()' value="Test SVG"/><input type="button" onclick='cacherMenu(); testCanvas()' value="Test Canvas"/> <input type="button" onclick='cacherMenu(); testXPM()' value="Test XPM"/><input type="button" onclick='cacherMenu(); testSVG()' value="Test SVG"/><input type="button" onclick='cacherMenu(); testCanvas()' value="Test Canvas"/>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div> </div>
<!--Etude de fonction --> <!--Etude de fonction -->
<div id="menuEtude" class="menu"> <div id="menuEtude" class="menu">
<div class="contenuMenu"> <div class="contenuMenu">
<h3>Analysis of function in the</h3> <h3>Analysis of function in the</h3>
Set of definitions : <span id="etudeEDF">...</span> <br/> Set of definitions : <span id="etudeEDF">...</span> <br/>
Parity : <span id="etudeParite">...</span> <br/> Parity : <span id="etudeParite">...</span> <br/>
Zeros of functions : <span id="etudeZeros">...</span> <br/> Zeros of functions : <span id="etudeZeros">...</span> <br/>
<table> <table>
<tr id="etudeSigne"> <tr id="etudeSigne">
<td>Sign : ...</td> <td>Sign : ...</td>
</tr> </tr>
</table> </table>
Asymptotes <br/> Asymptotes <br/>
AH left : <span id="etudeAHG">...</span> <br/> AH left : <span id="etudeAHG">...</span> <br/>
AH right : <span id="etudeAHD">...</span> <br/> AH right : <span id="etudeAHD">...</span> <br/>
AV : <span id="etudeAV">...</span> AV : <span id="etudeAV">...</span>
<span id="etudeMin">...</span> <span id="etudeMin">...</span>
<span id="etudeMax">...</span> <span id="etudeMax">...</span>
<span id="etudeI">...</span> <br/><br/> <span id="etudeI">...</span> <br/><br/>
<span class="texteSecondaire" style="font-size:10px;">Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.</span> <span class="texteSecondaire" style="font-size:10px;">Tool for analysis of function is not reliable on 100%. Don't forget check results of analysis before use it.</span>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick="etudier(document.getElementById('inputEq').value)" value="Actualize" style="position:relative;right:310px;"/> <input type="button" onclick='cacherMenu()' value="Cancel"/></div> <div class="barreBasMenu"><input type="button" onclick="etudier(document.getElementById('inputEq').value)" value="Actualize" style="position:relative;right:310px;"/> <input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div> </div>
<!-- Fonctions multiples --> <!-- Fonctions multiples -->
<div id="menuFonctions" class="menu"> <div id="menuFonctions" class="menu">
<table class="ongletMenu"> <table class="ongletMenu">
<tr> <tr>
<td class="ongletMenuActuel" onclick='afficherMenu("menuFonctions")'>Functions</td> <td class="ongletMenuActuel" onclick='afficherMenu("menuFonctions")'>Functions</td>
<td onclick='afficherMenu("menuHistorique")'>History</td> <td onclick='afficherMenu("menuHistorique")'>History</td>
</tr> </tr>
</table> </table>
<div class="contenuMenu avecBordures"> <div class="contenuMenu avecBordures">
<em>Current</em><br/> <em>Current</em><br/>
f(x) = <span id="fonctionActuelle">x</span> <input type="button" value="+" onclick="ajouterFonction(document.getElementById('fonctionActuelle').innerHTML)"/> f(x) = <span id="fonctionActuelle">x</span> <input type="button" value="+" onclick="ajouterFonction(document.getElementById('fonctionActuelle').innerHTML)"/>
<br/><br/> <br/><br/>
<em>Additional</em><br/> <em>Additional</em><br/>
<span id="fonctionsSupp">n/a ...</span> <span id="fonctionsSupp">n/a ...</span>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div> </div>
<!-- Historique --> <!-- Historique -->
<div id="menuHistorique" class="menu"> <div id="menuHistorique" class="menu">
<table class="ongletMenu"> <table class="ongletMenu">
<tr> <tr>
<td onclick='afficherMenu("menuFonctions")'>Functions</td> <td onclick='afficherMenu("menuFonctions")'>Functions</td>
<td class="ongletMenuActuel" onclick='afficherMenu("menuHistorique")'>History</td> <td class="ongletMenuActuel" onclick='afficherMenu("menuHistorique")'>History</td>
</tr> </tr>
</table> </table>
<div class="contenuMenu avecBordures" id="divHistorique"> <div class="contenuMenu avecBordures" id="divHistorique">
<span id="spanHistorique"></span> <span id="spanHistorique"></span>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div> <div class="barreBasMenu"><input type="button" onclick='cacherMenu()' value="Cancel"/></div>
</div> </div>
<!-- Couleur --> <!-- Couleur -->
<div id="menuCouleur" class="menu"> <div id="menuCouleur" class="menu">
<div class="contenuMenu"> <div class="contenuMenu">
<em>Choosing the color:</em> <br/><br/> <em>Choosing the color:</em> <br/><br/>
<div id="colorSV" onmousemove="if(mouseDown==true){colorSV(event)}" onmousedown="colorSV(event); mouseDown = true" onmouseup="mouseDown = false"> <div id="colorSV" onmousemove="if(mouseDown==true){colorSV(event)}" onmousedown="colorSV(event); mouseDown = true" onmouseup="mouseDown = false">
<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg:defs id="defs1"> <svg:defs id="defs1">
<svg:linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="0%"> <svg:linearGradient id="linearGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
<svg:stop <svg:stop
style="stop-color:#000000;stop-opacity:1;" style="stop-color:#000000;stop-opacity:1;"
offset="0%" /> offset="0%" />
<svg:stop <svg:stop
style="stop-color:#000000;stop-opacity:0;" style="stop-color:#000000;stop-opacity:0;"
offset="100%" /> offset="100%" />
</svg:linearGradient> </svg:linearGradient>
<svg:linearGradient id="linearGradient2" x1="0%" y1="0%" x2="0%" y2="100%"> <svg:linearGradient id="linearGradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<svg:stop <svg:stop
style="stop-color:#ffffff;stop-opacity:0;" style="stop-color:#ffffff;stop-opacity:0;"
offset="0%" /> offset="0%" />
<svg:stop <svg:stop
style="stop-color:#ffffff;stop-opacity:1;" style="stop-color:#ffffff;stop-opacity:1;"
offset="100%" /> offset="100%" />
</svg:linearGradient> </svg:linearGradient>
</svg:defs> </svg:defs>
<svg:rect <svg:rect
style="fill:url(#linearGradient2);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" style="fill:url(#linearGradient2);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255" width="255"
height="255" height="255"
x="0" x="0"
y="0" y="0"
ry="0" /> ry="0" />
<svg:rect <svg:rect
style="fill:url(#linearGradient1);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" style="fill:url(#linearGradient1);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255" width="255"
height="255" height="255"
x="0" x="0"
y="0" y="0"
ry="0" /> ry="0" />
<svg:line <svg:line
id="ligneValeur" id="ligneValeur"
x1="255" x1="255"
y1="0" y1="0"
x2="255" x2="255"
y2="255" y2="255"
style="stroke:rgb(0,0,0);stroke-width:2"/> style="stroke:rgb(0,0,0);stroke-width:2"/>
<svg:line <svg:line
id="ligneSaturation" id="ligneSaturation"
x1="0" x1="0"
y1="0" y1="0"
x2="255" x2="255"
y2="0" y2="0"
style="stroke:rgb(0,0,0);stroke-width:2"/> style="stroke:rgb(0,0,0);stroke-width:2"/>
</svg:svg> </svg:svg>
</div> </div>
<div id="colorT" onmousemove="if(mouseDown==true){colorT(event)}" onmousedown="colorT(event); mouseDown = true" onmouseup="mouseDown = false"> <div id="colorT" onmousemove="if(mouseDown==true){colorT(event)}" onmousedown="colorT(event); mouseDown = true" onmouseup="mouseDown = false">
<svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <svg:svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<svg:defs id="defs2"> <svg:defs id="defs2">
<svg:linearGradient id="linearGradient3" x1="0%" y1="100%" x2="0%" y2="0%"> <svg:linearGradient id="linearGradient3" x1="0%" y1="100%" x2="0%" y2="0%">
<svg:stop <svg:stop
style="stop-color:#ff0000;stop-opacity:1;" style="stop-color:#ff0000;stop-opacity:1;"
offset="0%" /> offset="0%" />
<svg:stop <svg:stop
style="stop-color:#ff00ff;stop-opacity:1;" style="stop-color:#ff00ff;stop-opacity:1;"
offset="16.66%" /> offset="16.66%" />
<svg:stop <svg:stop
style="stop-color:#0000ff;stop-opacity:1;" style="stop-color:#0000ff;stop-opacity:1;"
offset="33.33%" /> offset="33.33%" />
<svg:stop <svg:stop
style="stop-color:#00ffff;stop-opacity:1;" style="stop-color:#00ffff;stop-opacity:1;"
offset="50%" /> offset="50%" />
<svg:stop <svg:stop
style="stop-color:#00ff00;stop-opacity:1;" style="stop-color:#00ff00;stop-opacity:1;"
offset="66.66%" /> offset="66.66%" />
<svg:stop <svg:stop
style="stop-color:#ffff00;stop-opacity:1;" style="stop-color:#ffff00;stop-opacity:1;"
offset="83.33%" /> offset="83.33%" />
<svg:stop <svg:stop
style="stop-color:#ff0000;stop-opacity:1;" style="stop-color:#ff0000;stop-opacity:1;"
offset="100%" /> offset="100%" />
</svg:linearGradient> </svg:linearGradient>
</svg:defs> </svg:defs>
<svg:rect <svg:rect
style="fill:url(#linearGradient3);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1" style="fill:url(#linearGradient3);fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
width="255" width="255"
height="255" height="255"
x="0" x="0"
y="0" y="0"
ry="0" /> ry="0" />
<svg:line <svg:line
id="ligneTeinte" id="ligneTeinte"
x1="0" x1="0"
y1="0" y1="0"
x2="20" x2="20"
y2="0" y2="0"
style="stroke:rgb(0,0,0);stroke-width:2"/> style="stroke:rgb(0,0,0);stroke-width:2"/>
</svg:svg> </svg:svg>
</div> </div>
<table id="colorValues"> <table id="colorValues">
<tr> <tr>
<td>Color: </td><td><input id="inputTeinte" class="smallInput" value="0" onkeypress=''/></td> <td>Color: </td><td><input id="inputTeinte" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr> </tr><tr>
<td>Value: </td><td><input id="inputValeur" class="smallInput" value="0" onkeypress=''/></td> <td>Value: </td><td><input id="inputValeur" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr> </tr><tr>
<td>Saturation: </td><td><input id="inputSaturation" class="smallInput" value="0" onkeypress=''/></td> <td>Saturation: </td><td><input id="inputSaturation" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr> </tr><tr>
<td>Red: </td><td><input id="inputRouge" class="smallInput" value="255" onkeypress=''/></td> <td>Red: </td><td><input id="inputRouge" class="smallInput" value="255" onkeypress=''/></td>
</tr><tr> </tr><tr>
<td>Green: </td><td><input id="inputVert" class="smallInput" value="0" onkeypress=''/></td> <td>Green: </td><td><input id="inputVert" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr> </tr><tr>
<td>Blue: </td><td><input id="inputBleu" class="smallInput" value="0" onkeypress=''/></td> <td>Blue: </td><td><input id="inputBleu" class="smallInput" value="0" onkeypress=''/></td>
</tr><tr> </tr><tr>
<td>Opacity: </td><td><input id="inputOpacity" class="smallInput" value="1" onkeypress=''/></td> <td>Opacity: </td><td><input id="inputOpacity" class="smallInput" value="1" onkeypress=''/></td>
</tr><!--<tr> </tr><!--<tr>
<td><input id="inputCouleur" style="width: 70%" value="cyan" onkeypress='couleurFonction = this.value; if(event.keyCode==13) actualiserGraph()'/></td> <td><input id="inputCouleur" style="width: 70%" value="cyan" onkeypress='couleurFonction = this.value; if(event.keyCode==13) actualiserGraph()'/></td>
</tr>--> </tr>-->
</table> </table>
<div id="apercuCouleur" title="New Color"></div><div id="apercuCouleur2" title="Old Color"></div> <div id="apercuCouleur" title="New Color"></div><div id="apercuCouleur2" title="Old Color"></div>
</div> </div>
<div class="barreBasMenu"><input type="button" onclick="if(idColor=='buttonColor'){cacherMenu()}else{afficherMenu('menuFonctions')}; actualiserGraph()" value="Check"/></div> <div class="barreBasMenu"><input type="button" onclick="if(idColor=='buttonColor'){cacherMenu()}else{afficherMenu('menuFonctions')}; actualiserGraph()" value="Check"/></div>
</div> </div>
<!-- Erreurs Fonctions interdites --> <!-- Erreurs Fonctions interdites -->
<div id="fctInterdite" class="miniMenu"> <div id="fctInterdite" class="miniMenu">
<br/> <br/>
<h1>------- Error -------</h1> <h1>------- Error -------</h1>
<br/> <br/>
Impossible to draw the function ... Impossible to draw the function ...
<br/><br/> <br/><br/>
Error in expression or unexpected char: <br/> Error in expression or unexpected char: <br/>
<span id="spanFctInterdite" style="font-style:italic;"></span> <span id="spanFctInterdite" style="font-style:italic;"></span>
<br/><br/> <br/><br/>
<input type="button" onclick="cacherMenu()" value="Ok"/> <input type="button" onclick="cacherMenu()" value="Ok"/>
</div> </div>
<!-- Autres erreurs --> <!-- Autres erreurs -->
<div id="erreurFct" class="miniMenu"> <div id="erreurFct" class="miniMenu">
<h1>------- Error -------</h1> <h1>------- Error -------</h1>
Runtime error! Check your function and try to draw it again. Runtime error! Check your function and try to draw it again.
<br/> <br/>
Description and parameters various functions which are available to help. Description and parameters various functions which are available to help.
<br/><br/> <br/><br/>
<input type="button" onclick="afficherMenu('menuAide')" value="Help"/> <input type="button" onclick="afficherMenu('menuAide')" value="Help"/>
<input type="button" onclick="cacherMenu()" value="Ok"/> <input type="button" onclick="cacherMenu()" value="Ok"/>
</div> </div>
<!-- Menu des mises à jour --> <!-- Menu des mises à jour -->
<div id="mAj" class="menu"> <div id="mAj" class="menu">
<h1>Updated</h1> <h1>Updated</h1>
Current version: <br/><span id="thisVersion"></span><br/> Current version: <br/><span id="thisVersion"></span><br/>
The last on-line version: <br/><span id="newVersion"></span><br/> The last on-line version: <br/><span id="newVersion"></span><br/>
<br/> <br/>
This widget is available to using on web-site: <em>http://gyb.educanet2.ch/tm-widgets/yannick</em><br/> This widget is available to using on web-site: <em>http://gyb.educanet2.ch/tm-widgets/yannick</em><br/>
<br/> <br/>
</div> </div>
<!-- Erreur mise à jour --> <!-- Erreur mise à jour -->
<div id="erreurMaJ" class="miniMenu"> <div id="erreurMaJ" class="miniMenu">
<br/> <br/>
<h1>------- Error -------</h1> <h1>------- Error -------</h1>
<br/><br/> <br/><br/>
Update to latest version is not available because you already use the latest version. Update to latest version is not available because you already use the latest version.
<br/><br/><br/> <br/><br/><br/>
<input type="button" onclick="cacherMenu()" value="Ok"/> <input type="button" onclick="cacherMenu()" value="Ok"/>
</div> </div>
<!-- Info options sauvegardées --> <!-- Info options sauvegardées -->
<div id="infoSauvegarde" class="alertMenu"> <div id="infoSauvegarde" class="alertMenu">
<br/> <br/>
<h1>Options saved!</h1> <h1>Options saved!</h1>
<br/> <br/>
<input type="button" onclick="document.getElementById('infoSauvegarde').style.display = 'none'" value="Ok"/> <input type="button" onclick="document.getElementById('infoSauvegarde').style.display = 'none'" value="Ok"/>
</div> </div>
<!-- ..... Flèches de déplacement ..... --> <!-- ..... Flèches de déplacement ..... -->
<div class="flecheDeplacement" id="flecheHaut" onclick="if(fonction3D){zoom3D(1.25)}else{deplacerY(1)}" onmousemove="sourisMove(event)"></div> <div class="flecheDeplacement" id="flecheHaut" onclick="if(fonction3D){zoom3D(1.25)}else{deplacerY(1)}" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheGauche" onclick="deplacerX(-1)" onmousemove="sourisMove(event)"></div> <div class="flecheDeplacement" id="flecheGauche" onclick="deplacerX(-1)" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheBas" onclick="if(fonction3D){zoom3D(0.8)}else{deplacerY(-1)}" onmousemove="sourisMove(event)"></div> <div class="flecheDeplacement" id="flecheBas" onclick="if(fonction3D){zoom3D(0.8)}else{deplacerY(-1)}" onmousemove="sourisMove(event)"></div>
<div class="flecheDeplacement" id="flecheDroite" onclick="deplacerX(1)" onmousemove="sourisMove(event)"></div> <div class="flecheDeplacement" id="flecheDroite" onclick="deplacerX(1)" onmousemove="sourisMove(event)"></div>
<!-- ..... Bas du Widget ..... --> <!-- ..... Bas du Widget ..... -->
<div class="info" id="info"></div> <div class="info" id="info"></div>
<div id="point">o</div> <div id="point">o</div>
<div id="tangente"></div> <div id="tangente"></div>
<!-- .... Autres .... --> <!-- .... Autres .... -->
<div id="onglet3D" onclick="activer3D()">3D</div> <div id="onglet3D" onclick="activer3D()">3D</div>
</body> </body>
<!-- .............................. Widget réalisé par Yannick Vessaz .............................. --> <!-- .............................. Widget réalisé par Yannick Vessaz .............................. -->
<!-- .............................. e-mail: yannick.vessaz@gmail.com .............................. --> <!-- .............................. e-mail: yannick.vessaz@gmail.com .............................. -->
</html> </html>
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#include <QRegExp> #include <QRegExp>
#include <QSvgGenerator> #include <QSvgGenerator>
#include <QSvgRenderer> #include <QSvgRenderer>
#include "UBCFFSubsetAdaptor.h"
#include "core/UBPersistenceManager.h" #include "core/UBPersistenceManager.h"
#include "document/UBDocumentProxy.h" #include "document/UBDocumentProxy.h"
#include "domain/UBItem.h" #include "domain/UBItem.h"
#include "domain/UBGraphicsPolygonItem.h" #include "domain/UBGraphicsPolygonItem.h"
#include "domain/UBGraphicsStroke.h" #include "domain/UBGraphicsStroke.h"
#include "domain/UBGraphicsTextItem.h"
#include "domain/UBGraphicsSvgItem.h"
#include "UBCFFSubsetAdaptor.h"
#include "UBMetadataDcSubsetAdaptor.h" #include "UBMetadataDcSubsetAdaptor.h"
#include "UBThumbnailAdaptor.h" #include "UBThumbnailAdaptor.h"
#include "UBSvgSubsetAdaptor.h" #include "UBSvgSubsetAdaptor.h"
...@@ -19,32 +35,42 @@ ...@@ -19,32 +35,42 @@
//tag names definition //tag names definition
//use them everiwhere! //use them everiwhere!
static char* tElement = "element"; static QString tElement = "element";
static char* tEllipse = "ellipse"; static QString tEllipse = "ellipse";
static char* tIwb = "iwb"; static QString tIwb = "iwb";
static char* tMeta = "meta"; static QString tMeta = "meta";
static char* tPage = "page"; static QString tPage = "page";
static char* tPageset = "pageset"; static QString tPageset = "pageset";
static char* tPolygon = "polygon"; static QString tPolygon = "polygon";
static char* tRect = "rect"; static QString tRect = "rect";
static char* tSvg = "svg"; static QString tSvg = "svg";
static char* tTextarea = "textarea"; static QString tText = "text";
static QString tTextarea = "textarea";
static QString tTspan = "tspan";
static QString tBreak = "tbreak";
//attribute names definition //attribute names definition
static char* aFill = "fill"; static QString aFill = "fill";
static char* aFillopacity = "fill-opacity"; static QString aFillopacity = "fill-opacity";
static char* aX = "x"; static QString aX = "x";
static char* aY = "y"; static QString aY = "y";
static char* aWidth = "width"; static QString aWidth = "width";
static char* aHeight = "height"; static QString aHeight = "height";
static char* aStroke = "stroke"; static QString aStroke = "stroke";
static char* aStrokewidth = "stroke-width"; static QString aStrokewidth = "stroke-width";
static char* aCx = "cx"; static QString aCx = "cx";
static char* aCy = "cy"; static QString aCy = "cy";
static char* aRx = "rx"; static QString aRx = "rx";
static char* aRy = "ry"; static QString aRy = "ry";
static char* aTransform = "transform"; static QString aTransform = "transform";
static char* aViewbox = "viewbox"; static QString aViewbox = "viewbox";
static QString aFontSize = "font-size";
static QString aFontfamily = "font-family";
static QString aFontstretch = "font-stretch";
static QString aFontstyle = "font-style";
static QString aFontweight = "font-weight";
static QString aTextalign = "text-align";
UBCFFSubsetAdaptor::UBCFFSubsetAdaptor() UBCFFSubsetAdaptor::UBCFFSubsetAdaptor()
{ {
...@@ -82,10 +108,8 @@ bool UBCFFSubsetAdaptor::ConvertCFFFileToUbz(QString &cffSourceFile, UBDocumentP ...@@ -82,10 +108,8 @@ bool UBCFFSubsetAdaptor::ConvertCFFFileToUbz(QString &cffSourceFile, UBDocumentP
UBCFFSubsetAdaptor::UBCFFSubsetReader::UBCFFSubsetReader(UBDocumentProxy *proxy, QByteArray &content): UBCFFSubsetAdaptor::UBCFFSubsetReader::UBCFFSubsetReader(UBDocumentProxy *proxy, QByteArray &content):
mReader(content), mProxy(proxy), currentState(NONE) mReader(content), mProxy(proxy), currentState(NONE)
{ {
//TODO parse
} }
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parse() bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parse()
{ {
UBMetadataDcSubsetAdaptor::persist(mProxy); UBMetadataDcSubsetAdaptor::persist(mProxy);
...@@ -187,6 +211,12 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseCurrentElementStart() ...@@ -187,6 +211,12 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseCurrentElementStart()
return false; return false;
} }
else else
if ( elName == tText)
{
if (!parseText())
return false;
}
else
if ( elName == tTextarea) if ( elName == tTextarea)
{ {
if (!parseTextArea()) if (!parseTextArea())
...@@ -300,6 +330,37 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseSvg() ...@@ -300,6 +330,37 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseSvg()
return true; return true;
} }
void UBCFFSubsetAdaptor::UBCFFSubsetReader::repositionSvgItem(UBGraphicsSvgItem *item, qreal width, qreal height, qreal x, qreal y, bool useTransform, QTransform &transform)
{
QTransform curTrans = item->transform();
qWarning() << QString().sprintf("Item current transform = %f 0 0 %f %f %f, position %f, %f", curTrans.m11(), curTrans.m22(), curTrans.dx(), curTrans.dy(), item->x(), item->y());
//check if rect is rotated
//rotate svg item itself
QRectF itemBounds = item->boundingRect();
//first, svg is mapped to svg item bound
//second, svg item is mapped to scene
//so, get svg to svg item scale and multiple by scene scale
qreal hScale = itemBounds.width() / width * curTrans.m11();
qreal vScale = itemBounds.height() / height * curTrans.m22();
if (useTransform)
{
QPointF oldVector((x - transform.dx()), (y - transform.dy()));
QTransform rTransform(transform.m11(), transform.m12(), transform.m21(), transform.m22(), 0, 0);
QPointF newVector = rTransform.map(oldVector);
rTransform.scale(curTrans.m11(), curTrans.m22());
item->setTransform(QTransform(rTransform.m11(), rTransform.m12(), rTransform.m21(), rTransform.m22(), 0, 0));
item->setPos((x - mViewBoxCenter.x() + (newVector - oldVector).x()) * hScale, (y - mViewBoxCenter.y() + (newVector - oldVector).y()) * vScale );
}
else
{
item->setPos((x - mViewBoxCenter.x()) * hScale, (y - mViewBoxCenter.y()) * vScale);
}
QTransform newTrans = item->transform();
qWarning() << QString("Item new transform = %3 0 0 %4 %1 %2, position %5, %6").arg(newTrans.dx()).arg(newTrans.dy()).arg(newTrans.m11()).arg(newTrans.m22()).arg(item->x()).arg(item->y());
}
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect() bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect()
{ {
if (currentState != SVG && currentState != PAGE) if (currentState != SVG && currentState != PAGE)
...@@ -312,11 +373,6 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect() ...@@ -312,11 +373,6 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect()
if (currentState == SVG && mCurrentScene == NULL) if (currentState == SVG && mCurrentScene == NULL)
createNewScene(); createNewScene();
//fill and stroke color
QColor fillColor = colorFromString(mReader.attributes().value(aFill).toString());
QColor strokeColor = colorFromString(mReader.attributes().value(aStroke).toString());
int strokeWidth = mReader.attributes().value(aStrokewidth).toString().toInt();
//rect lef top corner coordinates //rect lef top corner coordinates
qreal x1 = mReader.attributes().value(aX).toString().toDouble(); qreal x1 = mReader.attributes().value(aX).toString().toDouble();
qreal y1 = mReader.attributes().value(aY).toString().toDouble(); qreal y1 = mReader.attributes().value(aY).toString().toDouble();
...@@ -325,34 +381,41 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect() ...@@ -325,34 +381,41 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseRect()
qreal height = mReader.attributes().value(aHeight).toString().toDouble(); qreal height = mReader.attributes().value(aHeight).toString().toDouble();
//init svg generator with temp file //init svg generator with temp file
QSvgGenerator *generator = createSvgGenerator(); QSvgGenerator *generator = createSvgGenerator(width + 10, height + 10);
//init painter to paint to svg //init painter to paint to svg
QPainter painter; QPainter painter;
painter.begin(generator); painter.begin(generator);
//check if rect is rotated //fill rect
if (mReader.attributes().hasAttribute(aTransform)) if (mReader.attributes().hasAttribute(aFill))
{ {
QTransform transform = transformFromString(mReader.attributes().value(aTransform).toString()); QColor fillColor = colorFromString(mReader.attributes().value(aFill).toString());
painter.setTransform(transform); painter.setBrush(QBrush(fillColor));
//change left top coordinates to correspond to transformation painter.fillRect(5, 5, width, height, fillColor);
x1 -= transform.dx();
y1 -= transform.dy();
} }
painter.setBrush(QBrush(fillColor)); bool hasStrokeColor = mReader.attributes().hasAttribute(aStroke);
painter.fillRect(x1, y1, width, height, fillColor); bool hasStrokeWidth = mReader.attributes().hasAttribute(aStrokewidth);
if (hasStrokeColor || hasStrokeWidth)
QPen pen(strokeColor); {
pen.setWidth(strokeWidth); QPen pen;
painter.setPen(pen); if (hasStrokeColor)
painter.drawRect(x1, y1, width, height); pen.setColor(colorFromString(mReader.attributes().value(aStroke).toString()));
if (hasStrokeWidth)
pen.setWidth(mReader.attributes().value(aStrokewidth).toString().toInt());
painter.setPen(pen);
painter.drawRect(5, 5, width, height);
}
painter.end(); painter.end();
//add resulting svg file to scene //add resulting svg file to scene
mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName())); UBGraphicsSvgItem *svgItem = mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
QTransform transform;
bool hastransform = getCurElementTransorm(transform);
repositionSvgItem(svgItem, width + 10, height + 10, x1 - 5, y1 - 5, hastransform, transform);
delete generator; delete generator;
return true; return true;
...@@ -370,7 +433,10 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseEllipse() ...@@ -370,7 +433,10 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseEllipse()
if (currentState == SVG && mCurrentScene == NULL) if (currentState == SVG && mCurrentScene == NULL)
createNewScene(); createNewScene();
QSvgGenerator *generator = createSvgGenerator(); //ellipse horisontal and vertical radius
qreal rx = mReader.attributes().value(aRx).toString().toDouble();
qreal ry = mReader.attributes().value(aRy).toString().toDouble();
QSvgGenerator *generator = createSvgGenerator(rx * 2 + 10, ry * 2 + 10);
//fill and stroke color //fill and stroke color
QColor fillColor = colorFromString(mReader.attributes().value(aFill).toString()); QColor fillColor = colorFromString(mReader.attributes().value(aFill).toString());
...@@ -380,44 +446,33 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseEllipse() ...@@ -380,44 +446,33 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseEllipse()
//ellipse center coordinates //ellipse center coordinates
qreal cx = mReader.attributes().value(aCx).toString().toDouble(); qreal cx = mReader.attributes().value(aCx).toString().toDouble();
qreal cy = mReader.attributes().value(aCy).toString().toDouble(); qreal cy = mReader.attributes().value(aCy).toString().toDouble();
//ellipse horisontal and vertical radius
qreal rx = mReader.attributes().value(aRx).toString().toDouble();
qreal ry = mReader.attributes().value(aRy).toString().toDouble();
//we should change cx and cy by rx and ry because qpainter
//draws ellipse by its rect coordinates
cx -= rx;
cy -= ry;
//init painter to paint to svg //init painter to paint to svg
QPainter painter; QPainter painter;
painter.begin(generator); painter.begin(generator);
//check if ellipse is rotated
if (mReader.attributes().hasAttribute(aTransform))
{
QTransform transform = transformFromString(mReader.attributes().value(aTransform).toString());
painter.setTransform(transform);
//change cx and cy to correspond to transformation
cx -= transform.dx();
cy -= transform.dy();
}
QPen pen(strokeColor); QPen pen(strokeColor);
pen.setWidth(strokeWidth); pen.setWidth(strokeWidth);
painter.setPen(pen); painter.setPen(pen);
painter.setBrush(QBrush(fillColor)); painter.setBrush(QBrush(fillColor));
painter.drawEllipse(cx, cy, rx * 2, ry * 2); painter.drawEllipse(5, 5, rx * 2, ry * 2);
painter.end(); painter.end();
//add resulting svg file to scene //add resulting svg file to scene
mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName())); UBGraphicsSvgItem *svgItem = mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
QTransform transform;
bool hasTransform = getCurElementTransorm(transform);
repositionSvgItem(svgItem, rx * 2 + 10, ry * 2 + 10, cx - rx - 5, cy - ry -5, hasTransform, transform);
delete generator; delete generator;
return true; return true;
} }
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseTextArea() bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseTextArea()
{ {
...@@ -431,6 +486,254 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseTextArea() ...@@ -431,6 +486,254 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseTextArea()
if (currentState == SVG && mCurrentScene == NULL) if (currentState == SVG && mCurrentScene == NULL)
createNewScene(); createNewScene();
//TODO textarea node
qreal x = mReader.attributes().value(aX).toString().toDouble();
qreal y = mReader.attributes().value(aY).toString().toDouble();
qreal width = mReader.attributes().value(aWidth).toString().toDouble();
qreal height = mReader.attributes().value(aHeight).toString().toDouble();
qWarning() << QString().sprintf("Text coordinates : %f,%f. Text size %f,%f", x, y, width, height);
qreal fontSize = 12.0;
QColor fontColor;
QString fontFamily = "Arial";
QString fontStretch = "normal";
bool italic = false;
int fontWeight = QFont::Normal;
int textAlign = Qt::AlignLeft;
QTransform fontTransform;
parseTextAttributes(fontSize, fontColor, fontFamily, fontStretch, italic, fontWeight, textAlign, fontTransform);
QSvgGenerator *generator = createSvgGenerator(width, height);
QPainter painter;
painter.begin(generator);
painter.setFont(QFont(fontFamily, fontSize, fontWeight, italic));
qreal curY = 0.0;
qreal curX = 0.0;
qreal linespacing = QFontMetricsF(painter.font()).leading();
//remember if text area has transform
QString transformString;
QTransform transform;
bool hasTransform = getCurElementTransorm(transform);
QRectF lastDrawnTextBoundingRect;
//parse text area tags
while(true)
{
mReader.readNext();
QStringRef elementName = mReader.name();
if (mReader.isEndDocument())
break;
if (mReader.isEndElement() && elementName == tBreak)
{
//when tbreak appers, move down by the drawn rect height
//TODO: line spacing is not calculated yet, additional code is required
curY += lastDrawnTextBoundingRect.height() + linespacing;
curX = 0.0;
lastDrawnTextBoundingRect = QRectF(0,0,0,0);
continue;
}
if (mReader.isEndElement() && elementName == tTextarea)
break;
if (mReader.isStartElement() && elementName == tTspan)
{
parseTextAttributes(fontSize, fontColor, fontFamily, fontStretch, italic, fontWeight, textAlign, fontTransform);
painter.setFont(QFont(fontFamily, fontSize, fontWeight, italic));
painter.setPen(fontColor);
linespacing = QFontMetricsF(painter.font()).leading();
continue;
}
if (mReader.isCharacters() || mReader.isCDATA())
{
QString text = mReader.text().toString().trimmed();
//skip empty text
if (text.length() == 0)
continue;
//get bounding rect to obtain desired text height
lastDrawnTextBoundingRect = painter.boundingRect(QRectF(curX, curY, width, height - curY), textAlign|Qt::TextWordWrap, text);
QString log = QString().sprintf(" at rect %f, %f, %f, %f. Bounding rect is %f, %f, %f, %f", 0.0, curY, width, height - curY, lastDrawnTextBoundingRect.x(), lastDrawnTextBoundingRect.y(), lastDrawnTextBoundingRect.width(), lastDrawnTextBoundingRect.height());
qWarning() << "Text " << text << log;
painter.drawText(curX, curY, width, lastDrawnTextBoundingRect.height(), textAlign|Qt::TextWordWrap, text);
curX += lastDrawnTextBoundingRect.x() + lastDrawnTextBoundingRect.width();
continue;
}
}
painter.end();
//add resulting svg file to scene
UBGraphicsSvgItem *svgItem = mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
repositionSvgItem(svgItem, width, height, x, y, hasTransform, transform);
delete generator;
return true;
}
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseText()
{
if (currentState != SVG && currentState != PAGE)
{
qWarning() << "iwb content parse error, unexpected textarea tag at line" << mReader.lineNumber();
return false;
}
//create new scene if it's not created yet (for one page document case)
if (currentState == SVG && mCurrentScene == NULL)
createNewScene();
qreal x = mReader.attributes().value(aX).toString().toDouble();
qreal y = mReader.attributes().value(aY).toString().toDouble();
qreal width = 0;
qreal height = 0;
QList<QRectF> textRects;
QList<QFont> textFonts;
QList<QString> textLines;
QList<int> textAligns;
QList<QColor> textColors;
qWarning() << QString().sprintf("Text coordinates : %f,%f. Text size %f,%f", x, y, width, height);
qreal fontSize = 12.0;
QFont textFont;
QColor fontColor;
QString fontFamily = "Arial";
QString fontStretch = "normal";
bool italic = false;
int fontWeight = QFont::Normal;
int textAlign = Qt::AlignLeft;
QTransform fontTransform;
parseTextAttributes(fontSize, fontColor, fontFamily, fontStretch, italic, fontWeight, textAlign, fontTransform);
textFont = QFont(fontFamily, fontSize, fontWeight, italic);
QFontMetricsF metrics = QFontMetricsF(textFont);
qreal curHeight = metrics.height();
qreal curY = 0.0;
qreal curX = 0.0;
qreal linespacing = QFontMetrics(textFont).leading();
//remember if text area has transform
QTransform transform;
bool hasTransform = getCurElementTransorm(transform);
QRectF lastDrawnTextBoundingRect;
QStack<QFont> fontStack;
QStack<QColor> colorStack;
QStack<int> alignStack;
// first extimate desired text area size
// to do that, parse text area tags
while(true)
{
mReader.readNext();
QStringRef elementName = mReader.name();
if (mReader.isEndDocument())
break;
if (mReader.isEndElement())
{
if (elementName == tBreak)
{
//when tbreak appers, move down by the drawn rect height
//TODO: line spacing is not calculated yet, probably additional code is required
curY += lastDrawnTextBoundingRect.height() + linespacing;
curX = 0.0;
height += lastDrawnTextBoundingRect.height();
lastDrawnTextBoundingRect = QRectF(0,0,0,0);
continue;
}
if (elementName == tTspan)
{
textFont = fontStack.pop();
fontColor = colorStack.pop();
textAlign = alignStack.pop();
continue;
}
}
if (mReader.isEndElement() && elementName == tText)
break;
if (mReader.isStartElement() && elementName == tTspan)
{
fontStack.push(textFont);
colorStack.push(fontColor);
alignStack.push(textAlign);
parseTextAttributes(fontSize, fontColor, fontFamily, fontStretch, italic, fontWeight, textAlign, fontTransform);
textFont = QFont(fontFamily, fontSize, fontWeight, italic);
metrics = QFontMetricsF(textFont);
curHeight = metrics.height();
linespacing = QFontMetricsF(textFont).leading();
continue;
}
if (mReader.isCharacters() || mReader.isCDATA())
{
QString text = mReader.text().toString();
//skip empty text
if (text.trimmed().length() == 0)
continue;
//get bounding rect to obtain desired text height
lastDrawnTextBoundingRect = metrics.boundingRect(QRectF(), textAlign, text);
QString log = QString().sprintf(" at rect %f, %f, %f, %f. Bounding rect is %f, %f, %f, %f", 0.0, curY, width, height - curY, lastDrawnTextBoundingRect.x(), lastDrawnTextBoundingRect.y(), lastDrawnTextBoundingRect.width(), lastDrawnTextBoundingRect.height());
qWarning() << "Text " << text << log;
textFonts.append(textFont);
textRects.append(QRectF(curX, curY, lastDrawnTextBoundingRect.width(), lastDrawnTextBoundingRect.height()));
textLines.append(text);
textAligns.append(textAlign);
textColors.append(fontColor);
curX += lastDrawnTextBoundingRect.width();
if (width < curX)
width = curX;
if (height == 0)
height = curHeight;
continue;
}
}
QSvgGenerator *generator = createSvgGenerator(width, height);
QPainter painter;
painter.begin(generator);
if (textRects.count() != 0)
{
QListIterator<QRectF> textRectsIter(textRects);
QListIterator<QFont> textFontsIter(textFonts);
QListIterator<QString> textLinesIter(textLines);
QListIterator<int> textAlignsIter(textAligns);
QListIterator<QColor> textColorsIter(textColors);
while (textRectsIter.hasNext())
{
QRectF rt = textRectsIter.next();
QFont font = textFontsIter.next();
QString line = textLinesIter.next();
int align = textAlignsIter.next();
QColor color = textColorsIter.next();
painter.setFont(font);
painter.setPen(color);
painter.drawText(rt.x(), rt.y(), rt.width(), rt.height(), align, line);
}
}
painter.end();
//add resulting svg file to scene
UBGraphicsSvgItem *svgItem = mCurrentScene->addSvg(QUrl::fromLocalFile(generator->fileName()));
repositionSvgItem(svgItem, width, height, x, y, hasTransform, transform);
delete generator;
return true; return true;
} }
...@@ -459,6 +762,8 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parsePage() ...@@ -459,6 +762,8 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parsePage()
createNewScene(); createNewScene();
qWarning() << "Added page number" << mProxy->pageCount();
return true; return true;
} }
...@@ -487,6 +792,7 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseIwbElementRef() ...@@ -487,6 +792,7 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::parseIwbElementRef()
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::createNewScene() bool UBCFFSubsetAdaptor::UBCFFSubsetReader::createNewScene()
{ {
mCurrentScene = UBPersistenceManager::persistenceManager()->createDocumentSceneAt(mProxy, mProxy->pageCount()); mCurrentScene = UBPersistenceManager::persistenceManager()->createDocumentSceneAt(mProxy, mProxy->pageCount());
mCurrentSceneRect = mCurrentScene->normalizedSceneRect();
return true; return true;
} }
...@@ -530,10 +836,21 @@ QColor UBCFFSubsetAdaptor::UBCFFSubsetReader::colorFromString(const QString& clr ...@@ -530,10 +836,21 @@ QColor UBCFFSubsetAdaptor::UBCFFSubsetReader::colorFromString(const QString& clr
return QColor(clrString); return QColor(clrString);
} }
bool UBCFFSubsetAdaptor::UBCFFSubsetReader::getCurElementTransorm(QTransform &transform)
{
if (mReader.attributes().hasAttribute(aTransform))
{
transform = transformFromString(mReader.attributes().value(aTransform).toString());
return true;
}
else
return false;
}
QTransform UBCFFSubsetAdaptor::UBCFFSubsetReader::transformFromString(const QString trString) QTransform UBCFFSubsetAdaptor::UBCFFSubsetReader::transformFromString(const QString trString)
{ {
//check pattern for strings like 'rotate(10)' //check pattern for strings like 'rotate(10)'
QRegExp regexp("rotate\\(([-+]{0,1}[0-9]*\\.{0,1}[0-9]*)\\)"); QRegExp regexp("rotate\\( *([-+]{0,1}[0-9]*\\.{0,1}[0-9]*) *\\)");
if (regexp.exactMatch(trString)) if (regexp.exactMatch(trString))
{ {
if (regexp.capturedTexts().count() == 2 && regexp.capturedTexts().at(0).length() == trString.length()) if (regexp.capturedTexts().count() == 2 && regexp.capturedTexts().at(0).length() == trString.length())
...@@ -544,7 +861,7 @@ QTransform UBCFFSubsetAdaptor::UBCFFSubsetReader::transformFromString(const QStr ...@@ -544,7 +861,7 @@ QTransform UBCFFSubsetAdaptor::UBCFFSubsetReader::transformFromString(const QStr
} }
//check pattern for strings like 'rotate(10,20,20)' or 'rotate(10.1,10.2,34.2)' //check pattern for strings like 'rotate(10,20,20)' or 'rotate(10.1,10.2,34.2)'
regexp.setPattern("rotate\\(([-+]{0,1}[0-9]*\\.{0,1}[0-9]*),([-+]{0,1}[0-9]*\\.{0,1}[0-9]*),([-+]{0,1}[0-9]*\\.{0,1}[0-9]*)\\)"); regexp.setPattern("rotate\\( *([-+]{0,1}[0-9]*\\.{0,1}[0-9]*) *, *([-+]{0,1}[0-9]*\\.{0,1}[0-9]*) *, *([-+]{0,1}[0-9]*\\.{0,1}[0-9]*) *\\)");
if (regexp.exactMatch(trString)) if (regexp.exactMatch(trString))
{ {
if (regexp.capturedTexts().count() == 4 && regexp.capturedTexts().at(0).length() == trString.length()) if (regexp.capturedTexts().count() == 4 && regexp.capturedTexts().at(0).length() == trString.length())
...@@ -569,20 +886,26 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::getViewBoxDimenstions(const QString& ...@@ -569,20 +886,26 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::getViewBoxDimenstions(const QString&
if (capturesCount == 5 && regexp.capturedTexts().at(0).length() == viewBox.length()) if (capturesCount == 5 && regexp.capturedTexts().at(0).length() == viewBox.length())
{ {
mViewBox = QRectF(0, 0, regexp.capturedTexts().at(3).toDouble(), regexp.capturedTexts().at(4).toDouble()); mViewBox = QRectF(0, 0, regexp.capturedTexts().at(3).toDouble(), regexp.capturedTexts().at(4).toDouble());
mViewBoxCenter.setX(mViewBox.width() / 2);
mViewBoxCenter.setY(mViewBox.height() / 2);
return true; return true;
} }
} }
mViewBox = QRectF(0, 0, 1000, 1000); mViewBox = QRectF(0, 0, 1000, 1000);
mViewBoxCenter = QPointF(500, 500);
return false; return false;
} }
QSvgGenerator* UBCFFSubsetAdaptor::UBCFFSubsetReader::createSvgGenerator() QSvgGenerator* UBCFFSubsetAdaptor::UBCFFSubsetReader::createSvgGenerator(qreal width, qreal height)
{ {
QSvgGenerator* generator = new QSvgGenerator(); QSvgGenerator* generator = new QSvgGenerator();
qWarning() << QString("Making generator with file %1, size (%2, %3) and viewbox (%4 %5 %6 %7)").arg(mTempFilePath)
.arg(width).arg(height).arg(0.0).arg(0.0).arg(width).arg(width);
generator->setResolution(QApplication::desktop()->physicalDpiY());
generator->setFileName(mTempFilePath); generator->setFileName(mTempFilePath);
generator->setSize(mSize); generator->setSize(QSize(width, height));
generator->setViewBox(mViewBox); generator->setViewBox(QRectF(0, 0, width, height));
return generator; return generator;
} }
...@@ -608,3 +931,62 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::getTempFileName() ...@@ -608,3 +931,62 @@ bool UBCFFSubsetAdaptor::UBCFFSubsetReader::getTempFileName()
} }
} }
void UBCFFSubsetAdaptor::UBCFFSubsetReader::parseTextAttributes(qreal &fontSize, QColor &fontColor,
QString &fontFamily, QString &fontStretch, bool &italic,
int &fontWeight, int &textAlign, QTransform &fontTransform)
{
if (mReader.attributes().hasAttribute(aFontSize))
{
//consider inch has 72 liens
//since svg font size is given in pixels, divide it by pixels per line
fontSize = mReader.attributes().value(aFontSize).toString().toDouble() * 72 / QApplication::desktop()->physicalDpiY();
}
if (mReader.attributes().hasAttribute(aFill))
fontColor = colorFromString(mReader.attributes().value(aFill).toString());
if (mReader.attributes().hasAttribute(aFontfamily))
fontFamily = mReader.attributes().value(aFontfamily).toString();
if (mReader.attributes().hasAttribute(aFontstretch))
fontStretch = mReader.attributes().value(aFontstretch).toString();
if (mReader.attributes().hasAttribute(aFontstyle))
{
QStringRef fontStyle = mReader.attributes().value(aFontstyle);
italic = fontStyle == "italic";
}
if (mReader.attributes().hasAttribute(aFontweight))
{
QStringRef weight = mReader.attributes().value(aFontweight);
if (weight == "normal")
fontWeight = QFont::Normal;
else if (weight == "light")
fontWeight = QFont::Light;
else if (weight == "demibold")
fontWeight = QFont::DemiBold;
else if (weight == "bold")
fontWeight = QFont::Bold;
if (weight == "black")
fontWeight = QFont::Black;
}
if (mReader.attributes().hasAttribute(aTextalign))
{
QString align = mReader.attributes().value(aTextalign).toString();
if (align == "middle" || align == "center")
textAlign = Qt::AlignHCenter;
else
if (align == "start")
textAlign = Qt::AlignLeft;
else
if (align == "end")
textAlign = Qt::AlignRight;
}
if (mReader.attributes().hasAttribute(aTransform))
fontTransform = transformFromString(mReader.attributes().value(aTransform).toString());
}
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#ifndef UBCFFSUBSETADAPTOR_H #ifndef UBCFFSUBSETADAPTOR_H
#define UBCFFSUBSETADAPTOR_H #define UBCFFSUBSETADAPTOR_H
...@@ -8,6 +23,8 @@ ...@@ -8,6 +23,8 @@
class UBDocumentProxy; class UBDocumentProxy;
class UBGraphicsScene; class UBGraphicsScene;
class QSvgGenerator; class QSvgGenerator;
class UBGraphicsSvgItem;
class QTransform;
class UBCFFSubsetAdaptor class UBCFFSubsetAdaptor
{ {
...@@ -42,8 +59,10 @@ private: ...@@ -42,8 +59,10 @@ private:
private: private:
QString mTempFilePath; QString mTempFilePath;
UBGraphicsScene *mCurrentScene; UBGraphicsScene *mCurrentScene;
QRectF mCurrentSceneRect;
QString mIndent; QString mIndent;
QRectF mViewBox; QRectF mViewBox;
QPointF mViewBoxCenter;
QSize mSize; QSize mSize;
//methods to store current xml parse state //methods to store current xml parse state
...@@ -63,6 +82,7 @@ private: ...@@ -63,6 +82,7 @@ private:
bool parseRect(); bool parseRect();
bool parseEllipse(); bool parseEllipse();
bool parseTextArea(); bool parseTextArea();
bool parseText();
bool parsePolygon(); bool parsePolygon();
bool parsePage(); bool parsePage();
bool parsePageSet(); bool parsePageSet();
...@@ -75,11 +95,16 @@ private: ...@@ -75,11 +95,16 @@ private:
int currentState; int currentState;
//helper methods //helper methods
bool getCurElementTransorm(QTransform &transform);
void repositionSvgItem(UBGraphicsSvgItem *item, qreal width, qreal height, qreal x, qreal y, bool useTransform, QTransform &transform);
QColor colorFromString(const QString& clrString); QColor colorFromString(const QString& clrString);
QTransform transformFromString(const QString trString); QTransform transformFromString(const QString trString);
bool getViewBoxDimenstions(const QString& viewBox); bool getViewBoxDimenstions(const QString& viewBox);
QSvgGenerator* createSvgGenerator(); QSvgGenerator* createSvgGenerator(qreal width, qreal height);
bool getTempFileName(); bool getTempFileName();
void parseTextAttributes(qreal &fontSize, QColor &fontColor,
QString &fontFamily, QString &fontStretch, bool &italic,
int &fontWeight, int &textAlign, QTransform &fontTransform);
}; };
}; };
......
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#include <QDir> #include <QDir>
#include "UBImportCFF.h"
#include "document/UBDocumentProxy.h"
#include "core/UBApplication.h" #include "core/UBApplication.h"
#include "core/UBPersistenceManager.h" #include "core/UBPersistenceManager.h"
#include "core/UBDocumentManager.h" #include "core/UBDocumentManager.h"
#include "core/memcheck.h" #include "core/memcheck.h"
#include "core/UBPersistenceManager.h" #include "core/UBPersistenceManager.h"
#include "document/UBDocumentProxy.h"
#include "frameworks/UBFileSystemUtils.h"
#include "domain/UBGraphicsPDFItem.h" #include "domain/UBGraphicsPDFItem.h"
#include "frameworks/UBFileSystemUtils.h"
#include "pdf/PDFRenderer.h" #include "pdf/PDFRenderer.h"
#include "UBCFFSubsetAdaptor.h" #include "UBCFFSubsetAdaptor.h"
#include "UBImportCFF.h"
#include "quazip.h" #include "quazip.h"
#include "quazipfile.h" #include "quazipfile.h"
......
/*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
#ifndef UBIMPORTCFF_H #ifndef UBIMPORTCFF_H
#define UBIMPORTCFF_H #define UBIMPORTCFF_H
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment