Seeking Answers to Web Design Issues

[Myz]

Hey my lovely peoples whom I moderate.

I am making a website. It will be an online portfolio for both my photography and writing.

Over the past few days, I have been reading through Flash manuals, guides and tutorials, thinking that the answer to my web development issues lies within my understanding of Flash. The thing is, though, that I am now fairly confident that I do not need to use Flash nearly as much as I previously planned.

I already have a decent amount of HTML knowledge, though it is HUGELY out of practice, and so now we get to the reason I am posting this. I have questions that need answers! Mainly, I just want to know what program would most easily accomplish my desires.

Meet Object A, a rough example of the main page for my photography section:



See the balls? In my mind, each of the balls are going to be clickable, and lead the user to a separate page containing galleries of photography (that I will create in Flash). A simple onmouseover code, right? Well, I want for the balls to take on a different color, mainly the color that they had before the grayscale was placed on them, once the cursor glides over them. Further, I want them to also display a message that tells where they are going to be led. In other words, a person scrolls over them, the color shifts, and a popup menu above the cursor displays where they are headed.

Would this be more easily accomplished via HTML or Flash? It seems simple with either (if I knew where to begin), but what would give me a better result?

I believe I had more questions, though I lost focus. Any help would be beautiful indeed.

Thanks.

---

Edit: After doing some processing, I have reached the conclusion that Flash will probably be my best bet for a fluid, nice-looking website that I am aiming for. I believe that all I must focus upon is the creation of buttons, which, at the moment, I know nothing about in Flash. So, in order to meet my wants, are there any Flash-ubers amongst you all that can offer me some points on button construction with Flash? Or otherwise any other lovely bits of help and information?

[AphonicChaos]

Actually, for what you described, I think flash would be overkill. Both in production, and in execution. if you just use CSS you can accomplish your goals in less time, and without causing as much stress on your visitor's computers. Plus, what if they're on a computer that doesn't allow for flash (ie like the government computer I am on). All current browsers and computers support CSS, unless the user disables them (like you can on Opera) for some reason.

[Koji]

I prefer to use flash for stuff like that. Although i'm not much of a web designer i did have to create an interactive floorplan viewer for some museum once and it was basically a webpage but not on the web.

I used flash for rollovers as you described and you could easily do a small tween animation on rollover after that to bring up you menu/page title/whatever you wish.

Fairly simple to do but as always with flash...it will go wrong somewhere.

I see where the above poster is coming from with some PC's not supporting flash player so it's really up to you. I find flash alot better for any animation or tweens personally.

[Shade]

Noooooooo. What do you need flash for?

Use image mapping for the image, that'll allow you to select certain areas which are clickable within a single picture.

Then you can use CSS to have some good text effects, as well as roll over images and a nice layout

[Mark]

Dude, you could go really oldschool and use an old javascript mouseover image change script. That would be a little unwieldy, though.

Personally, I get lost in Flash. I've tried doing stuff with it a couple times, but I've given up. It's not worth it to me when Photoshop and Notepad can make whatever I need.

Oh, and instead of having the user's intended destination show up in a floating text box when they mouse over the ballz, try putting it in the balls' shadows. That would be cool.

[Cynthe]

I took a course in basic flash and things that seem complicated aren't really once you go at it step by step. I'd suggest a hybrid site for your needs, a flash header with nifty buttons, or just the header image in flash with the menu in html/css or vice versa.. Have your writing in simple html/css and then drop in a nice flash gallery.
I'm still a stronger supporter of pure CSS aided with some javascript when the need arises. But flash sure is sleek and small considering the information you can stick in there..

For software I have Macromedia Flash and Fireworks which are the best, but costly. There are a lot of freeware programs you could use too if you wanted a flash gallery for your images for example, I used simpleviewer for years but I'm changing to this now: Lightbox 2.0. It's not flash but it is small and snappy. ^^

I'm still not sure about how I feel about entire sites made in flash -.- Some people swear it's the next big thing. But I doubt it, flash is great for certain elements in your page but CSS > all methinks

[Chu]

I have to agree with what some other people have said, flash would be overkill. You can accomplish the same effect by splicing the image and setting an onmouseover code in css.

[Myz]

Thanks for the info and such.

I believe I am going to pass on using Flash for this specific page, and attempt the image mapping & CSS idea.

Any tutorials for what I am about to attempt?

I have an image mapper (CoffeeCup), it is only the CSS department that I am lacking.

Would I be able to have an onmouseover code that causes the image to shift the chosen section into a different image? In my case, the non-grayscale version of the ball.

[Shade]

Originally Posted by Myz

I believe I am going to pass on using Flash for this specific page, and attempt the image mapping & CSS idea.

I win again!

[Mark]

Originally Posted by Myz

Thanks for the info and such.

I believe I am going to pass on using Flash for this specific page, and attempt the image mapping & CSS idea.

Any tutorials for what I am about to attempt?

I have an image mapper (CoffeeCup), it is only the CSS department that I am lacking.

Would I be able to have an onmouseover code that causes the image to shift the chosen section into a different image? In my case, the non-grayscale version of the ball.

Uh, yeah, that's what mouseover is normally used for...you just have to make a color version of the said area.

[AphonicChaos]

HTML GOODIES was a great book way back when, and I liked it's website even better. This should get you rolling with image maps and most anything else.

EDIT:
I was thinking, and if memory serves me correctly (I'm not on a computer where I'm authorized to publish/produce content) you could accomplish the intire task without using an image map. All you'd have to do is use transparent images to serve as clickable areas, and use an a:hover attribute to have the balls switch to their colored counterparts, show appropriate text, etc.

This will save you time in calculating coordinates, and the lines of code are much shorter. Plus, again, if I remember correctly, the conventional method of image mapping involves javascript, which most browsers nowadays have disabled for security reason. (sucks for us gmail users).

[Koji]

I voted flash because i can use it better than HTML and CSS. I guess CSS is more friendly for everyone though.

[Myz]

Website is underway nicely, though, I have encountered an odd problem.

Every time I enter a hotspot or the coordinates of a selection on an image map, using Dreamweaver, it causes a line break, thus sending anything following the image with the map/hotspot down as if I entered a break. What is going on?

It only seems to occur when I view the page in Firefox, yet works absolutely fine with IE. Does Firefox have some strange.. ness... about it that causes anything following an image map to be sent down one line? Or is there a flaw in the coding?

For code reference, I'll show the before and after:

Before creating the map:

<img src="../Graphics/chriscohrscenterlogoplaceholderv2sliced copy.jpg" width="150" height="396" />

After adding the map coords:

<img src="../Graphics/chriscohrscenterlogoplaceholderv2sliced copy.jpg" width="150" height="396" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="26,248,59,289" href="#" /></map>

[AphonicChaos]

Originally Posted by Myz

Website is underway nicely, though, I have encountered an odd problem.

Every time I enter a hotspot or the coordinates of a selection on an image map, using Dreamweaver, it causes a line break, thus sending anything following the image with the map/hotspot down as if I entered a break. What is going on?

It only seems to occur when I view the page in Firefox, yet works absolutely fine with IE. Does Firefox have some strange.. ness... about it that causes anything following an image map to be sent down one line? Or is there a flaw in the coding?

For code reference, I'll show the before and after:

Before creating the map:

<img src="../Graphics/chriscohrscenterlogoplaceholderv2sliced copy.jpg" width="150" height="396" />

After adding the map coords:

<img src="../Graphics/chriscohrscenterlogoplaceholderv2sliced copy.jpg" width="150" height="396" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="26,248,59,289" href="#" /></map>

That isnt' nearly enough info for me to diagnose the problem, but I have a couple ideas:

Try creating the tables by hand, using a plain ol' text editor, instead of a WYSIWYG editor and see if it yields the same results.

Or, try replacing image mapping with one of the forementioned ideas of implementing your idea.

[Myz]

Originally Posted by AphonicChaos

That's what you get for using image map.

Ok, ok, I'll try and be more helpful. If no one gets to it before I do, I'll diagnose the problem after I finish taking this online course.

Side Thought: WYSIWYG editors are great for prototyping, but no serious web developer uses them for the final version of their site. Just my opinion. God bless notepad, gedit, kate, etc.

Thanks? :P This issue has me stumped. I guess it is a Firefox compatibility thing.

As for the WYSIWYG statement: Are you talking about Dreamweaver? Maybe serious web developers don't use it, but I am not a serious web developer, and regardless, I don't see a reason why that matter at all in accordance to my issue. HTML/CSS is HTML/CSS, right?