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
-->
and
<!-- 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.
CAUTION:
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!
Jeanette,
ReplyDeleteThank you!!! It was so easy!!! I'm so glad I found your blog, hopefully my blog will look as beautiful as yours!!! Thanks again.
Kathy
What you did to that photo is so neat!!! I nearly fell of my chair!! !*haha*
ReplyDeletexxx
cool pix, i didnt try this one as Iam still struggling to do the background bits. . . take care
ReplyDeleteHi Jeanette! love your blog look! :-) great job on the layouts, i wonder.. do you also make wordpress themes? :-)
ReplyDeleteJeanette,
ReplyDeleteI generated a code but it looks like two codes actually, I'm not sure what I put in the widget box? Neither seems to be working for me. I have tried separately, and together.
Any help would be appreciated.
Cathy
ChatyC126@aol.com
1. I’m wanting to use mouse over hover on my made button picture links ..
ReplyDeleteNewer post ….home… older post.. etc.
see here
to this on mouse over
I would like to do this with all tree buttons
My problem is I know that I’ll need to add javascript in the head
Then add image script in body I can’t get to work..
Also tried this gen
http://www.htmlbasix.com/mouseoverimages.shtml
but get error
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "SCRIPT" must be terminated by the matching end-tag "".
Both of the generators end up giving me a error template not parsed right or end scripts wrong ?
my blogger test page
http://themirrortestpage.blogspot.com/
I’ve worked on this for a few hours can’t get it right .
I soooo love your blog. I am able to generate the code, but am receiving error when editing my template (template not parsed right...?)
ReplyDeletelucy