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
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.
Related
This is a question that comes up quite frequently when I'm building sites. I've never come up with a solution but I thought maybe some smart SO contributer might be able to work it out so here goes:
Say I have a large full page background image with background-size:cover. I want a specific part of the image to have a hover state e.g. Say it's a large picture of a car driving on a mountain. If you hover over the car I want it to be replaced with a glowing car.
One way I could do this is to use javascript to replace the whole background image for the same image of the mountain scene but with a glowing car. But obviously this requires an additional large image download. (As in this example).
What would be better would be for me to have another div that covers the car and just assign a new background to the inner div which is perfectly lined up to the parent image.
This is straightforward to do in an unresponsive way (see this example) but I can't think of a way to do it with a responsive background-size:cover image.
It feels like there might be a solution, possibly using object-fit or something. But nothing springs to mind. Here's a responsive version of the pen (which doesn't work but demonstrates my desired set up).
Can anyone think of a way of acheiving this? What other techniques could work here?
Thanks
I am trying to write a scroll to top chrome extension that can automatically detect the colour scheme of the website that it is being placed on.
I thought that the best way to do this was by grabbing the very first (top left) pixel on the page and getting the colour of it.
I've searched around SO and found how to do it with an image which means that I could grab a screenshot of the page and just process the image, however I was hoping that there is a much more sophisticated way to do this. The search lead me here:
How to get a pixel's x,y coordinate color from an image?
I can include JS packages to do this but I can't seem to find any that can do the specific task that I want.
I currently use jQuery in my project so I can use either or to do this.
I loaded individual STL structures into my 3-D viewer using three.js and I want to be able to click on individual structures in my 3-D viewer and a name tag appears onMouseClick or onMouseOver for that specific structure.
I think it has something to do with a coordinate point of that specific object or maybe just the total surface area of that object and then use a onMouseClick eventHandler to create a window but I'm not sure.
Is there any sample or open source code I can take a look at?
Thanks!!
Check any of the collision detection examples in the examples folder. Probably webgl_interactive_cubes.html is what you're after:
http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html
This will show you how to find which element is behind the mouse.
I also wrote a tutorial on picking objects with three.js if you want to know a bit more about how the thing works internally:
http://soledadpenades.com/articles/three-js-tutorials/object-picking/
Then --you already know where the mouse is from the mousemove or mouseclick event-- just create a span or something similar, and place it in that position with css's left and top properties, for example
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.
i am building a workout website that tracks exercises. Each exercise has a mapping to a certain part of the body (bench press --> Chest)
I am trying to figure out a way to visualize this and i thought of the idea of putting an image of a person "highlighting" the affected muscles. Sort of like This:
(source: aquaviews.net)
Assuming i have found a good picture without any areas highlighted, is there anyway to dynamically "highlight" areas in a picture (the red section) with javascript (client side) or C# (server side) or do i need a seperate picture for every exercise?
You COULD overlay the the base image with SVG or a <canvas> element.
But then you have cross-browser issues, possible alignment problems, and probably a cheesy look.
I'd have an artistically inclined person do the highlights as a separate graphic for each exercise.
But rather than have these as separate images, keep/combine them in a single file -- as a CSS Sprite. Then you get a professional appearance, great cross-browser support and easy, minimal coding.
You can use css to position your links over said muscle group and use a rollover to show the highlighed part...
Edit:
Sorry I guess I should have elaborated. You can absolutely position the elements with CSS and use an image rollover to swap out that section of the image to the highlighted section of that image. You can either do this by putting each muscle group into it's own div and putting an image of the corresponding muscle group into the background image. Then swap it out on rollow over. or you can use z-index and absolutely position the rollover elements where they need to be and change the z-index when needed.
Interestingly enough, I used to be a personal trainer and I did this same thing but did it in flash. That's my recommendation.
However, if you want to do it with JS and CSS, Brock's suggestion of the sprites is likely the way to go.
What you could do, very simply, would be to have an image map that for certain areas called a js function to swap about the background image with the same version of that image with the highlighted sections. Rather than several small images, you have the same image but with one part highlighted.
One question though, will you be doing compound exercises that would require you to have two sections highlighted? For instance, an incline press would highlight part of the chest and part of the delts. This makes the whole proposition more complicated due to the specificity of your roll overs.
i think you seeking a way to do this without requiring separate images, and if so - the answer is No - you are going to need to create separate images for at least the highlighted areas. Short of perhaps using a CANVAS element which has cross-browser issues, I don't believe there is any way to impose a filter to an arbitrary region of an image element.
And even if you Could apply an alpha filter, you would still need the geometry of every shape, so the effort/work is perhaps the same...
Once you have the various images there are sundry ways to approach the problem after that...
This is a simple implementation as i have done this highlighting with a county map. Use an image map. Then find a highlighting script like (mapper.netzgesta.de) mapper.js. All you need to do is have a properly set up image map (image must be suuounded by a div) and a link to this script. The highlighting starts immediately. Please check the license. Ther are several other that scripts that use javascript css and jquery to achieve this same effect. Just research highlight image map in google. Sorry i cant give you a link to my implementation of this as it is on a secure site for work. Good Luck.