Did you know neopets have currently 276 exisiting emoticons for you to use on the neoboards ? That's a lot of reactions ! :P
As I got more involved on the neoboards, I started getting used to rythm my neopians rhymes with emoticons :) They are just so great full of life, reflecting the specific personality of the website you are consulting *meepit*. Emotes got a new rise in popularity in the last few years with live-streaming and v-tubers, but I still miss the unique charm of good old 90's, super pixelated and bright emoticons of the past internet. :(
Building this website, I felt the need to bring the energy from neopets to my space (dedicated to neopets). I thought it would be cute to express myself with neo-emoticons, and maybe even let people bring them to their own website. 0:-)
So here it is : the first, kinda crappy, version of NeoEmoticonsJS ! B)
A bit of a disclaimer first : if you inline your css or your javascript inside of the body tag, the script could cause some issues at first. Also, because the script will run after the page is fully loaded, there might be a little "blink" (see : Cumulative Layout Shift). If you don't know what I'm talking about, you probably will not need to care. Otherwise, this might not be a solution for you unless you are generatic a static site and using an ssg in which case you could most probably adapt this script to run at build time.
Setting up NeoEmoticonsJS
There's nothing as simple as that ! All you need to do is download the NeoEmoticonsJS script onto your website. You now have two ways of using this script. :D
1. NeoEmoticonify a string
You can NeoEmoticonify a string by using the
NeoEmoticonify(string, basePath) function. The
string parameter is the string you need converted, the
basePath parameter is the path to use to load the emoticons. You can
omit specifying the base path to load the emoticons directly from the
neopets website. However, to
avoid hotlinking, you are encouraged to download the
emoticons folder
and host it on your website. :)
The function will return a string containing the HTML with the neo-emoticons images !
2. NeoEmoticonify the whole page
This is probably the function you'll want to use the most. call
NeoEmoticonifyPage(basePath) to load all neo-emoticons as soon
as your page is loaded ! just place the following code in your head tag :
Wait... If your website is a single page application, meaning the whole page is not reloaded each time a link is clicked, then the neo-emotification is not going to apply to the next pages your user visit. In that case, you can manually call NeoEmoticonifyPageNow() function ! You can also make use of the NeoEmoticonify() function we talked earlier... It's up to you ! *lol*
Conclusion
You can now neo-emoticonify your pages as you wish ! And with so many emoticons, you have more than enough choise to sprinkle some neopian charm into your website !
*elephante**lutari**vandagyre**kougra**wizard**rohane**pinchit**slorg**cookie**eventidepppb**islandpb**icecream**jelly**mspp**physical**jinjah**raincloud**indubitably**catfish**awakened**illusen**jhudora**abigail**aaa*
Want to know what code you need to use what which emoticon ? Consult Jellyneo's Neoboard Emoticons page for a full list of emotes !
This concludes my presentation ! With this in your hands, you have all it takes to let your creativity shine ! *popcorn* Have fun with neo-emoticons *slorg* !