Dreamweaver tutorial - Button Rollovers - Video Tutorial

[jogirob]

Huh? What wait! Where did this page with the missing navigation bar come from? The buttons I add keep popping up on the side of the site because the page is already sliced into cells. How do you magically remove these cells to make room for the mouse over buttons?

[jogirob]

@jogirob GOT IT! Click once on the slice you want to put the button in. Once empty you can add the button without it going all out of whack!

[highwaychurch1]

we cant nuffin in ur video bruv..!!

[darkj3am]

my teacher said he dont want a f8cking css code in html.... this one has grrrrrrrrrrrrr i hate that f8cking iidot teacher..

[daniellepaynex]

THIS IS not coool.

[lTheOnlyLanixl]

Coolio

[joeygart]

That one looks cool, I should test this one now.

[DPx111]

is there any way to attach a audio clip to the rollover button?

[sp4c]

"add more UMPH to your website"

[TheKingpin069]

good job mate

[PerryPictures]

So i have my roll over image, but how do i get it to rezise with the rest of my background as different users will have different background sizes???????????? thanks

[pabisz23]

i like having more umph on my site

[usmscheema]

This Is My 1st Ever Comment On Youtube For Any Video... tutvid... You Rock Man... I Really Learned A Lot From Your Tutorials ... And I'm Agree With huby20... Your Tutorials Are Easy And Have More Details In It... I Don't Have To Watch It Again And Again... You Have The Most Comforting Voice And I Can Understand Every Word... Thank You Very Much For Your Tutorials... I Respect You As I Respect A Teacher...:)

[BitterAspect]

@usmscheema Learn to capitalize your words properly.

[Elissalandon]

i like it <3

thank you so0o much ...

[sadass89]

for someone who'se learning web design on youtube, its so easy to do it with someone like you explaining it!

Thank you so much for being so clear about everything.

[cheparo5]

whenever i select the roll over image it pops out in different area in dreamweaver and when i move it it completely changes my layouts.can anyone help?

[bornforbattle12]

Wow...all this time i've been coding rollover effects in CSS. This is such a timesaver. Thank you!!

[afrounkadelic]

Thanks. This has really helped. But there are some moments when you take too long to explain something that has nothing to do with what we want to learn about. In around 6:00 you already took so long to explain how the insert button image when it was clicked before, where it's supposed to drop down. Really? Dude some of it, you're taking it way too seriously.

[JamguorkS]

Great!! Thank you.

[theCIAguy007]

10x 4 the help^^

[WebDevFTW]

Here's my opinion. Dreamweaver is a horrible piece of software. It's overpriced, bloated, promotes WYSIWYG developing, and is just uncomfortable. It produces crappy looking websites, makes your pages run horrifically slow, and sets bad habits for users. You cannot make complicated webapps with Dreamweaver. Ditch the expensive junk and just use a text-editor like Coda or Textmate to really help your development.

[danesters]

I am literally doing it EXACTLY as you are but its not working....If anyone has any ideas of what could be happening I would appreciate it.

[Kankerzwijn]

@danesters You are not doing EXACTLY what he´s doing, or else it´d be working!

[Freddacigarmaster]

Best tutorials on youtube.

[magkas16]

hi, great video, helped a LOT actually, but here's a question.

When you slice in photoshop is there any way you can slice in a different shape than rectangle? i mean like a circle or something?

thanks in advance

[SilentTrama]

@magkas16 There is no way to split a pixel in half it is either all there or all not. Simply that one single pixel is the smallest single point than can be rendered at any one time so it will render all of it or none of it. However using PS or other software the image can be painted or layered to appear as if it was on an angle and appear in your table the same way

[magkas16]

@SilentTrama thnx. Right now im making the layouts in photoshop, slicing and also creating image hotspots and working with them and adding behaviours like "swap image".

Thanks a lot for your time anyway :)

[oceanhawk9]

and for the LOVE OF GOD please do a tutorial on how to make a photoshop searchbar functional in dreamweaver. I cant find any info anywhere. And i know its possible because i see other websites that have really nice looking searchbar. i know how to make one in photoshop i just need to know how to make it work in dreamweaver.

[oceanhawk9]

about 85% of everything i know i owe to this guy. Thanks alot man. keep the vid's comming PLEASE!!!!!!!!!!

[greenluigi123]

this has just solved me hell of a lot of effort and stress thanks.. i'm bit of a noob at this and i'm doing it for college. i already made a button that changes with the up and down states and the coding was all fine but when added the .swf file into d/weaver the box showed a f as well as nothing when f12 was pressed

[jtled15]

great tutorial. i ran into an issue when i made the welcome button (the first one) it worked but the contact us button (the second one) wouldnt go into place and i couldnt move it. how can i fix this?

[TampaCary]

Great Tutorial. I've learned a lot here today....

Thanks...

[umanoodle]

Agreed with below! Your voice is lovely :)

[cecoboy88]

super mega great tutori thx man 

[Yogaper]

Great tutorial! Many thanks

[Naresh7080]

Nice one.

[gwenisUPSIDEdown]

I am usually pretty savvy when it comes to Dreamweaver, but whenever I am stuck, tutvid is just where I go, you always get right to the point(:

Very helpful! Cheers!

[legendabc123]

thanks very helpful as always

cheers man

[zenonithus]

how do you go about editing the rollover button options?

[memento18poker]

hey thanks for the useful video

[kyu64]

de la merde

[GabStone70]

@kyu64 surtout si tu ne comprends rien en anglais! get a life kid ...

[kyu64]

@GabStone70 merci du conseil!!!

[manimastermind]

I followed all the steps mentioned in the video...the rollover works "but" when the page loads, Activex control blocks my rollover image and I have to click unblock all the time to see the rollover effect. How can I stop that form happening? anyone? please let me know

[Gusb135]

i do all the stuff u do but it didn't work it just stays with the original image

[naruto0726]

I have the same problem, I'll save it and preview but it does not rollover to the "rollover" image...my teacher said it has something to do with it's placement among my folders or the file type.

[AcidFalco]

cant find the common button anywhere on cs4

[TheEpicIce]

Go To Insert than Form than Button :)!

[welshdragon2008]

does anybody know how to make a 'hit state'?

so there is button, rollover button, then .. hit state.

Anybody know ?

[SnowBunny2022]

how can i get the rollover image to show in my browser after this all i see is an X and my alternate.???

[PTKpaul86]

hey , nice work for the tutorials , reaally helpfull but one question , could you indicate wich one of your tutorials are for dreamweaver CS4 ? and wich are not ? cuz I've been watching some of them and I can't really seem to find the options you use in your tutorial on my CS4 adobe dreamweaver .for example the flash button maker in "flash buttons how to"

[TheGreenDuck3000]

how wud u make it roll over so the 2nd image is in a different place......say i got 2 tabs.... i click on one and a picture shows

[childofthenazarene]

Between you and jimmyrcom you guys got some of the best tutorials on youtube. Keep 'em rollin'! Thanks! I'm getting better!

[dhunragh]

cant v use this thing with sound i mean if our mouse goes on to the rollover button which v have made with css then it should sound like khatak or something like that man

plz reply me asap coz i gooota work on my site

[yoto5951]

wow 2006

[radio709]

You are the best...good voice dude!

[MaryMathews]

it's well done except it's a bit blurry so can't follow it so well is my only complaint....

[DevenMin]

That's why you watch in HQ

[taviadennis]

thx

[notalchemy]

On minute 2:07, you say "im gonna open this html file here, and you can see the menu bar is missing". What file did you open (as opposed to index.html) and how did you make it not have the menu bar, why? etc... Thanks!

[chwebwizard]

would be nice if we could hear it....

[staticwebsites]

best design websites gallery, resources and tutorials for Photoshop, Illustrator, html, CSS, etc..

staticwebsites. net

[altu892]

...how about down

[thegenderbender109]

gd job m8, nice vid and very helpful :D

[MyStrangeCom]

Good job man!

.

[djrobbie96]

Such an annoying voice

[Chobley]

thanks, great tutorial -- you are a great help in me venturing into to website design.

[dwagothegod]

this works for me but sometimes it´s 12 seconds try realoding (spelling? tired...) the page

[Infopeeper]

is there a reason why this video is only 12 secconds log? is it me? glitch?

the 166 stars suggest that there was a full vid here at some point.

[andreySC7]

same to me :| .. only 12

[Infopeeper]

ah dude, i did not see the description. there is a link.

[andreySC7]

me too :D .. thx :D

[Felixje0]

Its called "Mouse-over"

[jettrooper00]

Ga je nu ook al websites maken :P

[Felixje0]

Ik ben bezig met een project waarvan nog weinig mensen weten. :p

[ResidenceOfEvil]

It can be reffered to as several things, dumbass.

[AunShovah]

camstudio

[huby40]

forgive me for being awkward, but compared to other tutorials, you have an awfully comforting voice...

[alanbstard4]

@huby40 like Bob Newhart ( grin )

[qqqTOXICqqq]

@huby40 Someone is awkwardly GAY!

[l3wis1337]

@huby40 lol

[1stPlaceDirector]

Many of us have a pre-made template in PSD format but need to turn the navigation bar into a rollover bar. Problem is, we need to see the steps where you cut out the menu part of the graphic and take it to Image Ready to create the 'down' states and then get the whole thing back to the web page again. I"m guessing that utilizes slices and you make the menu a slice and then add it back in after the rollovers are created? I'd like you to cover that, please.

[bond467]

laggy to you LOL

[redfoxarts]

why in the hell that whenever I try to edit my photoshop based html (weblayout) in fireworks the my graphics gotten worst!!! wtf!

[54spiritedwill54]

Nice tutorial :)

[misfits105]

hello, great tutorial.

But; if i didnt put a link to the rollover and i want to put it later, how do i do that?? i mean where can i edit that roll over i just did?? PLEASE HELP ME! THANX! BYE!

[mickychard]

can anybody please please help me... im totlayy new to dreamweaver and when i click ok on the rollover image dialog box it totally distorts my image in dreamweaver and creates gaps in the design!! any idea why this is hapeening??

[kingkeeg]

Can you please go over how you compose that navigation bar type slice area in photoshop (I see it has a black background when you edit in DW)?

I'm trying to do a navigation bar in DW now and it keeps messing up the composition of the slices in total so it looks like a disjointed puzzle and I do not know what to do. You have great tutorials...I hope you can help me.

[kingkeeg]

Ah...I got it and what you said in the tutorial makes sense now that I watched it over.

Thanks for the vid.

[Hebbow]

you have a very good way of teaching, tnx for sharing!

[mastgp]

Thank you keep doing good videos. gud luck

[Chainsawmethod]

thank you so much. that's been bugging me for a while now.

[MeAgainstThe3rdWorld]

you sound like don lapre ;-)

[guaranex27]

Thanks alot, I always learn from your tutorials. I have a question, is there a way to add sound to a button?

the other is, what is the difference from what you did from a navigation bar?

thanks,

[LeslieRevolutionary]

Thanks a million!

[guitarsrule93]

hey i made a rollover button and wen i open it in internet explorer up the top says "internet explorer has restricted from running script or wateva" and everytime i go on the page it says it everytime even tho i allow it. plz help awsome tut btw :D

[stenionet]

This is a problem with Internet Explorer 6.

You could try using CSS and forgetting Java Script or Use Java Script and forget IE 6.

This problem just occurs when the page is loaded from your computer and when it is load from Web does not occur.

[guitarsrule93]

thnxx

[amerikanmafia]

does image ready give u the option of using an animated .gif

for the over state or would you just have to use adobe flash to animate it? probably a dumb question huh? thanx guys.

and does n e one know how to fix a crash report in PS cs3 extended (mac) reinstall doesn't work..

[getoffmeyaspa]

download and run the adobe cs3clean script. google it and get it off the adobe website. i had the same problem as you i think

[iFinza]

You can make a animated gif in both imageready, photoshop and flash just use the animation dropdown in PS 3

[9999786]

Can some1 just tell me that how do you put your own made banners from fireworks mx to dreamweaver? email me -> 9999786

[thefootballhero]

make you banner a jpeg or png or a compatible file type..then on dreamweaver press ctrl + alt + I and insert the image within a div tag or ap div tag...

[BlackWhiteZebra]

You are one awesome bloke...thanks a bunch!

[JoshizzleMoore]

awsome

[linuxilove]

the up image is the way the image will appear when it is left alone

the over image is the image that shows when the user puts the curser over it

the down image is the image that appears when the user clicks it

[michaelayau]

thanks for the tutorial

[xfree92]

can u tell me wat the difrent between

up image

over image

down image

pls..i need to know...i got an exam ehic using thie application

[TannerMonroe]

what a dumb ass question... I hope you failed your test!

[AkinaGod]

Does this guy have a website that is in the form of a series? LIke Tutorial 1, Tutorial 2, etc.

[happywhenhigh]

thank you so much i do all my school work on this programe that you

[Maltebyte]

Youtube nees a rollover :P

[gj777plus]

tut strikes again! legend

[zaromonia]

Your website helped me too much thanks man

[frostvideo]

"...more *umpf* to you site."

Haha :P

Nice tutorial :)

[leninas3000]

;) fnxs

[curmeow]

clear instruction but its too small!

[lynx0331]

Thanks a bunch! This helped me out too. ^_^

[rrneves]

HAHAHAHA

[iiiEUAiii]

thank you man

[mzungu74]

Thanks, a great help and well explained.

[luvmuziq]

hey man, thanks for the vids. i've been fighting with this sofware for a few days now, i can't quiet get it. i'm trying to build a simple page with nav on the left and on top and advertisement on the right but i can't seem to get the tables to go where i need them.

[DonArcadio]

It helped me alot , but you just talk alot!

But thanks :)

[xk32x]

thax plz make more

[scose]

Outstanding-- clear, low-key, extremely helpful. It's like having a smart friend handy to guide you.

Please do more Dreamweaver tutorials! I need you!

[Xtr3meKO]

Yes, very good website, I have found it very useful.

[magicman3000]

keep up the good work!

nice website by the way, i like the menu

[mickeynotmouse]

wow. cool.

u do flash?

[abz121]

yeah i do flash. what do you need help with?

[mickeynotmouse]

Uhh, yeah, can I borrow 50 bucks? I need help with getting th damn thing.