enlever le code mort, améliorer le formulaire d'ajout: autofocus, label
This commit is contained in:
tykayn
parent
5c0a357cc8
commit
8913f6458a
286
main.js
286
main.js
@ -1,23 +1,34 @@
|
||||
|
||||
var personnes=[],nom=[],nomjf=[],prenom=[],annee=[],note=[],posx=[],posy=[],etx=[],ety=[], can_etiq=[];
|
||||
/**
|
||||
* définition des constantes
|
||||
*/
|
||||
var personnes = [], nom = [], nomjf = [], prenom = [], annee = [], note = [], posx = [], posy = [], etx = [], ety = [],
|
||||
can_etiq = [];
|
||||
var ibac = 0, tit = {}, titre = "", fond = [];
|
||||
var mode_saisie = "true" // mode saisie true, mode modification false
|
||||
var image = document.getElementById('ima_fond');
|
||||
var cercle = document.getElementById("cirsvg");
|
||||
var menu = document.getElementById("menu_modif");
|
||||
var modif_titre = document.getElementById("nouveau_titre");
|
||||
var cant = document.createElement("canvas");
|
||||
document.body.appendChild(cant);
|
||||
var canevas_photo = document.createElement("canvas");
|
||||
document.body.appendChild(canevas_photo);
|
||||
|
||||
/**
|
||||
* écoute du changement de l'input fichier pour charger la photo
|
||||
* @type {HTMLElement}
|
||||
*/
|
||||
let inputElement = document.getElementById('fichiers');
|
||||
inputElement.addEventListener('change', (e) => {
|
||||
lecfic(e.target.files)
|
||||
lecture_photo(e.target.files)
|
||||
}, false);
|
||||
|
||||
function lecfic(fichier) {
|
||||
function lecture_photo(fichier) {
|
||||
nb_fichier = fichier.length
|
||||
var i_xml = 1, i_img = 0;
|
||||
if (fichier[0].name.split('.').pop()=="xml") {i_xml=0; i_img=1};
|
||||
if (fichier[0].name.split('.').pop() == "xml") {
|
||||
i_xml = 0;
|
||||
i_img = 1
|
||||
}
|
||||
|
||||
var src = fichier[i_img].name.substring(0, fichier[i_img].name.indexOf("."));
|
||||
enreg_xml = src + ".xml"
|
||||
enreg_noms = src + "_noms.png"
|
||||
@ -25,13 +36,25 @@ function lecfic(fichier) {
|
||||
fond = fichier[i_img];
|
||||
affiche_fond();
|
||||
|
||||
if (nb_fichier==1) {creation_data_xml(); lecture_xml(); return} // Un seul fichier sélectionné : l'image à traiter
|
||||
// Un seul fichier sélectionné : l'image à traiter
|
||||
if (nb_fichier == 1) {
|
||||
creation_data_xml();
|
||||
lecture_xml();
|
||||
return
|
||||
}
|
||||
|
||||
if (fichier_xml.name.startsWith("haar")) {creation_data_xml(); detection_de_visages();return} // deux fichiers selectionnés : l'image et haarcascade.xml
|
||||
// deux fichiers selectionnés : l'image et haarcascade.xml
|
||||
if (fichier_xml.name.startsWith("haar")) {
|
||||
creation_data_xml();
|
||||
detection_de_visages();
|
||||
return
|
||||
}
|
||||
|
||||
// deux fichiers selectionnés : l'image et le xml du même nom
|
||||
var reader = new FileReader();
|
||||
reader.onload = function(evt) {lecture(evt.target.result);};
|
||||
reader.onload = function (evt) {
|
||||
lecture(evt.target.result);
|
||||
};
|
||||
reader.readAsText(fichier_xml);
|
||||
|
||||
function lecture(text) {
|
||||
@ -41,11 +64,15 @@ function lecfic(fichier) {
|
||||
};
|
||||
}
|
||||
|
||||
// Chargement et affichage de l'image background
|
||||
/**
|
||||
* Chargement et affichage de l'image background
|
||||
*/
|
||||
function affiche_fond() {
|
||||
var read_fond = new FileReader();
|
||||
read_fond.addEventListener("load", function (evt) {
|
||||
image.src = evt.target.result;
|
||||
|
||||
console.log('image', image, image.offsetLeft, image.offsetTop);
|
||||
}, false);
|
||||
read_fond.readAsDataURL(fond);
|
||||
}
|
||||
@ -55,6 +82,9 @@ function lecture_xml() {
|
||||
titre = tit.textContent
|
||||
personnes = data_xml.documentElement.getElementsByTagName("personne");
|
||||
nb_pers = personnes.length
|
||||
|
||||
console.log('image', image, image.offsetLeft, image.offsetTop);
|
||||
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
nom[i] = personnes[i].getElementsByTagName("nom")[0].textContent;
|
||||
if (personnes[i].getElementsByTagName("nom_jeune_fille")[0]) {
|
||||
@ -63,39 +93,42 @@ function lecture_xml() {
|
||||
prenom[i] = personnes[i].getElementsByTagName("prenom")[0].textContent;
|
||||
annee[i] = personnes[i].getElementsByTagName("annee_naiss")[0].textContent;
|
||||
note[i] = personnes[i].getElementsByTagName("note")[0].textContent;
|
||||
posx[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['posx'].value);
|
||||
posy[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['posy'].value);
|
||||
etx[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['etx'].value);
|
||||
ety[i] = parseFloat(personnes[i].getElementsByTagName( "position")[0].attributes['ety'].value);
|
||||
posx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posx'].value + image.offsetLeft);
|
||||
posy[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['posy'].value + image.offsetTop);
|
||||
etx[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['etx'].value + image.offsetLeft);
|
||||
ety[i] = parseFloat(personnes[i].getElementsByTagName("position")[0].attributes['ety'].value + image.offsetTop);
|
||||
}
|
||||
if (titre !== '') {
|
||||
affiche_titre(titre)
|
||||
}
|
||||
if (titre!=='') {affiche_titre(titre)}
|
||||
affiche_etiquette();
|
||||
};
|
||||
|
||||
function affiche_titre(titre_photo) {
|
||||
cant.className="tit";
|
||||
cant.height=23;
|
||||
canevas_photo.className = "titre";
|
||||
canevas_photo.height = 23;
|
||||
var taille = titre_photo.length;
|
||||
cant.width=taille*12;
|
||||
tx = parseFloat(tit.attributes['titx'].value);
|
||||
ty = parseFloat(tit.attributes['tity'].value);
|
||||
cant.style.left = tx + "px";
|
||||
cant.style.top = ty + "px";
|
||||
titre_ctx = cant.getContext("2d");
|
||||
titre_ctx.font = '21px Arial';
|
||||
titre_ctx.fillStyle = 'Maroon';
|
||||
canevas_photo.width = taille * 12;
|
||||
tx = parseFloat(tit.attributes['titx'].value + image.offsetLeft);
|
||||
ty = parseFloat(tit.attributes['tity'].value + image.offsetTop);
|
||||
canevas_photo.style.left = tx + "px";
|
||||
canevas_photo.style.top = ty + "px";
|
||||
titre_ctx = canevas_photo.getContext("2d");
|
||||
titre_ctx.fillText(titre_photo, 20, 18);
|
||||
affiche_etiquette();
|
||||
}
|
||||
|
||||
/**
|
||||
* affichage du texte nom/prénom dans des canvas etiquette
|
||||
*/
|
||||
function affiche_etiquette() {
|
||||
// affichage du texte nom/prénom dans des canvas etiquette
|
||||
rayon = 28
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
var id = "can" + i;
|
||||
if (document.getElementById(id)) continue;
|
||||
var canv = document.createElement("canvas");
|
||||
canv.id = id;
|
||||
canv.setAttribute('class', 'people_label')
|
||||
document.body.appendChild(canv);
|
||||
can_etiq[i] = document.getElementById(canv.id);
|
||||
can_etiq[i].className = "etiq";
|
||||
@ -103,30 +136,49 @@ function affiche_etiquette() {
|
||||
etiq_ctx = can_etiq[i].getContext("2d");
|
||||
var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
|
||||
can_etiq[i].width = taille * 7 + 10
|
||||
if (nomjf[i].replace(/\t/g, '').length>1) {can_etiq[i].height=45};
|
||||
etiq_ctx.font = '13px Arial';
|
||||
etiq_ctx.fillStyle = 'chocolate';
|
||||
if (nomjf[i].replace(/\t/g, '').length > 1) {
|
||||
can_etiq[i].height = 45
|
||||
}
|
||||
;
|
||||
can_etiq[i].style.left = etx[i] + "px";
|
||||
can_etiq[i].style.top = ety[i] + "px";
|
||||
etiq_ctx.fillText(nom[i], 7, 12);
|
||||
etiq_ctx.fillText(prenom[i], 7, 25);
|
||||
if (nomjf[i].length>1) {etiq_ctx.fillText("née : "+nomjf[i], 7, 38)};
|
||||
};
|
||||
if (nomjf[i].length > 1) {
|
||||
etiq_ctx.fillText("née : " + nomjf[i], 7, 38)
|
||||
}
|
||||
;
|
||||
}
|
||||
;
|
||||
gestion_souris();
|
||||
};
|
||||
|
||||
function gestion_souris() {
|
||||
if (titre!=='') { // pour déplacer le titre
|
||||
cant.addEventListener("mousedown", function(e){this.addEventListener("mousemove", deplace_etiquette);});
|
||||
cant.addEventListener("mouseup", function(e){this.removeEventListener("mousemove", deplace_etiquette);});
|
||||
// pour déplacer le titre
|
||||
if (titre !== '') {
|
||||
canevas_photo.addEventListener("mousedown", function (e) {
|
||||
this.addEventListener("mousemove", deplace_etiquette);
|
||||
});
|
||||
canevas_photo.addEventListener("mouseup", function (e) {
|
||||
this.removeEventListener("mousemove", deplace_etiquette);
|
||||
});
|
||||
}
|
||||
for (var i = 0; i < nb_pers; i++) { // pour déplacer les étiquettes nom,prénom ...
|
||||
can_etiq[i].addEventListener("mousedown", function(e){this.addEventListener("mousemove", deplace_etiquette);});
|
||||
can_etiq[i].addEventListener("mouseup", function(e){this.removeEventListener("mousemove", deplace_etiquette);});
|
||||
};
|
||||
// pour déplacer les étiquettes nom,prénom ...
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
can_etiq[i].addEventListener("mousedown", function (e) {
|
||||
this.addEventListener("mousemove", deplace_etiquette);
|
||||
});
|
||||
can_etiq[i].addEventListener("mouseup", function (e) {
|
||||
this.removeEventListener("mousemove", deplace_etiquette);
|
||||
});
|
||||
}
|
||||
;
|
||||
ima_fond.addEventListener('mousedown', afficher_formulaire); // pour afficher le formulaire de saisie personne
|
||||
ima_fond.addEventListener('mousemove', tracer_cercle); // pour afficher cercle personne
|
||||
cercle.addEventListener('contextmenu', function (e) { menu_modif(e); e.preventDefault();}, false); // menu modif personne
|
||||
cercle.addEventListener('contextmenu', function (e) {
|
||||
menu_modif(e);
|
||||
e.preventDefault();
|
||||
}, false); // menu modif personne
|
||||
};
|
||||
|
||||
function deplace_etiquette(e) {
|
||||
@ -147,10 +199,12 @@ function supprimer_personne() {
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
x = can_etiq[i];
|
||||
x.parentNode.removeChild(x);
|
||||
};
|
||||
}
|
||||
;
|
||||
cercle.style.visibility = "hidden";
|
||||
lecture_xml();
|
||||
}
|
||||
|
||||
function creation_data_xml() {
|
||||
var x, i;
|
||||
var txt = "";
|
||||
@ -170,47 +224,12 @@ function creation_data_xml() {
|
||||
}
|
||||
};
|
||||
|
||||
function detection_de_visages() {
|
||||
// alert pour temporiser
|
||||
alert("Ok pour continuer")
|
||||
src = cv.imread(ima_fond);
|
||||
gray = new cv.Mat();
|
||||
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
|
||||
chargement_haarcascade();
|
||||
}
|
||||
function chargement_haarcascade() {
|
||||
var reader_haar = new FileReader();
|
||||
reader_haar.onload = function(ev) {
|
||||
function str2ab(text) {
|
||||
return new TextEncoder().encode(text);
|
||||
}
|
||||
faceCascadeFile = fichier_xml.name;
|
||||
let data=str2ab(reader_haar.result)
|
||||
cv.FS_createDataFile('/', faceCascadeFile, data, true, false, false);
|
||||
detect_faces();
|
||||
};
|
||||
reader_haar.readAsText(fichier_xml);
|
||||
}
|
||||
function envoi_formulaire_ajout() {
|
||||
|
||||
function detect_faces() {
|
||||
|
||||
let faces = new cv.RectVector();
|
||||
let faceCascade = new cv.CascadeClassifier();
|
||||
// load pre-trained classifiers
|
||||
faceCascade.load(faceCascadeFile);
|
||||
// detect faces
|
||||
let msize = new cv.Size(0, 0);
|
||||
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
|
||||
console.log("Il y a "+ faces.size()+" visage(s)")
|
||||
for (let i = 0; i < faces.size(); ++i) {
|
||||
ajouter_personne_xml("nom_"+parseInt(i)+" ",faces.get(i).x,faces.get(i).y,faces.get(i).width,faces.get(i).height)
|
||||
}
|
||||
// cv.imshow('ima_fond', src);
|
||||
src.delete(); gray.delete(); faceCascade.delete();
|
||||
faces.delete();
|
||||
ajouter_personne_xml("", souris_x, souris_y, "", "");
|
||||
lecture_xml();
|
||||
}
|
||||
|
||||
;}
|
||||
function ajouter_personne_xml(nom_face, fx, fy, fw, fh) {
|
||||
var nomform = nom_face
|
||||
var nomjfform = ""
|
||||
@ -300,32 +319,40 @@ function tracer_cercle(e) {
|
||||
cercle.setAttribute("cy", posy[i]);
|
||||
cercle.setAttribute("r", rayon);
|
||||
cercle.style.visibility = "visible";
|
||||
// grossir ou diminuer la taille du cercle
|
||||
// cercle.addEventListener("wheel", function(e) {
|
||||
// rayon=rayon + (e.deltaY>0 ? -1 : +1);
|
||||
// cercle.setAttribute("r",rayon );
|
||||
// } , false);
|
||||
return
|
||||
}
|
||||
};
|
||||
}
|
||||
;
|
||||
cercle.style.visibility = "hidden";
|
||||
if (nb_pers!=0) {can_etiq[ibac].style.backgroundColor = "oldlace";}
|
||||
if (nb_pers != 0) {
|
||||
can_etiq[ibac].style.backgroundColor = "oldlace";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* montre le formulaire là où l'on clique
|
||||
* @param e
|
||||
*/
|
||||
function afficher_formulaire(e) {
|
||||
var formul=document.getElementById('ajout')
|
||||
var formulaire_ajout = document.getElementById('ajout')
|
||||
var circle_svg = document.getElementById('circle_svg')
|
||||
souris_x = position_souris(ima_fond, e).x;
|
||||
souris_y = position_souris(ima_fond, e).y;
|
||||
if (souris_y-document.getElementById('ajout').height<0) {sourisy=50};
|
||||
formul.style.top=souris_y+40+"px";
|
||||
formul.style.left=souris_x-80+"px";
|
||||
setTimeout(function () { document.getElementById("nom").focus(); },10);
|
||||
formul.className='visible';
|
||||
|
||||
// document.getElementById('ajout_personne').reset(); // ne fonctioone pas !
|
||||
if (souris_y - document.getElementById('ajout').height < 0) {
|
||||
sourisy = 50
|
||||
}
|
||||
;
|
||||
formulaire_ajout.style.top = souris_y + 40 + "px";
|
||||
formulaire_ajout.style.left = souris_x - (formulaire_ajout.offsetWidth /2) + "px";
|
||||
setTimeout(function () {
|
||||
document.getElementById("nom").focus();
|
||||
}, 10);
|
||||
formulaire_ajout.className = 'visible';
|
||||
circle_svg.className = 'visible';
|
||||
if (mode_saisie) {
|
||||
document.getElementById('nom').setAttribute('value', "");
|
||||
document.getElementById('nom').focus();
|
||||
document.getElementById('nom_jeune_fille').setAttribute('value', "");
|
||||
document.getElementById('prenom').setAttribute('value', "");
|
||||
document.getElementById('annee').setAttribute('value', "");
|
||||
@ -336,13 +363,14 @@ function afficher_formulaire(e) {
|
||||
|
||||
|
||||
function misajour_xml() {
|
||||
tit.setAttribute("titx",cant.style.left);
|
||||
tit.setAttribute("tity",cant.style.top);
|
||||
tit.setAttribute("titx", canevas_photo.style.left);
|
||||
tit.setAttribute("tity", canevas_photo.style.top);
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
position = data_xml.getElementsByTagName("position")[i];
|
||||
position.setAttribute("etx", can_etiq[i].style.left);
|
||||
position.setAttribute("ety", can_etiq[i].style.top);
|
||||
};
|
||||
}
|
||||
;
|
||||
lecture_xml();
|
||||
};
|
||||
|
||||
@ -379,8 +407,8 @@ function formatXml(xml, tab) { // tab = optional indent value, default is tab (\
|
||||
|
||||
function image_finale() {
|
||||
misajour_xml()
|
||||
var decalx=5;
|
||||
var decaly=29;
|
||||
var decalx = 5 + image.offsetLeft;
|
||||
var decaly = 29 + image.offsetTop;
|
||||
var can_imf = document.createElement("canvas");
|
||||
document.body.appendChild(can_imf);
|
||||
imf_ctx = can_imf.getContext("2d");
|
||||
@ -391,13 +419,15 @@ function image_finale() {
|
||||
var taille = titre.length;
|
||||
hauteur = 25
|
||||
roundedRect(imf_ctx, tx - decalx, ty - decaly, taille * 11, hauteur, 5, 'lightyellow', 'yellow');
|
||||
imf_ctx.drawImage(cant, tx-decalx, ty-decaly)
|
||||
};
|
||||
imf_ctx.drawImage(canevas_photo, tx - decalx, ty - decaly)
|
||||
}
|
||||
|
||||
for (var i = 0; i < nb_pers; i++) {
|
||||
var taille = Math.max(nom[i].length, prenom[i].length, nomjf[i].length + 5);
|
||||
hauteur = 30
|
||||
if (nomjf[i].replace(/\t/g, '').length>1) {hauteur=45};
|
||||
// if (!nomjf[i].charCodeAt(1)==9) {hauteur=45};
|
||||
if (nomjf[i].replace(/\t/g, '').length > 1) {
|
||||
hauteur = 45
|
||||
}
|
||||
roundedRect(imf_ctx, etx[i] - decalx, ety[i] - decaly, taille * 7 + 10, hauteur, 15, 'oldlace', 'blue');
|
||||
imf_ctx.drawImage(can_etiq[i], etx[i] - decalx, ety[i] - decaly)
|
||||
}
|
||||
@ -430,7 +460,53 @@ function image_finale() {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/******************************************
|
||||
* détection de visages avec openCV
|
||||
******************************************/
|
||||
function onOpenCvReady() {
|
||||
document.getElementById('status').innerHTML = 'OpenCV.js est chargé !';
|
||||
console.info('OpenCV.js est chargé !');
|
||||
}
|
||||
|
||||
function detection_de_visages() {
|
||||
src = cv.imread(ima_fond);
|
||||
gray = new cv.Mat();
|
||||
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);
|
||||
chargement_haarcascade();
|
||||
}
|
||||
|
||||
function chargement_haarcascade() {
|
||||
var reader_haar = new FileReader();
|
||||
reader_haar.onload = function (ev) {
|
||||
function str2ab(text) {
|
||||
return new TextEncoder().encode(text);
|
||||
}
|
||||
|
||||
faceCascadeFile = fichier_xml.name;
|
||||
let data = str2ab(reader_haar.result)
|
||||
cv.FS_createDataFile('/', faceCascadeFile, data, true, false, false);
|
||||
detect_faces();
|
||||
};
|
||||
reader_haar.readAsText(fichier_xml);
|
||||
}
|
||||
|
||||
function detect_faces() {
|
||||
|
||||
let faces = new cv.RectVector();
|
||||
let faceCascade = new cv.CascadeClassifier();
|
||||
// load pre-trained classifiers
|
||||
faceCascade.load(faceCascadeFile);
|
||||
// detect faces
|
||||
let msize = new cv.Size(0, 0);
|
||||
faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0, msize, msize);
|
||||
console.log("Il y a " + faces.size() + " visage(s)")
|
||||
for (let i = 0; i < faces.size(); ++i) {
|
||||
ajouter_personne_xml("nom_" + parseInt(i) + " ", faces.get(i).x, faces.get(i).y, faces.get(i).width, faces.get(i).height)
|
||||
}
|
||||
src.delete();
|
||||
gray.delete();
|
||||
faceCascade.delete();
|
||||
faces.delete();
|
||||
lecture_xml();
|
||||
|
||||
;
|
||||
}
|
||||
|
||||
@ -22,40 +22,44 @@ Licence AGPL v3.0+
|
||||
<main>
|
||||
<div id="actions">
|
||||
|
||||
<input id="fichiers" multiple type="file" class="cotecote" style="display:none"/>
|
||||
<input id="fichiers" multiple type="file" class="cotecote" value="zizou.png"/>
|
||||
<button id="bouton_image" onclick="fichiers.click()" title="Charger une image et le XML associé">Choix de la
|
||||
photo
|
||||
</button>
|
||||
<button id="detection" onclick="detection_de_visages()" title="Détecter les visages">détection visages
|
||||
</button>
|
||||
<input id="save_file" type="button" class=cotecote value="Enregistrer xml"
|
||||
onclick="enregistrer_fichier(enreg_xml)"/>
|
||||
<input id="file" type="button" class=cotecote value="Enregistrer image " onclick="image_finale()"/>
|
||||
<p id="status" class=cotecote>OpenCV.js chargement en cours...</p>
|
||||
</div>
|
||||
<div style="position: relative; ">
|
||||
<img src="" id="ima_fond" style="position: absolute; left: 0; top: 0; z-index: 0;">
|
||||
</div>
|
||||
|
||||
<svg class="invisible" style="position: absolute" ;>
|
||||
<!-- cercle indiquant la position où on a cliqué-->
|
||||
<svg id="circle_svg" class="invisible" style="position: absolute" ;>
|
||||
<circle id="cirsvg" cx="30" cy="30" r="28"/>
|
||||
</svg>
|
||||
|
||||
<div id="ajout" class="invisible" style="position: relative; z-index: 1;">
|
||||
<form name="ajout_personne" id="ajout_personne">
|
||||
<!-- formulaire d'ajout ou de modification d'une personne-->
|
||||
<div id="ajout" class="invisible" style="position: absolute; z-index: 1;">
|
||||
<form name="ajout_personne" id="ajout_personne" onsubmit="envoi_formulaire_ajout">
|
||||
<h2 class="title is-2">
|
||||
NOUVELLE PERSONNE
|
||||
</h2>
|
||||
Nom : <input type="text" name="nom" id="nom" autofocus><BR>
|
||||
Née : <input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
|
||||
Prénom : <input type="text" name="prénom" id="prenom"><BR>
|
||||
Année : <input type="text" name="année" id="annee"><BR>
|
||||
Note : <input type="text" name="note" id="note"><BR>
|
||||
Titre photo : <input type="text" name="titre" id="titre"><BR>
|
||||
<label for="nom">Nom : </label><input type="text" name="nom" id="nom" autofocus><BR>
|
||||
<label for="nom_jeune_fille">Née : </label><input type="text" name="nom_jf" id="nom_jeune_fille"><BR>
|
||||
<label for="prenom">Prénom : </label><input type="text" name="prénom" id="prenom"><BR>
|
||||
<label for="annee">Année : </label><input type="text" name="année" id="annee"><BR>
|
||||
<label for="note">Note : </label><input type="text" name="note" id="note"><BR>
|
||||
<label for="titre">Titre photo : </label><input type="text" name="titre" id="titre"><BR>
|
||||
|
||||
<input type="reset" id="enreg" value="Ajouter"
|
||||
onClick=ajouter_personne_xml("",souris_x,souris_y,"","");lecture_xml();>
|
||||
<input type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";>
|
||||
<input id="enreg" type="reset"value="Ajouter"
|
||||
onClick=envoi_formulaire_ajout()>
|
||||
<input id="reset" type="reset" value="Annuler" onClick=document.getElementById("ajout").className="invisible";>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- photo de fond-->
|
||||
<img src="" id="ima_fond" >
|
||||
<div id="menu_modif" class="invisible">
|
||||
<div id="modifier" onClick="modifier_personne();">modifier</div>
|
||||
<div id="supprimer" onClick="supprimer_personne();menu.style.visibility='hidden';">supprimer</div>
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
body {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: transparent;
|
||||
stroke: black;
|
||||
@ -12,9 +14,8 @@ circle {
|
||||
}
|
||||
|
||||
#bouton_image {
|
||||
background-color: blue;
|
||||
background-color: #2266cb;
|
||||
color: white;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
#menu_modif {
|
||||
@ -31,7 +32,7 @@ circle {
|
||||
}
|
||||
|
||||
#ajout {
|
||||
border: 2px solid red;
|
||||
border: 2px solid #2266cb;
|
||||
border-radius: 10px;
|
||||
top: 100px;
|
||||
left: 200px;
|
||||
@ -39,17 +40,23 @@ circle {
|
||||
padding-bottom: 0.5em;
|
||||
padding-left: 1em;
|
||||
background-color: Azure;
|
||||
width: 230px;
|
||||
width: 24em;
|
||||
}
|
||||
|
||||
#ajout label {
|
||||
width: 10em;
|
||||
display: inline-block;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
#ajout input[type=text] {
|
||||
border: solid 1px cadetblue;
|
||||
}
|
||||
|
||||
#ajout input:focus {
|
||||
border: solid 2px green;
|
||||
}
|
||||
|
||||
.cotecote {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
@ -60,16 +67,17 @@ circle {
|
||||
|
||||
.etiq {
|
||||
background-color: oldlace;
|
||||
border: 1px solid blue;
|
||||
border: 1px solid #2266cb;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
font-family: Arial;
|
||||
font-size: 13px;
|
||||
left: -200px;
|
||||
top: 100px;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.tit {
|
||||
.titre {
|
||||
background-color: LightYellow;
|
||||
border: 2px solid Yellow;
|
||||
border-radius: 5px;
|
||||
@ -78,10 +86,32 @@ circle {
|
||||
top: 100px;
|
||||
}
|
||||
|
||||
#actions button, #actions input {
|
||||
#actions button,
|
||||
#actions input,
|
||||
#ajout button,
|
||||
#enreg, #reset {
|
||||
background: cadetblue;
|
||||
border-radius: 3px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
padding: 1em 2em;
|
||||
}
|
||||
|
||||
#actions button:hover,
|
||||
#actions input:hover,
|
||||
#ajout button:hover,
|
||||
#enreg:hover, #reset:hover {
|
||||
background: #275d5f;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#fichiers {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#ima_fond {
|
||||
position: absolute;
|
||||
left: 2em;
|
||||
top: 11em;
|
||||
z-index: -1;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user