« Orb Button Effect - Photoshop Part
Yahoo! Mail Beta Version »

Orb Button Effect - Dreamweaver Part



This set of tutorial will show on how to create a very basic mouse over effect in html/css. Therefore this tutorial will spilt into 2 parts:

  1. Orb Button Effect - Photoshop Part : which will show how the button is made
  2. Orb Button Effect - Dreamweaver Part : which will show on how to make a simple basic mouse over effect with html/css

**note** this is a very basic tutorial

Now with the html/css part. In this tutorial I will be using the Macromedia Dreameaver 8.

  1. Create a new html document. You will have all the default codes in this new document. Leave it as it is because all of these codes are essential, not here but other html/css codes which you might be using in the future.
  2. In the <body> tag, put in this codes
    <a href=”#”></a>

    This is to make a hyperlink on the page itself. The # will be the hyperlink’s target.
  3. While in the <head> part, below the <title>, put in the below codes

    <style>
	a,visited {
		width: 101px;
		height: 144px;
		background: #ffffff url(mouse-active.jpg) no-repeat;
		display: block;
	}

	a:hover {
		background: #ffffff url(mouse-over.jpg) no-repeat;
	}
</style>

    The a,visited is to set how the button looks like in the default and after click state. Find out the width and height of the button images where you’d saved during the Orb Button Effect - Photoshop Part, then put in the numbers accordingly.
    As for the background, the #ffffff is set to show white color in case the image hasn’t load yet. URL is obviously where your image was saved. Choose the mouse-active.jpg. The no-repeat is set to disallow the image from repeating.
    display: block is to make sure the button active area is covered along the whole width and height that you’d put in above.

    a:hover is how your button will looks like when the mouse is on top of the button. Here we will only need the background attribute as it will follow the a,visited attribute. Choose the image of mouse-over.jpg.

  4. Now save the work as .html and view it, you will have the mouse over effect to be working!

To view the example, Click Here. Together with an example done by doing small changes on the image in Orb Button Effect - Photoshop Part





Related Entries


24 Comment(s) On This Topic

xzbfnozhsh said during May 29th, 2007 at 4:57 am

Hello! Good Site! Thanks you!

boon said during May 29th, 2007 at 3:12 pm

no prob dude.

blah blah said during June 6th, 2007 at 10:29 am

Stack both images one on top of the other and use the background-position CSS property to shift the image “up” to display the hover image. This is to force the browser to load both images together instead of waiting until you hover.

boon said during June 6th, 2007 at 9:53 pm

for me i prefer to do it the way which i showed because my aim is to have the page to load as fast as possible.

If there’s a lot of button which has a mouse-over image on a single page, then it would take up more loading time to load 2 images for 1 button compare to loading 1 image for 1 button.

D said during June 12th, 2007 at 3:14 am

Hey there,

Just wanted to point out that “a,visited” is not the proper way to declare a pseudo element in CSS. The correct formate would be “a:visited”. It appears that “a,visited” works when I tested it but it is not part of the W3C’s CSS declarations.

http://www.w3.org/TR/CSS1#pseudo-classes-and-pseudo-elements

Just thought I’d let you know.
Thanks

boon said during June 12th, 2007 at 10:46 pm

hi D, thanks for information. However, in the page it said a:visited is a valid css, and it did not said that a,visited is not a valid css.

i’d used the w3c Markup Validation Service to validate it and it showed that it is Valid XHTML 1.0 Transitional ;)

djdjd said during July 4th, 2007 at 1:58 am

Absolutely rubbish!
Doesn’t work!
Tried!
Had expert advice and they said what I was doing was wrong!

boon said during July 4th, 2007 at 10:56 am

Thanks for trying it out mr who had an expert advice, Hmm, why u still trying it since u already had an expert adviser? Anyway, dare to show out what is absolutely not rubbish which really works as what u said to us here so that we could have a look?

dun be shy~ at least leave a proper name here ;)

RED68 said during January 9th, 2008 at 5:21 am

Hi

I am on a very steep learning curve with all of this, so may I say firstly a huge ‘Thanks’ for having the patience to show those of us starting out how to create cool looking effects! I wish I could make use of the Dreamweaver element of the ‘Glass Orb’ tutorial…..but when it comes to designing in code, I’m afriad I’m totally lost!! Any chance of the same DW info but for those of us only able to create in ‘Design View’? I know we should maybe all try to learn the code…but hey…one step at a time! ;-)

Thanks …

boon said during January 9th, 2008 at 10:22 am

hi RED68,

if in Design View, u can go to insert > image object > rollover image to create a rollover effect. However this way is not very encouraging because it generates a whole lot of functions which will make u nothing more than confusion when u want to make changes of do some modification.

if u happen to know javascript, u can also have another option whereby u write ur own function on the “onmouseover” and “onmouseout” to trigger the image swapping, the code would definitely be much simpler and lesser compare to the Design View method eventhough both are using the javascript’s mechanism ;)

pradeep said during March 7th, 2008 at 3:17 pm

ya it nyce

gry4a said during April 14th, 2008 at 5:47 am

Good sitess 130420088

ïðîñòèòóòêè Ìîñêâû said during April 18th, 2008 at 8:49 am

http://prostitute-w.blogspot.com/ ïðîñòèòóòêè Ìîñêâû

ïðîâåðåííûå ïðîñòèòóòêè said during April 19th, 2008 at 10:38 am

http://provprostitytri.blogspot.com/ ïðîâåðåííûå ïðîñòèòóòêè

Ìîñêîâñêèå ïóòàíû said during April 20th, 2008 at 7:02 am

http://pytanas.blogspot.com/ Ëó÷øèå Ìîñêîâñêèå ïóòàíû

George said during April 23rd, 2008 at 8:44 am

sexi! omg, i love the orbs, so nice :D

TeoJ said during May 9th, 2008 at 8:47 pm

Rubbish indeed …

I found something more usable. I can add, as they say, “Photoshop-like to images directly from Dreamweaver”. You can find it here:
http://www.extendstudio.com/Products/Creative_DW_Image_Effects/Overview/

akI said during September 5th, 2008 at 3:33 am

kewl tutorial.. liked it..!! thanks for sharing!!

nc schools n c union county said during October 16th, 2008 at 2:44 pm

c union n schools county nc nc schools union n county c

career nursing different said during October 17th, 2008 at 2:03 am

careers nursing career nursing careers career

Dass said during December 1st, 2008 at 6:12 pm

Good Work, Keep Going…
The Detailed Explaionation for evry code and screen shots is very much helpful for beginers like me.
Tnks

Hero said during April 19th, 2009 at 4:57 pm

jawatan kosong kastam
causes of world war 1
resident evil 4 walkthrough
da form 705
weave bob hairstyle
free blackberry applications
vin number search
you had a bad day lyrics
pantsed
runescape quest guide

duiqmq said during February 4th, 2010 at 7:11 am

eaSLXV zdaawbjnqufl, [url=http://hwuduqyrrgix.com/]hwuduqyrrgix[/url], [link=http://tpdyvtopidxq.com/]tpdyvtopidxq[/link], http://iirvclkkdzhr.com/

Leave a Reply