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

Works fine with IE here in my end.

Edit: Actually it doesn't work anymore, hmm what happened, I tested it with IE a while ago, gotta do some investigation next.

I agree with that.

This post has been edited by Spewed on Jun 4 2006, 12:48 PM

to be sure, I turned off my ad blocker and cleared the cache. and it's still just a plain image, no mouse over stuff, and no dynamic images. I'm using IE 6.0 (actually I always use Crazy Browser, but I tested in IE also)

Yeah mine is 7 beta 2, can you see this url removed by Spewed ? It's working here somehow (abit flashing while mouse over) but that main menu isn't.

Nope. it's just a plain image.

Damn it!

Damn CSS non-standards.

Is the hover effect the problem?

http://www.frankmanno.com/ideas/css-imagemap/

well, it *was* looking promising.

I won't give up this easy!

Take a new look in url removed by Spewed did a little update to the code.

That works ok with my IE7, acracadabra!

Hmm... or not, it shows only the image first but when I right click and View Source, it starts working, what the...

sh*t, I'm so full of this atm, more tomorrow.

One option would be to keep that latest version which works ok with FF and mention on the tutorial page like "Supports Firefox only". Most of the crowd uses FF anyway nowadays. Better than nothing.

You could post the original multi-line source for me, I could take a look into it if I can succeed adding a working cross-browser compatible map there.

Or maybe not, there must be something better.

It seems to be, on that latest version I uploaded I've used li:hover and IE doesn't understand it. I made some more research and it seems to be also that only way to show that kind of "hotspot" rectangle mouse over effect in a image map and get it to show up with IE is to use images and it definitely wouldn't be wise in this case as it came out earlier.

This is the code that's currently being used. Since the tutorials section messes up the code, we lose the dynamic text input box. But if you run the code outside the tutorials, then it works.

and according to the site stats, Firefox is NOT the majority. It only has 33%, while IE has 46%. So we definitely need a multi-browser solution.
http://www.webstat.se/?id=11296&cat=5

Attached File ( Number of downloads: 338 )
 Tutorial_ImageMap.htm

Okay, I'm working on it.

Edit: Checked the source, that is looking very potential too, although without the mouse over hotspots. I you remove the line breaks and modify the code into an one single line before uploading/adding to the server I believe your mouse over descriptions will work too.

Multiple mouse overs for a same mouse over area (those rectangle hotspots in this case) are very very tricky unless impossible to accomplish so because there are those MyDynamicImage.src mouse overs already, I can't think a way how to add the hotspot mouse over within. It could be done using table and changing the bg image on mouse over but I find it impossible to add a table in the map areas.

So, we're almost at dead end here, I research a little more, if I can figure out a reasonable solution, if not there's no other way than try to add your whole code for a single line and use it without the hotspots.

P.S. I managed to do a multi-browser supporting meter menu indicator with table <td> background tricks when mouse over, the code is horrible but at least it works but that's all my success so far.

Ok, sorry but I'm out of ideas man, not a chance to make it cross-browser compatible with that CSS stuff, FF goes, IE won't, upgrade your browsers folks.

One alternative cross-browser compatible solution would be to add the descriptions to the meter image itself and it would look something like this (Add Text meter demonstrates what I mean), not bad imo and the best part is it works fine with IE too.

Would be a noteworthy alternative.

Thanks for trying. Maybe we'll figure something out eventually.

You're welcome.

It was about a time for me to play with CSS again, it's been a while of the last time, so this was a good exercise.