PDA

View Full Version : PNG file for Rollover buttons


enigma77
04-12-2010, 08:56 AM
Hi, can a PNG file can be used for rollover buttons, I tried but I could not create the states to show different images?

DWcourse
04-12-2010, 02:48 PM
Yes, you can use a png file for a rollover, just the same as you use a jpg or gif.

enigma77
04-12-2010, 03:56 PM
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
04-12-2010, 04:57 PM
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.

Rob_Che
04-25-2010, 01:35 PM
Use .css for this - much easier. Either with two images or with background position.

Using two images...
.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 . . .

.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;
}

gentleone
04-25-2010, 01:57 PM
background position . . .

.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 :)

.mybutton a:hover {
background-position: 0 -22px;

Rob_Che
04-25-2010, 02:09 PM
Indeed... I was just rattling it off the top of my head...

You know what I meant ;)

gentleone
04-25-2010, 02:14 PM
I thought already that it could be also a quick copy/paste 'mistake' of you ;)

enigma77
04-25-2010, 03:43 PM
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

gentleone
04-25-2010, 04:18 PM
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.

Rob_Che
04-25-2010, 05:00 PM
I thought already that it could be also a quick copy/paste 'mistake' of you ;)

haha... you got me :D

enigma77
04-25-2010, 08:22 PM
Ok, so which parameters in the code you wrote should I change to actually get things to work in my case:
I have two images for a rollover button: orange_novogradnje_f2.png
orange_novogradnje.png
they are stored under folder images.
What would the code look exactly? I guess my button, url, and image1 should be changed.
Sorry for stupid questions but I`m learning.

Rob_Che
04-25-2010, 08:50 PM
A wise man once said "There is no such thing as a stupid question... unless you already know the answer ;)"

It's difficult to say exactly what code you need - do you have the files somewhere online? If you have I can assist better... I could do with seeing the file structure etc.

Cheers
Rob

Rob_Che
04-25-2010, 08:55 PM
PS: I came to this site with NO css knowledge at all and I made it through, you'll be OK here ;)

enigma77
04-25-2010, 10:15 PM
I hope it`s not too much of a mess. Internetna stran is a root folder, there are images and notes as subfolders.

internetna stran
FILE D:\My documents\Hamo internetna stran\Internetna stran\adaptacijska.dela.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\animated.htm htm
FILE D:\My documents\Hamo internetna stran\Internetna stran\csstest.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\fasaderstvo.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\footer.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\header.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\header2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\header2bottom.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\index.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\kontakt.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\krovstvo.kleparstvo.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\novogradnje.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\orange-sidebar.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\prevozi.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\sitemap.xml xml
FILE D:\My documents\Hamo internetna stran\Internetna stran\strojni.izkopi.html html
FILE D:\My documents\Hamo internetna stran\Internetna stran\Thumbs.db db
FILE D:\My documents\Hamo internetna stran\Internetna stran\urejanje.okolice.html html
notes
FILE D:\My documents\Hamo internetna stran\Internetna stran\_notes\dwsync.xml xml
FILE D:\My documents\Hamo internetna stran\Internetna stran\_notes\orange-sidebar.png.mno mno
images
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\adaptacija1.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\adaptacija2.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\adaptacija3.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\adaptacija4.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r1_c1.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r1_c1_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r1_c1_f3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c1.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c1_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c1_f3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c2_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c2_f3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c3_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c3_f3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c4.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c4_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c4_f3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c5.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c5_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r2_c5_f3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r3_c4.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r3_c4_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r3_c4_f3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r4_c2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r4_c2_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\animated_r4_c2_f3.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\Background.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\bottom.header.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\krovstvo1.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\krovstvo2.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\krovstvo3.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\novogradnja1.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\novogradnja2.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\novogradnja3.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\novogradnja4.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_07.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_adaptacijska_dela.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_adaptacijska_dela_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_fasaderstvo.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_fasaderstvo_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_krovstvo.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_krovstvo_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_novogradnje.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_novogradnje_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_prevozi.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_prevozi_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_strojni_izkopi.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_strojni_izkopi_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_urejanje_okolice.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\orange_urejanje_okolice_f2.png png
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\prevozi1.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\prevozi2.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\prevozi3.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\spacer.gif gif
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\strojni.izkop1.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\strojni.izkop2.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\strojni.izkop3.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\Thumbs.db db
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\urejanje.dvorisc1.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\urejanje.dvorisc2.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\urejanje.dvorisc3.jpg jpg
FILE D:\My documents\Hamo internetna stran\Internetna stran\images\urejanje.dvorisc4.jpg jpg

enigma77
04-25-2010, 10:18 PM
ignore the double file extensions (png, jpg, html)

Rob_Che
04-25-2010, 10:52 PM
To use css in this way you need to be able to edit the css directly (ie; not through Dreamweaver's 'wizard') - are you editing your css by hand?

If you are, then this is a test to try (it's difficult for me not having the files online...)

In the page, put this:
<a class="mybutton" href="http://www.google.com">Button text</a>

In the .css file, put this:

a.mybutton {
height: 40px ; /* Add your image height here */
width: 160px ; /* Add your image height / width here */
display: block; /* Allows the 'a' to be sized etc and act as a block element */
background: transparent url(/images/orange_novogradnje.png) top left no-repeat;
}
a:hover.mybutton {
background-image: url(/images/orange_novogradnje_f2.png);
}


This should show you it working - if it doesn't check the file paths are correct, you may not need the '/' before 'images'...

Let us know how you get on.

enigma77
04-25-2010, 11:11 PM
ok, thanks I˙ll try.
I actually don`t have an external css file as my css code is on a page itself
<a class="mybutton" href="http://www.google.com">Button text</a>
instead of www.google.com i should put my domain name there?

Rob_Che
04-25-2010, 11:16 PM
...google.com[/URL] i should put my domain name there?

Yes, URL, either local ie: "/aboutme.html" or external "http://www.mysite.com"

ok, thanks I˙ll try.
I actually don`t have an external css file as my css code is on a page itself


That's cool, but you are editing it by hand?

enigma77
04-25-2010, 11:25 PM
Sometimes (rarely) I edit the code by hand, but usually I just do it with the properties bar in DW.