How do you make a graphic change from mouse hover?
Started by
Alaster
, Jul 04 2007 06:23 PM
#1
Posted 04 July 2007 - 06:23 PM
Alaster
-
- Member
-
- 59 posts
Member
#2
Posted 05 July 2007 - 08:05 PM
mpfeif101
-
- Retired Staff
-
- 1,411 posts
Member 1K
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:
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):
Hope this helps
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">
a#image1
{
display: block;
width: WIDTHHEREpx;
height: HEIGHTHEREpx;
background-image: url(URL TO ORIGINAL IMAGE.gif);
margin: 0 auto;
}
a#image1:hover
{
background-image: url(URL TO MOUSEOVER IMAGE.gif);
}
a .alt
{
display: none;
}
</style>Hope this helps
#3
Posted 20 May 2008 - 04:54 PM
BlackHalo
-
- Member
-
- 266 posts
Member
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!
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.
Similar Topics
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
As Featured On:
Sign In
Create Account
