Dynamic images/maps, HTML, Javascript, CSS, etc

Let's not care about it.

Well, I can see that you've done that menu start with javascript over there. That seems to work ok here at the moment. So do you wanna add that CSS rectangle stuff over it or are you willing to do the whole tutorial with plain CSS?

to be more precise, multi-line code doesn't work. The dynamic images are ok, because the code is on a single line.

The tutorial section automatically turns ALL line breaks into <br />, which messes things up, as TwoD pointed out.

I don't really care how the tutorial gets done, but it should be lightweight and easy to maintain. I'm a complete newb at CSS, and don't know much about script. So suggestions are welcome.

Alrighty, I'll look into it and wish I can give you a sample tomorrow.

uziq, can you post the "original" source for me? The one where the code is normally on multi-lines. To figure out what's in there in that single line code is quite annoying and frustrating.

I'm not sure is it possible/how easy to add CSS over those mouse over images either, so probably I need to think another layout but we'll see.

Edit: No need for the source anymore.

Okay here, check Add Text sample from
url removed by Spewed, Text and Decimals parts demonstrate the description share.

What do you think?

It's a little rough, but shows potential.

It would be nice to keep everything in one file. I'm not sure how the tutorials section would handle loading a new page for each meter.

Yeah it goes abit rough that way, but it would be the easiest to do like that. Multiple maps + mouse overs goes quite tricky and hard to accomplish.

The new page is loaded into an iframe, I don't see why that wouldn't work. There shouldn't be any problems with that.

The nasty part doing the tutorial that way is that you have to do every mouse over explanation rectangle image manually one by one so it is going to be long and hardworking job to finish the whole tutorial.

Here are the files if you wanna try how it works on the tutorials section and try to integrate it in there:

Attached File ( Number of downloads: 222 )
 MeterTutorialDemo.zip

I definitely don't want to use so many images like that. I was hoping that CSS could move a rectangle (not an image) up and down the "add meter" image, as the mouse moves. and I was hoping something similar could be done with the dynamic images on the right side. hmm..

Yep, know what you mean and that way it would be lightweight too although I don't think using such a small mouse over images would be too heavy either, but the amount of images would be huge in this case.

Hmm, I just don't know how easy it will be using CSS rectangles to do that, I'll have a deeper look.

Btw, the Beatles example was accomplished with images too, not with CSS.

Edit: Oh yeah Figured out how to do that with clean CSS, I'll get back to this tomorrow.

Okay, what do you guess uziq, how long the descriptions of spotted options would be? I wonder could the descriptions be displayed just in alt="" tags without any particular java boxes? There's no problem in IE with that but Firefox shows only 64 characters from an alt tag.

If you look on the news/main page here, I added a bunch of alt= "blah" stuff to many of the images...that is a very easy task to carry out

True Kevin, but my question was, are the descriptions going to be more than 64 chars, 'cause if so, people who use Firefox will not be able to see the whole descriptions.

Dreaded Firefox troubles again...I just got the damn colors thing sorted....

Well anyway, I did the descriptions as a tooltips for now. New sample online in the same address url removed by Spewed

The meter opens still into the iframe through a click. I couldn't figure out yet how to do multiple mouse overs, one to show and highlight the selected meter and rest mouse overs to show the spots in the meter simultaneously and at one page only. But I think it's not so necessary, iframe should work fine and casually.

This version should be pretty close what you requested uziq and at least this one is easy to maintain too.

Let me know what do you think.

Attached File ( Number of downloads: 273 )
 source.zip

Your latest update doesn't work in IE at all. But in FF I see that it's very close to how I imagined.

and I think relying on alt tags isn't a good idea, because they disappear pretty quick, and the descriptions/comments would have to kept short.