How can I make the next letter appear with the mouse event?

Question

What I want my code to do is when I pass with my mouse on my text, the next letters of the alphabet appear. Not in the console, in the text on my website. How can i do that?

this is an exemple for what i want : the text become unreadable

var conteneur = document.querySelector('.texte2')

var textBalise = conteneur.textContent.replace(/(\S)/g,'$1')
conteneur.innerHTML = textBalise

var $spans = document.querySelectorAll('span')

function nextLetter(ch) {
    if (!ch.match(/[a-zA-ZäöüßÄÖÜ]/i)) return ch;
    else if (ch === 'Z') return 'A';
    else if (ch === 'z') return 'A';
    return String.fromCharCode(ch.charCodeAt(0) + 1);
  }

  for (var $span of $spans) {
    $span.addEventListener('mousemove',(e) => {
      console.log(e.target)
      console.log(nextLetter(e.target.textContent))  
    });
  }



  
    
    
    
    Peut-on encore être graphiste au pays des Templates ?
  
    
       
        Avec l’arrivée du numérique, on doit visionner les documents sur des machines et des écrans différents. Cette différence de support de visualisation est déjà bien connue avec le cinéma. En effet visionner un film en salle ou chez vous est totalement différent. Mais avec l’intermédiaire technique que sont nos ordinateurs, les différences se font encore plus importantes, différence de résolution, du nombre de couleur, de taille, de vitesse d’affichage… Nous avons un codage de l’information puis un décodage avec toutes les variations que cela peut entraîner.
        L’arrivée du langage HTML, qui est qu’un langage de description de page. Ce langage donne des indications au navigateur, qui va lui-même interpréter ces pages afin de les afficher au mieux sur votre machine. Suivant votre navigateur, votre système d’exploitation, votre vitesse de connexion, votre écran, vos polices de caractères installées… la formalisation de la page peut être très différente (codage/décodage).
        C’est la première fois dans l’Histoire (graphique) que le graphiste/typographe perd le contrôle du choix de la police de caractères. En effet en Html, c’est l’utilisateur final qui choisi sa police de caractère et sa taille dans les préférences de son navigateur.
        L’arrivée des CSS a aussi précipité les choses. Dorénavant la forme est totalement séparée du contenu. Il est techniquement très facile de changer la formalisation d’un même contenu sur le Web (savoir si cela à du sens est une autre question). Un des exemples le plus célèbre est sans nul doute : le Zen Garden de Molly Holzschlag.
        Dans le monde du jeux vidéos nous avons exactement le même processus, la résolution, l’aspect graphique, la vitesse… du jeu vont différer suivant votre machine. Les concepteurs de jeux ont pris en compte ce genre de contraintes depuis longtemps.
        L’arrivée des Mods dans les jeux avec Counter Strike par exemple. Le jeu vendu est souvent une démo technique avec la possibilité de faire ses propres "maps". On donne alors à la communauté des joueurs la possibilité de prendre la parole (ou le fusil ;-) il devient alors coauteur d’un jeu. Attention quand je parle de coauteur, ce n’est pas au sens on nous pouvons le comprendre dans le domaine du cinéma ou de la littérature. De plus je vous passe les problèmes juridiques que cela peut engendrer, suis-je le propriétaire de ma Map, de mon avatar, de mon aventure… ?
        Le succès (médiatique) de Second life est un autre un très bon exemple. Des développeurs ont mis à disposition un univers et des outils aux internautes. Petit à petit, les gens ont commencé à développer de petits univers, des objets, des animations… puis un biotope s’est développé presque naturellement (je vous passe mon jugement sur l’aspect formel de Second Life;-).
        L’équipe de Linden lab (les créateurs de Second life), n’a pas imposé un univers fini, elle a au contraire juste posé les bases : un espace virtuel, un langage de script et la possibilité de sauvegarder et d’échanger vos créations virtuelles (vous faisant croire que l’on peut devenir riche sur Second Life, très grande idée Marketing). Pas d’histoires pas de scénario, pas de jeux, juste un grand espace vide, une sorte de grand Légo plein de promesse.
        ps : Si Second Life vous intéresse, lisez absolument le roman de Neal Stephenson : Snow Crash (le ridicule titre français est Le samouraï virtuel). Vous aurez la source d'inspiration principale des créateurs de Second Life. Vous pouvez aussi jeter un ? il sur un des précurseurs français : le deuxième monde d’Alain et Frédéric Le Diberder + Cryo (à partir de 1994).
        Il faut bien sûr citer les systèmes de blog, les Flickr, Ebay et autres MySpace permettant à presque n’importe qui de faire son propre site web, faire sa boutique en ligne et de diffuser photos, vidéos, texte ... très rapidement, facilement et gratuitement (dans la majorité des cas). Nous pourrions continuer longtemps les exemples.
        Nous arrivons donc à un moment ou le commanditaire désire naturellement contrôler le contenu (ce qui est normal) mais aussi le contenant de A à Z sur son site web. Le graphiste/designer voit donc son « pouvoir » se déplacer et migrer vers d’autres responsabilités.
        ps : Une autre raison peu avouable de cette récente demande de plus grand contrôle de la part des commanditaires, est l’abus de certaines Web Agency (pas de noms ;-) durant la période de la bulle internet (avant 2000), ayant franchement escroqué de nombreux clients en sur-facturant la moindre modification dans leurs sites web après la mise en ligne. Les commanditaires étaient souvent pieds et mains liés devant les agences, car ils n'avaient pas un accès technique direct à leurs sites (les agences donnant souvent des prétextes techniques totalement faux).

.x:hover{
color : "red";
}

How can I make the next letter appear with the mouse event?

Answers (1)

Related Questions