MOUSEOVER ~ THE EASY WAY!
I am always on the look out for "blog improvement," and one of the ideas I have been working on over the last 6 weeks, is the idea of the buttons or tabs looking different when you scroll over them to indicate interaction. I was intrigued by Vin's article on mouseover found here. I really didn't understand those directions. I wanted to discover if I could use mouseover to create the interaction I needed on my navigational tabs! I did it! Try it for yourself. If you scroll over my nav tabs at the top of the blog, you will see the tabs change color, it is more interactive.
I found the coolest site today: It's HTML Basix and it has a mouseover image generator! WHOOTY WHOO! I'm so excited!!! I made the photo widget of my son right above this post. If you scroll over it you will see what happens teens get crazy...LOL!
To create your own mouseover:
Step 1 - Scrap your images
Scrap two images and upload them to HTML Basix. Generate the code. Save it.
Step 2 - Post the Code
Post the code as a widget. Go to CUSTOMIZE/LAYOUT/PAGE ELEMENTS/ADD A GADGET and select a place to post (main column or side bar). I selected main post. When you click on the popup choose HTML/Java Script. When the popup window opens add the code you copied from Step 1. Select SAVE.
***Please note, you will need to delete the instructions in the code for a widget:
Delete these two lines from the code generated:
<!-- STEP ONE: Insert this code into the HEAD section of your HTML document
<!-- STEP TWO: Insert this code into the BODY of your HTML document -->
Once these lines are deleted you can put into your HTML/Java Script box.
If you use more than 5 images, let's say you made tabs (5 images) and you wanted to make a widget (6th mouseover image), then you need to change the number. The code generator just starts the numbers at 1 again. You can see how this could be a problem, if you're not careful! For example, my blog header took 5 images, so when I created the mouseover widget, I named all the images 6 instead of 1 which is what was automatically generated. As always, if you have any questions, please feel free to ask!