For some reason I struggled, and struggled, and STRUGGLED with making rollover buttons for my site. I don’t know what my problem was, but it felt like a monstrous challenge. I read tutorials. I watched videos. For some stupid reason NOTHING was working. All I wanted was cool link buttons for my sidebar than changed when you moused over them. When the link worked, the rollover image didn’t change. When the image changed, the link didn’t work. What’s a girl supposed to do? Scream and bang my head against the desk?
It was annoying, frustrating, and drove me absolutely up the wall. I hate feeling outsmarted by a computer, so I refused to give in and be happy with my not-nearly-as-cool static buttons. http://busingers.ca/partners/quebecor Eventually….. I got it!!!! I swear, the clouds parted, angels sang, and my little sidebar button changed colors when I clicked them. {cue ooooohhs and aaahhhhs…..} It was a beautiful moment. Which got me thinking, maybe I should post my resolution here, and save someone else my pain and suffering.
http://ayurvedic-treatment.com/category/ayurvedic-treatment/page/3/ Ready? Here we go.
First, you will need to create two graphics. You need to decide what you want the image to look like before you click on it, then after you click on it. Maybe something will change size, or change color. Maybe an additional element will appear. Whatever you do, make sure both your before and after images are the same dimensions. If your first graphic is 200 x 200px (like mine is) then make sure your second one is as well. When you save them, it’s helpful to add “rollover” to the second image so you don’t get them confused. Example: myimage.jpg and myimagerollover.jpg, or myimage2.jpg and myimage2rollover.jpg
http://jennmolo.com/cuticule-cream-3/ Here are my two graphics.
Now, you need to update both images to your word press library. Make sure to note the location of the images, as you’ll need it later in the process. Either write it down, or make your life easy and paste it in Text Editor (Mac) or WordPad (PC). You’ll want to make sure your editor is set to Plain Text and not Rich Text.
So now your images are in your library. Great. Now you’re going to go to Appearance–>Widgets in your WordPress Dashboard. Once you’re there, you’ll drag the Text Widget over to your sidebar. You will need one Text Widget in place for each button you’ll eventually have. For simplicity’s sake, let’s say you have two.
Here’s where it gets a little more complicated, so read carefully.
http://hillaryaugustine.com/to-look/ Type this code into your Text Widget. All of the purple text is going to be replaced with your own information.
<a href=”http://www.yourlink.com”
target=”_self“
onmouseover=”document.rollover_1.src=’http://www.locationofBEFOREimage.jpg'”
onmouseout=”document.rollover_1.src=’http://www.locationofAFTERimage.jpg'”>
<img src=’http://www.locationofyourBEFOREimage.jpg’
style=”width:200px; height:200px;”
alt=”rollover image sample“
name=”rollover_1“>
</a>
dyslogistically In case you’re still confused, I’m going to break it down a little further. {My notes are in italics}
<a href=”http://www.yourlink.com”
This is the page or site that you want the link to take you to
target=”_self“
If you want to link to open in the SAME window, enter self. If you want it to open in a NEW window (like if you’re linking to an external site), replace with _blank.
onmouseover=”document.rollover_1.src=’http://www.locationofBEFOREimage.jpg'”
Pretty self explanatory. Replace the purple text with the ACTUAL location of the image. Remember when you wrote it down or pasted it in Text Editor? Good. Now just plug it in. If you forgot to do this you can always go back to your image library and look it up again. Also, note the document.rollover_1. You need to name ALL of your buttons differently in order for them to work properly. Go with something easy, like button1, button2, button3 etc. You’ll be glad you kept it simple.
onmouseout=”document.rollover_1.src=’http://www.locationofAFTERimage.jpg'”>
You want to replace www.locationofyouAFTERimage.jpg with the ACTUAL location of it again. This is your original image again, the one your viewer saw BEFORE they moused over your image. However, if for some reason you DON’T want the image to go back to it’s original state, then enter the location of your rollover image again.
<img src=’http://www.locationofBEFOREimage.jpg’
This is the location of your BEFORE. Note that this is the SECOND time you’re entering this!
style=”width:200px; height:200px;”
These dimensions should match your own image.
alt=”rollover image sample“
Alt tags are important for people with screen readers. Basically, it’s a little description of the image for people who are visually impaired, or for people whose browsers don’t show pictures. You know when you hover your mouse over an image and that little description pops up? That’s an alt tag. Basically, describe your image, but keep it short and sweet.
name=”rollover_1“>
This needs to be different for each button you want to have. (THIS IS VERY IMPORTANT!) If you name them all the same things they won’t work right. Keep it simple and for your next button, replace all three instances of rollover_1 with rollover_2, or something equally easy.
</a>
Now that you’ve replaced all the important info with your own stuff, double-check EVERYTHING. Are all of your punctuation marks there? If they aren’t, stuff with go awry and your buttons won’t work. Then you’ll be sad and probably think my little tutorial here sucks. Also, when you’re pasting things into place make sure you don’t end up with double endings like .jpg.jpg or .com.com. That will mess things up too.
If you did everything correctly,
you’ll get an image that does this*:
** just a note, when I tested the code above in my sidebar text widget, everything worked fine. When I pasted it in the body area of the post, it didn’t work. So don’t use Firebug to take the source code for the image above for your sidebar…use the code I typed out! **
Want the code for a rollover image link within your post? Here it is…just delete the ‘ marks at the beginning and end of the code.
‘<a href=”http://www.yourlink.com”>
<img onmouseover=”this.src=’http://www.locationofAFTERimage.jpg’;”
onmouseout=”this.src=’http://www.locationofBEFOREimage.jpg’;”
src=”http://www.locationofBEFOREimage.jpg”
alt=”rolloverimagesample“
width=”200” height=”200” />
</a>’