Type in key words and search my blog here:

Loading

Wednesday, January 28, 2009

MOUSEOVER

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
-->
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!

7 comments:

  1. Jeanette,
    Thank 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

    ReplyDelete
  2. What you did to that photo is so neat!!! I nearly fell of my chair!! !*haha*
    xxx

    ReplyDelete
  3. cool pix, i didnt try this one as Iam still struggling to do the background bits. . . take care

    ReplyDelete
  4. Hi Jeanette! love your blog look! :-) great job on the layouts, i wonder.. do you also make wordpress themes? :-)

    ReplyDelete
  5. Jeanette,
    I 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

    ReplyDelete
  6. 1. I’m wanting to use mouse over hover on my made button picture links ..
    Newer 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 .

    ReplyDelete
  7. http://lpalta.blogspot.com/July 6, 2009 at 8:56 AM

    I soooo love your blog. I am able to generate the code, but am receiving error when editing my template (template not parsed right...?)

    lucy

    ReplyDelete

Thanks for taking time to leave a comment. I would love for you to include your blog address

Just copy and paste the following in your comments and add your blog address and blog name, and you will easily post it in your comments. Don't leave any spaces!

<a href="YOUR BLOG ADDRESS HERE/">YOUR BLOG NAME HERE</a>

-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette

ONE SIZE TEMPLATE

ONE SIZE TEMPLATE
Blog Background Template