Floating text box

[Schmoopy]

Hey there, so I have this site, and I managed to get it to have a floating text box come up when you rollover image maps. Because I have a map of europe on the site, you can see what i mean here : http://www.bombthehills.com/ridingspots-europe.html and it all worked great but since I've centered the site the floating box is going a long way to the right of the mouse. Also getting weird lines of some of the images :S But offline they look fine.

Anyone know how to correct this?

Thanks,

Jack.

[Schmoopy]

Please, anyone?
Is it to do with the javascript, html or what?
Any help is much appreciated,

Jack.

[coothead]

Hi there Jack,

try adding the highlighted lines to this function...


function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
dd.style.marginTop="-28px':
dd.style.marginLeft="-80px':
}

...and the adjust the values to suit your taste. ;)

coothead

[Schmoopy]

Ah sweet, worked a treat,

Thanks a lot :)

[coothead]

No problem, you're very welcome. ;)

[Schmoopy]

Ok, think I spoke too soon. It looks like the map works on my PC, where the resolution is 1440 x 900 but for my brother's PC and others we've tested it on the label flickers under the mouse, and doesn't go along side it.
Do you think this is to do with the resolution or what, try it out on your PC and see if does the same thing,

www.bombthehills.com/ridingspots-europe.html

Hope you can help me with this,

Thanks,

Jack.

[TheJoshMan]

I get the same flickering... the label seems to follow the cursor though. Actually, the label is directly beneath the cursor.

(my resolution is 1280 x 800)

[Schmoopy]

Ok, thanks for that, but do you know why? Since it is positioned on my screen, and in the code it should be to the right of the cursor =/

Thanks,

Jack

[TheJoshMan]

I really don't have a clue to be honest man, sorry. I've never worked with image maps.

[Schmoopy]

Ok, no worries, anyone who does have experience with this sort of thing got any clue as to what's going wrong here?

Thanks,

Jack.

[coothead]

Hi there Jack,

I had to modify your code somewhat to get it to work, ;)

Check out the attachment, which includes the html, css and javascript files.

coothead

[Schmoopy]

First of all... gotta say what a legend! :D Man so friendly and helpful, thanks so much for this. I've yet to test it on other PCs but I'm confident you've done it right :)

Thanks again :),

Jack.

[coothead]

Hi there Jack,

I've yet to test it on other PCs but I'm confident you've done it right.
Well, I'll keep my fingers crossed just in case. ;)

coothead

[Schmoopy]

Yup, tested it now, and all seems to be working good :)

[coothead]

Hi there Jack,

I have noticed a problem in Opera, but I have no idea, yet, of a solution. :eek:

When crossing the border, say from Italy to France for example, Italy will not close when France opens.
Of course, if you go to France via the Mediterranean it works as expected. ;)

Perhaps, making a distinct margin between countries when setting the area element coords would solve it.

Also, I presume that you know that, due to lack of full pseudo class hover support, your menu does not work in IE6. :eek:

coothead

[Schmoopy]

I'll try making a more distinct margin, but tbh, IE6 users should get firefox or upgrade to IE7. I HATE INTERNET EXPLORER! So if it doesn't work in IE6 it gives them more of a reason to get rid of the worst browser ever! :D

[Schmoopy]

Hey again, any update on a fix for opera please? :P

I have tried making a more distinct border but still with no luck, if you would be so kind, I don't really mind if the floating text box thing doesn't follow the mouse, and instead just stays static at the top of the map, if this fixes the bug in opera, but since you wrote the script for it, and I suck at javascript, I'm not really sure which part to edit =/

If you could that would be great, thanks :)

Jack.

[coothead]

Hi there Schmoopy,

as I said the problem is with the mapping. ;)

I have made some modification to the area coords and the problem is solved in Opera.
As you add more countries you will need to take extra care when coding the frontier coords.

Here is the amended map...


<map name="map" id="map">
<area shape="poly" coords="175,229,166,280,174,288,174,299,177,309,186,312,184,325,172,330,180,334,165,341,152,340,146,337,134,333,131,339,112,338,128,328,123,315,119,314,132,308,135,299, 133,289,138,292,136,291,148,296,148,289,151,288,124,279,111,272,145,210" href="ridingspots-uk.html" alt="uk">
<area shape="poly" coords="115,361,146,360,143,350,166,354,178,351,179,340,185,343,199,359,212,370,228,380,224,393,216,396,204,413,209,420,215,428,210,434,217,452,208,461,186,452,174,456, 171,468,125,447,129,444,127,443,136,398,139,408,111,369" href="ridingspots-france.html" alt="france">
<area shape="poly" coords="192,340,198,336,202,339,215,344,216,354,214,361,209,353" href="ridingspots-belgium.html" alt="belgium">
<area shape="poly" coords="233,309,251,306,249,291,259,291,273,300,290,299,299,311,296,324,304,338,301,354,278,362,289,383,283,392,283,401,279,400,258,400,254,402,241,397,229,399,235,378, 222,368,222,350,223,334,234,325" href="ridingspots-germany.html" alt="germany">
<area shape="poly" coords="221,406,235,402,246,408,224,416" href="ridingspots-switzerland.html" alt="switzerland">
<area shape="poly" coords="218,424,217,441,224,451,235,444,249,448,254,466,250,470,256,471,279,494,303,511,310,538,308,534,306,543,320,541,305,543,315,544,320,532,327,524,317,515,325,509, 336,513,342,511,314,491,312,486,289,467,283,459,274,433,288,430,286,417,273,408,260,412,246,417,242,422,237,424,228,424" href="ridingspots-italy.html" alt="italy">
</map>

coothead

[Schmoopy]

Thanks for that,

I'll leave more space when adding more countries :)

[coothead]

Hi there Jack,

you can remove the Opera 'This map may not work well in Opera' warning now. ;)

coothead

[Schmoopy]

Done ^^, thanks for reminding me :P