logo-dw

Go Back   Dreamweaver Club Forums > Graphic Design > Fireworks
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 04-12-2010, 08:56 AM   #1
enigma77
 
Join Date: Apr 2010
Posts: 22
Default PNG file for Rollover buttons

Hi, can a PNG file can be used for rollover buttons, I tried but I could not create the states to show different images?
enigma77 is offline   Reply With Quote
Old 04-12-2010, 02:48 PM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Yes, you can use a png file for a rollover, just the same as you use a jpg or gif.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 04-12-2010, 03:56 PM   #3
enigma77
 
Join Date: Apr 2010
Posts: 22
Default

The problem is that I can not create a blank second state, where I would then put the second image, as I create a new duplicate state the first image shows on both states. As I remeber I should get a blank field, where I would put the second image and then set a behavior. I edit my buttons from dreamweaver which brings me then to fireworks.
enigma77 is offline   Reply With Quote
Old 04-12-2010, 04:57 PM   #4
enigma77
 
Join Date: Apr 2010
Posts: 22
Default

ok I figure that out, it works with PNG files, but I have a problem. Now that Javascript is applied to that rollover buttons, their position in browser is all messed up, they should be at left sidebar, but when I apply the rollover the middle section of page is streched and buttons are in the middle, any clues.
enigma77 is offline   Reply With Quote
Old 04-25-2010, 01:35 PM   #5
Rob_Che
Rob_Che's Avatar
 
Join Date: Feb 2008
Posts: 1,552
Default

Use .css for this - much easier. Either with two images or with background position.

Using two images...
Code:
.mybutton a {
height: 20px ;
width: 100px ;
background: transparent url(/images/image1.png) top left;
}
.mybutton a:hover {
background: transparent url(/images/image2.png) top left;
}
or background position . . .

Code:
.mybutton a {
height: 20px ;
width: 100px ;
background: transparent url(/images/image1.png) 0 0;
}
.mybutton a:hover {
 background: transparent url(/images/image1.png) 0 22px;
 }
Rob_Che is offline   Reply With Quote
Old 04-25-2010, 01:57 PM   #6
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by Rob_Che View Post
background position . . .

Code:
.mybutton a {
height: 20px ;
width: 100px ;
background: transparent url(/images/image1.png) 0 0;
}
.mybutton a:hover {
 background: transparent url(/images/image1.png) 0 22px;
 }
For the .mybutton a:hover is only the background-position enough because you're already requesting for that image in the .mybutton a rule, Rob. One of the biggest advantages of using CSS sprites is that you reduce the HTTP requests
Code:
.mybutton a:hover {
background-position: 0 -22px;
gentleone is offline   Reply With Quote
Old 04-25-2010, 02:09 PM   #7
Rob_Che
Rob_Che's Avatar
 
Join Date: Feb 2008
Posts: 1,552
Default

Indeed... I was just rattling it off the top of my head...

You know what I meant
Rob_Che is offline   Reply With Quote
Old 04-25-2010, 02:14 PM   #8
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

I thought already that it could be also a quick copy/paste 'mistake' of you
gentleone is offline   Reply With Quote
Old 04-25-2010, 03:43 PM   #9
enigma77
 
Join Date: Apr 2010
Posts: 22
Default

i manage to fix the rollover button problem,
here is the page I`m working on http://www.gradbenistvo-hamo.si/

as I understand the rollover buttons made with css works smoother in some browsers like IE6,7,8

anyway thanks for suggestions
enigma77 is offline   Reply With Quote
Old 04-25-2010, 04:18 PM   #10
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Quote:
Originally Posted by enigma77 View Post
as I understand the rollover buttons made with css works smoother in some browsers like IE6,7,8
Indeed... and it has a whole lot more advantages than your JavaScript rollover
I don't understand why Adobe still has integrated that ancient 'rollover image' plugin in DW. Ah well... perhaps it's gone in CS5.
gentleone is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:26 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com