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

[uziq]

Does anyone have experience with image maps?

I'm trying to make a tutorial with dynamic images that each have their own map. The images change correctly, but the maps don't work.

You can what I've started here:
http://www.samurize.com/modules/sections/i...rticle&artid=11
After the images have loaded, you can mouseover the meters to change the images.

Would be greatful for any help.

[uziq]

Nevermind. I know what wrong. It was missing a captial letter.

[KMDonlon]

What are you up to

[uziq]

hmm.. I'm making progress, but javascript doesn't seem to work in the tutorials section. it works fine on my computer though.

I've at least got some tooltips working for the text meter.
The crappy part will be mapping out all areas for each image.

[KMDonlon]

The mouse overs in the tutorials??

[uziq]

yep. It's not very useful yet. it's more of a help guide, than a tutorial. I'm just trying to compact things a bit, and make it easy to maintain.

[KMDonlon]

Great job and execution man, I admire your efforts

[AdamC]

I would of thought javascript would work in the tutorials. Unless when it saves it, it removes all html tags.

[uziq]

Actually, I think it does work, because that's how the images change as you mouse over. But for some reason, the rest of the scripting doesn't change the text like it should.

[TwoD]

Uzig, the script tag has syntax errors, that's why the Help function won't run. HTML (<br /> in this case) isn't allowed inside script tags.

If you have more JS/DHTML questions, feel free to ask.

[uziq]

That's odd, the server is putting those <br /> in there, because my tutorial code doesn't have it. and I don't know anything about updating the backend stuff to prevent the funky code being inserted.

Thanks for the tip though. I never understood why /> is used in the first place.

[uziq]

Anyone know the the best/easiest way to show a mouseover effect, such as indicating the selected meter with a rectangle in the tutorial? So as you move up and down the list, the indicator moves also. Maybe CSS?

http://www.meyerweb.com/eric/css/edge/popups/demo.html

Also, for the dynamic image on the right side of the tutorial, I'd like to show an effect similar to this:
http://www.webreference.com/programming/im...xamples/ten.htm

Then people could quickly mouseover indicated areas, and quickly see what everything is for.

[Spewed]

Really damn nice idea man! CSS would be the best for that. So do you need help with it? It should be easy to "borrow" that CSS code part from those sites you referred.

[KMDonlon]

Help the man out, I certainly have no experience with this stuff....

[uziq]

We've gotta overcome a major issue first: The tutorials section mangles CSS and script code.

but I do think that it'll need some help to get finished.