Hover/Roll-over Image

Hello! I am a current WordPress user of three years and have been currently redesigning my website. I have a cookie business, and want to have it where if someone rolls over the image of a cookie on my flavors page, the image will change to the name of the cookie (obviously a different image). I have looked through multiple forums and websites trying to find the right code but it is either outdated, or I am unsure how to use the code. I am using the wordpress.com functions, and understand the difference between wordpress.com and .org–which is also another problem–some forums do not state whether or not it should be used with a blog off of wordpress.com, or a self-hosted WordPress blog off of www.ads-software.com. Also, I am on a student computer, and am therefore not able to download any applications such as Javascript (so please do not mention that as an option please). I have tried the code on here: https://www.spiceupyourblog.com/2009/10/how-to-make-rollover-mouse-over-image.html (changed the settings on my page when editing to “text” instead of “visual”, so I understand how that works, along with the image URL. Just whenever I enter the different URL’s and I click “update”, the code changes itself and when I view the page, only the first image shows up, and doesn’t change if I hover over it. (It does, however, link to my blog address, as that is what I set it to–though it is unnecessary for me in this case). What would you suggest doing? Thank you!