December 18, 2009

It would be cool if we can make a rollover image in our post here at Blogger. You know, like when we're pointing our mouse on top on a picture the picture will glow or change, like the Navigator Button above.
The code would be simple, it is



IMAGE-URL-DESTINATION is for where the picture take us if we click the picture
IMAGE-1-LINK is the first picture when the mouse not touch and leave the picture
IMAGE-2-LINK is the picture when our mouse hovering the picture

As for good understanding I'll tell you these

onmouseover means our mouse is hovering the picture
onmouseout means our mouse leaves the picture

you can add another code like onmouseup that means the picture change when you release the mouse's click button or onmousedown means the picture change when you click the button

This one is for an example


It would be like this 'button' below



Yes, as you can see src means the source of the pictures, and they pick the picture from the net.
Well, how can you add the picture to the net?
It's suppose to be easy.
just go to your Google account (if you're a Blogger you have a Google account) then in My Products click Picasa web album
Click your Blog album
There is an Add Photos button, click it and you'll upload your picture
Now, to know where is the picture's address click the picture in Picasa > My Photos > your Blog album
Click the picture you want
Right-click the picture and then choose Properties
you'll see an Element Properties Box and can see or even Copy the location
Now you can Paste it in your code

No comments:

Post a Comment

thank you for your comment