glitch text mouseover tutorial

last fall, i released the glitch text generator and text art canvas, along with the scripts that make it work, but the original glitch text scripts were not as simple to use for mouseover actions as they could have been. so i've now simplified them into these glitch text mouseover scripts (download zip file).

using the mouseover scripts is relatively straightforward depending on how comfortable you are working with HTML. there are two basic parts:

  1. somehow include the glitch text scripts in your page.
  2. create an HTML element that has the required mouseover events needed to call the scripts.

1. including the scripts — you can do this in two ways, and they both require you to add a <script> tag to your header. you can either link to the scripts as an external file, or you can copy and paste the scripts into a script tag. (i'd prefer people either host the script file on their own server or copy and paste the scripts, rather than leeching off my server bandwidth. if you do copy and paste, don't try to take credit for my work, because that's not cool.)

2. mouseover events — this is where you tell the browser what code to glitch, and how. you do this by adding some code to the HTML element that directly contains the text. it's important that you do this on the immediate parent element that contains the text. for example, you can glitch an entire paragraph of text, but any other elements inside that element (links, bold/italics, etc) might get broken when the mouse hovers over that paragraph.

the following examples all use <h2> elements but the scripts would also work for div, span, p, strong, em, a, and the like.

example 1 — glitchTextMouseover(this)

randomly apply a diacritic to one character

create an onmouseover "listener" than "listens" for when the mouse is above the text, and then runs the script glitchTextMouseover.

hover mouse to glitch this text

<h2 onmouseover="glitchTextMouseover(this)">hover mouse to glitch this text</h2>

example 2 — onmouseout

glitched characters "disappear" when you move the mouse away

in example 1, you may have noticed how the glitched characters remained onscnreen after you move your mouse away, such that if you move your mouse over many times, they start to pile up. this is a cool effect, but it can get pretty messy. so you may want the glitched characters to only appear while the mouse is hovering over the text.

to do that, add an onmouseout listener telling it to reset the text using this.innerHTML. it won't remember what the text was originally, so you instead you just tell it the text again, in quotes:

hover mouse to glitch this text

<h2 onmouseout="this.innerHTML = 'hover mouse to glitch this text'" onmouseover="glitchTextMouseover(this)">hover mouse to glitch this text</h2>

you could even use this to put up different text for some reason:

hover mouse to glitch this text

<h2 onmouseout="this.innerHTML = 'hover mouse again to glitch this text again'" onmouseover="glitchTextMouseover(this)">hover mouse to glitch this text</h2>

example 3 — glitchAllMouseover(this)

apply random diacritics to every character

the glitchAllMouseover script is exactly the same as glitchTextMouseover, except it runs on all characters in the string. this includes diacritics, so they can stack up very quickly — be careful using this without onmouseout.

hover mouse to glitch this text

<h2 onmouseout="this.innerHTML = 'hover mouse to glitch this text'" onmouseover="glitchAllMouseover(this)">hover mouse to glitch this text</h2>

example 4 — glitchAllSameMouseover(this)

pick a random diacritic and apply it to every character

hover mouse to glitch this text

<h2 onmouseout="this.innerHTML = 'hover mouse to glitch this text'" onmouseover="glitchAllSameMouseover(this)">hover mouse to glitch this text</h2>

example 5 — skipping spaces

tell the script to ignore spaces

several scripts have an optional final skipSpace attribute. setting this to true tells the script to ignore spaces. you might want to do this if your text is made up of multiple words and you want to preserve word wrap. otherwise the spaces get lost and you get one really long string of text.

hover mouse to glitch this text

<h2 onmouseout="this.innerHTML = 'hover mouse to glitch this text'" onmouseover="glitchAllSameMouseover(this,true)">hover mouse to glitch this text</h2>

this attribute is available on the glitchAll and randomize scripts.

example 6 — glitchTextPreciseMouseover(this, 'x33f')

apply a specific diacritic to one random character

if you want to choose a specific diacritic, you have to tell the script which character to use. the information you use for this is the called the HTML Entity number. there are two formats — decimal and hexadecimal. the advantage of decimal is that you don't even have to surround the number with quotes when you pass it to the script (though you can), but hexadecimal may be easier to find.

this example uses the character combining double overline, which is &831; decimal or &x33f; hex, so we pass it the value 'x33f'. (hex values always begin with x.) you could also pass it 831 (either with or without quotes); hex is used here for demonstration purposes.

some good resources for finding and identifying unicode characters (and finding their HTML entity numbers) are fileformat.info, charbase.com, babelstone.co.uk, and of course the glitch text generator and text art canvas.

hover mouse to glitch this text

<h2 onmouseover="glitchTextPreciseMouseover(this, 824)">hover mouse to glitch this text</h2>

example 7 — glitchAllPreciseMouseover(this, 824)

apply a specific diacritic to every character

see example 6 above for more on how to tell the scripts which diacritic to use. this example uses the character combining long solidus overlay, which is HTML entity &#824;.

hover mouse to glitch this text

<h2 onmouseout="this.innerHTML = 'hover mouse to glitch this text'" onmouseover="glitchAllPreciseMouseover(this, 824)">hover mouse to glitch this text</h2>

example 8 — randomizeTextMouseover(this)

replace every character with a random character

this is the basic "randomize" script.

hover mouse to glitch this text

<h2 onmouseover="randomizeTextMouseover(this)">hover mouse to glitch this text</h2>

example 9 — randomizeInRangeMouseover(this, 97, 98)

replace every character with a random character from a specific range

this randomize script allows you to be extremely precise about which characters are used. to emphasize the point, i've used a range of just two characters: 97-98, or lowercase a and b.

this script only accepts decimal entity numbers. see example 5 for how to tell the script which characters to use.

hover mouse to glitch this text

<h2 onmouseover="randomizeInRangeMouseover(this, 97, 98)">hover mouse to glitch this text</h2>

example 10 — randomizeBlockMouseover(this, 'Shapes')

replace every character with a random character from a specified "block"

dealing with HTML entity numbers is a pain, so this script lets you pick a block of characters by name. the block names are written into the script, so if you don't give a valid value, you'll get &NaN; (not a number).

hover mouse to glitch this text

<h2 onmouseover="randomizeBlockMouseover(this, 'Shapes')">hover mouse to glitch this text</h2>

this example uses Shapes. read the script files for a full list of options — there are a bunch — but some good ones include:

(note that some options like Pictographs and Music use characters with very poor font support. you won't be able to see them unless you have fonts like Symbola installed; it probably doesn't make sense to use these options for public websites.)

advanced usage

you could experiment with various types of events or even combine multiple scripts on the same element! scramble your text one way when the mouse hovers over it, and another way when the mouse leaves. you get the idea.

the mouseover scripts are stripped-down versions of the full glitch text scripts. for more advanced scenarios, you may want to use those scripts instead. they're more complicated and have more required variables, but allow you to do things like use one element to control another. check the glitch text scripts documentation for more on how those work.

questions/comments/feedback

i'm not a professional programmer and my code is probably lousy with bugs and unintended errors (the bad kind, I mean). likewise, there are probably some amazing features that I could add to the scripts or the HTML5 generator that I haven't thought of. shoot me an email at stallio@animalswithinanimals.com with your comments, code suggestions, questions, kudos, or other laudations. hate mail should be sent directly to the trash.