surligner à la souris

Le 09/01/11 12:04, Pascal a écrit :

Bonjour

Peut-on surligner du texte, à l'aide de la souris, dans une page html?
Est-il possible de choisir la couleur de surlignement au préalable en
cliquant dans une "palette de couleurs"?

avec les mots qu'il faut entre les balises span
il doit bien il y avoir moyen de leur donner une bordure basse de la
couleur voulue ?

Le but du jeu étant d'analyser la construction grammaticale d'une
phrase. L'élève devra, dans chaque phrase d'un texte, retrouver le
sujet, le verbe, certains compléments en surlignant chaque partie des
phrases du texte avec une couleur déterminée.
Exemple: Le chien ronge son os.
1 Surligne en jaune le sujet : Le chien
2 surligne en rouge le verbe : ronge
3 surligne en orange le complément d'objet direct : son os

Bien sûr, à la fin je devrais pouvoir comparer la réponse de l'élève à
la solution.

<select id="couleurs">
<option value="yellow">sujet
<option value="red">verbe
<option value="orange">complément
</select>
<p>
<span ondblclick="surligne(this)">chien</span>

function surligne(quoi) {
var coul = document.forms[0].coul.value;
quoi.style.borderBottom = '1px solid '+coul;
}

merci
pascal

il doit aussi il y avoir moyen de se passer de span
s'il n'y a qu'un seul mot à souligner à la fois


--
Stéphane Moriaux avec/with iMac-intel

En fr.comp.lang.javascript <4d2b0a88$0$32469$ba4acef3@reader.news.orange
.fr>, Lun, 10 Jan 2011 14:32:56, SAM <stephanemoriaux.NoAdmin@wanadoo.fr
.invalid> a ecrit:

<select id="couleurs">
<option value="yellow">sujet
<option value="red">verbe
<option value="orange">complément

<OPTION VALUE="">Supprimer le marquage <!-- +++ -->

</select>
<p>
<span ondblclick="surligne(this)">chien</span>

function surligne(quoi) {
var coul = document.forms[0].coul.value;

quoi.style.borderBottom = coul && '1px solid '+coul; // +++

}

?? Pas complètement testé.

--
(c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk Turnpike v6.05 IE 8.
Web <http://www.merlyn.demon.co.uk/> - FAQ-type topics, acronyms, and links.
Command-prompt MiniTrue is useful for viewing/searching/altering files. Free,
DOS/Win/UNIX now 2.0.6; see <URL:http://www.merlyn.demon.co.uk/pc-links.htm>.

Le 10/01/11 14:32, SAM a écrit :

il doit aussi il y avoir moyen de se passer de span
s'il n'y a qu'un seul mot à souligner à la fois

En fait ... pas vraiment ...
au double-clic ou au mouse-up
on ré-injecte la sélection dans un span

pour pouvoir lui attribuer la bonne class

Y a des trucs JS, pour IE ou non, qui se chargent de cette re-injection.

Ça devient + ardu quand on veut ensuite :
- annuler une sélection (la retrouver pour en enlever les span)
- modifier une sélection (retrouver ses span s'ils existent)

Pour le corrigé yaka avoir des class (sujet, verbe, cplmt)
à avoir mis d'où qui faut

--
Stéphane Moriaux avec/with iMac-intel

Bonjour

C'est toujours en chantier.... J'y bosse sporadiquement.... malheureusement.
J'ai un souci avec le parcours des span contenus dans un div...qui m'a coupé
dans mon élan...
http://cjoint.com/?0bAtbHZiGjq

Le 26/01/2011 19:02, Pascal a écrit :

http://cjoint.com/?0bAtbHZiGjq

Et comme ça, ce n'est pas plus simple ?
http://cjoint.com/?0bAwF7QR8hK


--
Cordialement,
Pascal

Bonjour
C'est carrément excellent... concis, efficace ! Merci beaucoup...

var target = ev ? ev.target : event.srcElement;
Ca veut dire quoi le ? et le : C'est l'écriture condensée d'un test ?

Cordialement,
Pascal

Le 27/01/2011 18:55, Pascal a écrit :

var target = ev ? ev.target : event.srcElement;
Ca veut dire quoi le ? et le : C'est l'écriture condensée d'un test ?

Il s'agit de l'opérateur ternaire :
http://www.google.fr/search?q=op%E9rateur+ternaire

En gros,
a = test ? val1 : val2;
est équivalent à :
if (test) a = val1
else a = val2;

Le 27/01/11 18:55, Pascal a écrit :

Bonjour
C'est carrément excellent... concis, efficace ! Merci beaucoup...

Impec !

mais ... à qui, à quoi réponds-tu ?
sur quel(s) NG(s) es-tu en même temps ?

var target = ev ? ev.target : event.srcElement;
Ca veut dire quoi le ? et le : C'est l'écriture condensée d'un test ?

Heu ... c'est une écriture raccourcie pour :

var target;
if(ev)
{
target = ev.target;
}
else
{
target = event.srcElement;
}

Mais Olivier l'avait déjà dit ... ;-)


Pour "attraper" un élément 'cible' qui aurait l'événement déclencheur,
on peut aussi faire :

var ev = ev || window.event;
var cible = ev.target || ev.srcElement;

Exemple :
(avec en prime le truc ? : )

<script type="text/javascript">
function targ(e) {
e = e || window.event;
var cible = e.target || e.srcElement;
alert( cible.tagName + 'n' +
(cible.className? cible.className : 'pas de class') );
}
window.onload = function() { document.body.onclick = targ; }
</script>

--
Stéphane Moriaux avec/with iMac-intel

Le 26/01/11 22:36, Pascal a écrit :

Le 26/01/2011 19:02, Pascal a écrit :

http://cjoint.com/?0bAtbHZiGjq

Et comme ça, ce n'est pas plus simple ?
http://cjoint.com/?0bAwF7QR8hK

Heu ...
pourquoi "Le chien" indiqué comme sujet donne t-il 2 points ?
pire :
pourquoi "Le" indiqué comme sujet donne t-il 1 points ?


<script type="text/javascript">
document.getElementById('exo').onclick = souligne;
document.getElementById('correction').onclick = corrige;
function souligne(ev) {
ev = ev? ev.target : window.event.srcElement;
if (ev.tagName != "SPAN") return;
ev.className = document.getElementById('type').value;
document.getElementById('score').value = "";
}
function corrige() {
var score = 0,
mots = document.getElementById('exo').getElementsByTagName('SPAN'),
n = mots.length;
while(n--)
with(mots[n]) if(className && id.indexOf(className)>=0) score++;
document.getElementById('score').value = score;
}
</script>

--
Stéphane Moriaux avec/with iMac-intel

Le 28/01/2011 09:46, SAM a écrit :

mais ... à qui, à quoi réponds-tu ?
sur quel(s) NG(s) es-tu en même temps ?

Hé, Stéphane, y faut arrêter le calva dès le matin ! ;-)
Il y a deux Pascal(s) sur ce groupe, cf. l'adresse e-mail différente
pour chacun de nous (bien que ça ne soit pas une preuve absolue).

Pour "attraper" un élément 'cible' qui aurait l'événement déclencheur,
on peut aussi faire :

var ev = ev || window.event;
var cible = ev.target || ev.srcElement;

C'est pas faux !
Mais pourquoi écrire en deux lignes ce qui tient en une ?
Enfin, on va pas se battre là-dessus, surtout que ton écriture est assez
courante dans les exemples du web.


--
Cordialement,
Pascal