embedding javascript and CSS in an SVG

Question

i have a map of the US:

http://upload.wikimedia.org/wikipedia/commons/a/a5/Map_of_USA_with_state_names.svg

i am trying to embed this code in it:

http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/

as you can see it has CSS and javascript

however, i am having a very diffficult time trying to place the css and javascript in the right area. can someone please help me

i am doing this frmo the svg:

and when there is actually a mouse over, it is not doing anything

Answer 1

NOTE: VIEWERS: I KNOW THIS DOES NOT MATCH THE QUESTION SPECIFICALLY: IT IS MY ATTEMPT TO HELP THE POSTER GIVEN A BROADER VIEW OF QUESTIONS POSTED.

I am going to indirectly answer your question given my overview of your other questions.

My assumption: You wish to display a text box given the mouse over of a certian area of a map. On the original page you posted

Thus, you need to investigate this: http://www.w3schools.com/js/js_image_maps.asp regarding image maps. THEN you can put the nice box/text visuals associated with the area on the image over which your mouse moves.

This is much more highly supported than the direct svg method you are attempting, which is not supported well.

To get the image, you can right click it on that page and "save picture as" in your browser.

NOTE: There is a 400px map at the bottom of that page, clicking the "EDIT" link to the right of that will show you the image map for that resolution of a map which might be a good starting point should you wish if to be of a different size (other than 400px). Thus you would need to modify the numbers on that image map if you scale the map to another resoultion on your page.