Preserved Topic: Java HELP !!!!!!!!!!!!!!!!!! (Page 1 of 1)

Ok.....so I am a moron.....Java confuses me to tears. I made an Interface and I want to add mouseover effects to the buttons. I know how to do the mouseovers.....but......How do I get the damn things to line up ?????? My interface is in .psd form at the moment and I plan on copying the seperate buttons for the mouseover effects. Then I will change the .psd to .gif

Is it posible that someone has the answer to this problem ???????

Do you mean line up your gifs once you get them onto your HTML page? You can just use tables to do that. It's easier to answer your questions if you have an HTML page we can look at to understand your problem better.

ok.
i think its about time you take a step back, brew.
bugs is right, but hoepfully, i can clear a few littel extra things up.
1) its JavaScript, not Java. there IS a BIG difference. doesnt really worry me, but it can ensure accuracy of communication.
2) here is my (and i think a few other people's) method for making an interface:
2.1 - make it all in .psd form. good start.
2.2 - (can be switched around with 2.3) add extra layers to the buttons on the interface with mouseover effects
2.3 - chop it up into the separate image components.
2.4 - save each image as gif (file->save for web)
2.5 - insert each of these components into their respective location in a table.
2.6- THEN, start worrying about putting mouseovers in.
3) bugs is right - we have no idea exactly how you are trying to "get the damn things to line up", so we cant tell you what you're doing wrong. post a web address.
GOOD LUCK!

It *is* possible that someoone has the answer. The "lining up" you speak of could be interpreted as:
"How do I make sure that my rollovers are exactly *on top* of each other when the mouseover takes effect?" or,
"How do I get the graphics of my interface to come together and *line up* once I've chopped them all up?"

Not sure what you're after but either one is going to be doable.
http://www.gurusnetwork.com/tutorials/photoshop/irslicing1.html
may help you out if you're using version 5.5 or 6 and there's another coming very soon regarding rollover effects.

Ok......here is the page
http://www.goecities.com/gatesbrew/index2.html

top image is the interface as a gif. The psd file would not upload.

[This message has been edited by gatesbrew (edited 20-12-2000).]

Well hell....I do not have PS 5.5 yet so I do not have IR. NUTS !!!!!!!!!! Any other way to slice this thing up and make it work ?????

Thanks for the help all...........

I will get better at this.

You can use your guides and chop them up with those, snapping selections to the guides that you lay out.

I assume from the pics there that you're working with a layered document and the mouseover images are *directly* over the normal images in the layers pallette? If this is the case you can use the guides to lay out where you wanna cut and get to choppin and saving.

What version are you using by the way?

Heck yeah you'll get better! Almost nobody gets worse!

Currently using PS5.

I assume the layout of the images is done with tables within tables....is this correct ????

nope, just 1 table. Is that what you're trying to do, make the table? I'm still not sure what you're after here...

Just one question whilst I've been reading this. When I put my cut up images back together, I don't bother putting them in separate cells of a table. I just put all the images next to each other. It seems to work okay but am I going to get into problems not keeping each image in a separate cell??

It shouln't Trixter, as long as you don't have you table widths coded in percents. If you do, and the user resizes their browser, the table will get larger, and your images will spread apart.

I think that i can handle this one.
This is a good image to start with, it is fairly simple.
Follow the steps and see if it gets you where you want to go.
1)Open .psd file.
2) Use Guides (View->Show Guides) to divide image into 5 equal parts (cooresponding to 5 buttons)
Note: It may help to draw 1 pixel lines on a separate layer, showing 5 sections
3)Duplicate image (Image->Duplicate) 5 times
4)In Image Copy 1 Select region 1 (that you created in step2) and Crop
5)In Image Copy 2 Select region 2 and Crop
6)Repeat for all sections
7)Duplicate each of these new cropped images (should now be 2 images for each button=10 total)
8)Change one of each pair of images to look like mouseOver image (add/change color, whatever)
9)Save each of these 10 images as .gif or .jpg as appropriate
10)Build HTML Table---cols=5
<TABLE cellspacing=0 cellpadding=0 border=0 cols=5>
<TR>
<TD>image 1 original</TD>
<TD>image 2 original</TD>
repeat for all 5 origiginal images
</TR>
</TABLE>
11)Now, Javascript time. Follow Doc's tut. on writing mouseOver functions--found...here http://www.handson.nu/CODING/javascript.shtml
basically you are saying that normally the contents of each of your cells = original image, BUT when the mouse is over that image, the contents of that cell change to Changed image.

That's it.
I know that there are easier, more efficient, more effective ways of doing this, but this is how I started and built from there. I think that you should give this a try, see how it works. Once you understand the basics of this you can proceed to "fine tune" the process as it fits you.
Hope that helps.

FINALLY !!!!!!!!!!!!!!!!!!!!!!!!!!

Took acouple of hours but I got it to work. Still got some tweaking to do but I am getting there. Still have NEOFROGS images as part of it too....but they will be released soon.

THANKS to all who took the time to smack me in the right direction.

hehehehe.....forgot to add the URL so U can see what I ended up with..........

http://www.geocities.com/gatesbrew/index2.html

[This message has been edited by gatesbrew (edited 20-12-2000).]

hey gatesbrew - well, its coming together, now, make it cross browser compatible.
i think its just a matter of IE fixing up little errors that NS wont.
my advice to you on this matter: CLOSE YOUR TAGS! its as simple as that i think!
go to gurusnetwork.com, and you may find a very helpful tables tutorial. this one is one of htose ones you should do from beginning to end.
and one of the things that i think they may say at the beginning, and something i have been doing since i started coding (and im very grateful i dot into this habit) is when you type <table>, just press enter once or twice, and type</table>
well, actually, i FULLY open a table :
<table><tr><td>
then fully shut it:
</td></tr></table>
then start filling it out.
oh well, keep it up, and im sure youll be pleased with the results.

trixter: there shouldnt be many problems with cramming it into the one cell, heck you've seen how many people we can fit into the one cell here at the asylum, with over 700 members!
but it can be a little easier to keep a tighter handle on your images if they are in different cells. this is essential when you work with buttons along a curve, or such, you know, items that arent in the one plane.
and one other issue is that unless you put 'nowrap' in your <td> tag, when a user resizes the browser, there is a chance that your buttons will become spread across two lines.
another reason to use separate cells is if you want to space things out. http://reitsma.tripod.com/scrnshot.gif is an example of this, where those green buttons space themselves out evenly across their allocated space.
well, that's about it from me!

Congrats there gatesbrew, the rollovers are rolling, they're dirty as a mutha, but they're rollin. You've got some coding snafus tho, you forgot to close the TR and TABLE and you need to define the IMG height and width attributes. Your table has exploded a bit in NS.

But you're rollin, and that's a hella good start.

<edit> Doh! Buncha beat me here! Something I meant to put in here as well is when you're splicing together an image with tables it's good (so *they* say) to keep the cell coded all in one line with no hard returns in there. I've heard that putting a return in there can cause some unwanted spaces, never happened to me personally but I reckon it would be a good habit to get into when you're just starting eh?</edit>



[This message has been edited by JKMabry (edited 20-12-2000).]

Keep it all in one line, cause it just caused spaces in one of my pages. I just started hand coding my HTML and was trying to be neat and tidy by putting my </td> tags on their own line so they were easier to spot. Doing so left a space around all the images in my nav bar.