Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works

How do you make a graphic change from mouse hover?

  • Please log in to reply




  • Member
  • PipPip
  • 59 posts
Ex: You hover mouse over "enter" button, and the enter button gets slightly darker. How can I make something like that. Maybe with Macromedia Fireworks?
  • 0




    Member 1K

  • Retired Staff
  • 1,411 posts
Make two images then just switch images when the mouse goes over it. Most people will probably tell you the easiest way to do this is with Javascript, and while this is perhaps true, it is not, in my opinion, the best way. I like doing it with purely CSS. Here's how:

Put this where you want the image to be:

<a id="image1" href="#"><span class="alt">Enter</span></a>

Put this inside the <head></head> tags (or if you already have CSS code get rid of the <style> brackets and add this to it):
<style type="text/css">

	display: block;
	width: WIDTHHEREpx;
	height: HEIGHTHEREpx;
	background-image: url(URL TO ORIGINAL IMAGE.gif);
	margin: 0 auto;
	background-image: url(URL TO MOUSEOVER IMAGE.gif);
a .alt
	display: none;


Hope this helps :whistling:
  • 0




  • Member
  • PipPipPip
  • 266 posts
Alternatively you could make it using Flash. Load the pic into Flash, click on Modify>Convert to symbol and select button. Then double click on the image and you will see the timeline changes to four keyframes (Up, Over, Down, Hit). Up would be the normal state of the button.

Right click on the 'Over' frame (the state the button will be in during mouse hover) and select 'Insert Keyframe'. Now click on the image itself and go to modify>convert to symbol>movie clip. Double click on the image again. You will be presented with a new timeline.

Insert a frame on about the 10th frame (right click on the tenth frame and select 'Insert frame'). Right click on the little white box in the timeline and select 'Create motion tween'. The bar should be a bluish colour now. Right click on the last frame of this and select 'Insert keyframe'.

Now click on the first keyframe, then click on your image. On the bottom panel (in Properties), you should she a section that says 'Color' with a drop-down menu. Click the drop down menu and select either Alpha, colour, tint or brightness. In your instance, i would suggest using either tint or colour. Use the slider to achieve the desired lightness/darkness. Your first keyframe would be the lighter tint while the last keyframe would be the darkest.

Go back to your button (by clicking on 'symbol' below your timeline) and if you want you can change the 'Down' state in the same manner. The 'hit' keyframe merely tells the program where the 'hit area' will be, simply insert a keyframe there, no altering necessary. Hope you actually have access to Flash and that this helps!

Edited by BlackHalo, 20 May 2008 - 05:05 PM.

  • 0

Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP