Making Your Images Glow at the Touch of the Mouse

Say you want to add a cool effect to your website that lets your visitors know exactly which images are clickable and which aren’t. The “glow” effect from Photoshop is a great tool for achieving this, but how do you make it so it glows only when the viewer is hovering over the link? This blog post will teach you all about not just adding this eye-catching glow to your images, but writing in codes to make it appear and disappear depending on its contact with the mouse.

First things first, you’ll need to edit all of your photos in photoshop. Since the subject of my project is on spirituality, I chose different religious symbols as my clickable images. I edited my photos to be a uniform size and have a uniform background and then saved this round of photos. In the end they looked like this:

After you’ve saved all of these original files, you’ll want to save a duplicate copy of each image. This will be the image used for the glow. Open up one of your duplicate photos and then click on Layer >> Layer Style >> Outer Glow. Your screen should look like this:

You can play with the various elements listed in this box to achieve your desired result. As you can see, I chose a golden yellow for my glow color and altered the spread and size according to how dramatic I wanted the glow to be. Feel free to have fun with this part!

Once I got all my photos glowing, I saved these new image files under a different name than the plain black ones. Now comes the fun part: coding.

You’ll first have to define your script language and specify all of the photos you want to put on your website. This part is kind of weird because it goes after the ending head tag, but before the body tag. Your code should look something like this:

<SCRIPT language= “javascript 1.1”>

jpgBuddha= new Image (200,200)

jpgBuddha.src= “Buddha.jpg”

jpg BuddhaGlow= new Image(200,200)

jpgBuddhaGlove.src= “BuddhaGlow.jpg”

The first line indicates what your first image will be (the plain black ones for me) and the second line tells the computer what image file this is. The parentheses of (200,200) are a pixel measurement of the height and width of your photo. You can alter this however you like. The third line indicates the second glowing image, while the fourth indicates where the computer can find this image. Repeat these sets of four lines for every image you have and apply the following code at the end:

function changeImage(cImg,ref) {

            document.images[cImg]. src= ref.src


After this, you’ll have to locate the code for the image you want to put on your site. If the image is not on your site, you’ll need to add it in a table or whatever you’d like. Once you find the image you’ll need to customize it with the following code:

<A href= “homePage.html” onMouseOver=”changeImage(‘imgBuddha’,jpgBuddhaGlow)” onMouseOut= “changeImage(‘imgBuddha’,jpgBuddha)”>

This code basically tells the site which image to show when the mouse is hovering over the link and which image to show when the mouse is away from the link.

Here’s my final result!

If you want to see this effect in action, check out my website:

– Natalie Russell


~ by Madame Psychosis on October 14, 2012.

%d bloggers like this: