Doc

Hi all,

First, I wanted to say that I've been browsing this board for a few days since I discovered it and I am very much impressed with not only the quality of the work you guys do but in the friendly manner which you help others...new to photoshop or not.

As for myself, I am a novice at photoshop and there is so much to it...I've barely scratched the surface.

I have an idea I'm trying to impliment but am not even sure where to begin. I have an image of a juke box on one of my web pages where you can click on any of the buttons to start the appropriate song. What I'd like to do is a rollover effect where the window that the song 'label' is in 'lights up' when the mouse is over the button. I'll attach a small version of the juke box below and a link to my web page so you can see what I'm talking about.

Any help on the best way to get started would very much be appreciated. I know I've probably gotten way over my head on this idea, but I'd sure like to give it a try.

Here's the web link: http://www.glewis.net/jukebox.htm

Thanks,

Doc

namvet

welcome Doc, ... getting outside of the square is what's it's all about, for me anyway, ... have heaps of ideas but can't impliment them 'cos they are very high up on the the learning curve I'm climbing ... but it's fun getting there can't help you with your quest but there are heaps here who can/will

btw .. question ... a starlite? ... if the question confuses don't worry

wbiss

Welcome Doc to the forum!

It's a great idea that you have and one that you're sure to find help with here. Unfortunately, not from me... Not to worry as there are web experts amongst this fine group who will reply to you soon.

Welcome to the board Doc [righton]

I don't think that I'm going to be a lot of help.
I do know how to do it in Dreamweaver (using behaviours), but I rather leave this one for the experienced web designers among us.

Trust me, give it time; they will show up

Doc

Wow...thanks for the quick welcome. Whether your able to help or not, it's nice to be greeted so soon.

Here's what I think I need to do to start:
I believe I would have to make a seperate layer for each label window and to be sure each layer maintains the correct location so they can be superimposed later...but, do I need a seperate layer for each state (off & on)?

If that's one way of starting off...then what?


namvet,

starlite? You got me there. I know of a couple of meanings of 'starlite'...just not sure which you were referring to.
(btw...U.S. Navy 1963-1967 / USS Oriskany CVA-34)

Gausian,

I use Front Page 2000 which uses 'hoover buttons' but I don't think it will handle what I have in mind.

Doc

If you've gone to my juke box page, I hope you liked the music.

SilvrWolf

Doc Welcome to the board.
As far as your request your just asking for a rollover. You have to do several things. First, you already have your STEADY (default) state picture. The Jukebox. Next you need to create the OVER image. This is the image that will appear when the cursor is over. You can also create a third, optional image for the DOWN state. This is the image that shows when you click the mouse.

Once you have the pieces you must put them together. The only way that this will work other than using Flash is to take your ORIGINAL image of the Jukebox and bring it into ImageReady. You will then have to slice the image up appropriately. Each individual area that will be a rollover must be sliced accordingly. Then you can use ImageReady's HTML output. it will create the appropriate table structure for you. Then my next piece of advice would be to go to any Javascript site and do a search for ROLLOVER. this will provide you with the javascript needed to perform the rollovers. It will also show you how to pre-load all your images so there is no delay when you do a rollover. It will also give you the onClick() and onOver() commands which go into the image links. If you can not find this please let me know I'll fire up Dreamweaver and do a cut and paste example for ya.

theKeeper

Hi Doc, welcome aboard. [excited]

SilvrWolf is right... it's just your basic slice job, and the use of altered copies of all the buttons for a simple 'rollOver' effect. However... you can do the whole job using just ImageReady if you like. Your specific image will definately be a fair bit'o work, i'll say that right off.

This is a 'simple' effect to create in theory, but can be a long process to explain. In general, as mentioned, you'd drag Guidelines from your rulers into positions whereby all of the buttons are surrounded by Guidelines -- your basic grid setup. Then within ImageReady under the SLICE menu, you'd choose "Create Slices from Guides". That will automatically slice all of the buttons for you -- but no physical harm is actually done to your source image. They're just 'virtual' slices
You would then need to double-click on these slices (on their blue tabs upper left corner) and name them, plus fill-in a few other attributes for them.
And last... you'd need to assign the altered duplicates of all the buttons to function as the rollOver images.

And that's the basic gist of the method.

Here is a page where you'll find lots of info/tutorials on this:
http://www.graphicssoft.about.com/cs/imagereadytips/

Hope that helps.
And please feel free to aks for help with anything more on this. It can be a confusing effect to do if you're not used to using IR.

sfm

Welcome Doc
looks like you have plenty of help here hope it helps
sfm

Doc

A big [size=18px]THANKS [/size] to all of you for your help. I used imageready and just did one rollover effect to start with...just to see how well it worked. Whew...the load time will be even more awkward when I do all the rest of them.

There are actually two effects for the button. On mouse over, the label 'lights up' and On click, the music starts. That's exactly what I was hoping to achieve.

Here's the link to my results so far:
http://www.glewis.net/jukeboxlabeled1.htm

(The first song, "In the Mood" is the one with the rollover effect)

Doc

SilvrWolf

Looks great Doc. Just optimize your images the best you can to get file size down.