I Have an image for a homepage screen. The top part of the image when clicked should lead to the second tab, the left hand side of the image when clicked goes to the third tab and so on.
Basically geotagging an image , so that i can make areas of the image clickable leading to different tabs
I tried implementing using a map chart where i added an image layer, and added this image. Some solutions asked me to add a marker layer with x,y coordinates but I'm unsure on how to proceed on my image
Kindly help with any alternative solution
it sounds like you want an image map. "geo tagging" is when geographic info like latitude and longitude are added to an image.
your best bet is to use a text area with a table filled with image-type action controls. if you have Photoshop, you can use a technique called Image Slicing to prepare your images.
FYI, this is probably not a simple task, especially if you don't know much about HTML. you may want to consider a different navigation scheme.
if you update your question with more detail about the end result you are trying to achieve, maybe someone can share a more fitting solution. http://mywiki.wooledge.org/XyProblem
Related
The idea is like the inverse of Ishihara test (http://www.colour-blindness.com/colour-blindness-tests/ishihara-colour-test-plates/).
I want to create with GIMP an image that showing something and then if I add a color layer, for exemple green glasses, then I see something new appearing.
I've searching far in Google and so but didn't found anything. Do you know how would I make this?
The Ishihara tests use the principle of combining things color blind persons cannot differentiate.
Coloured glass filters will only remove other colours from what you see. They don't add something. Therefor it is not possible to create a digital image that contains no information unless seen through a colour filter.
The only thing you can do is overlap your "hidden" information with high contrast colour noise.
Like here:
Using the glasses / filter only improves the visibility. The information is not added. It was always there.
I'm kicking around an idea for a side project and am looking for advice on which direction to go in terms of technology. I've done some research already, but am still fairly confused as to what the realistic options are.
I'd like to make an interactive map based on a fictional world (think Middle Earth), including a timeline filter and a details section for additional information on an event or location.
Desired Features:
map on the left
details pane on the right
timeline slider/filter at bottom
Territories
color for political affiliation
displays details in details pane
labels
labels for cities
Hurdles:
Get a clean map image to work with
Map image into intermediate format (svg, geojson, topojson?)
Display map on webpage, style map, add animations, etc
Technologies
SVG
I'm pretty sure I could code all of this in SVG using events and boundaries. I've already been able to create SVG Paths from the image using GIMP, so converting the map into an SVG file seems plausible.
The issue with doing it this way is I would end up doing all the work the hard way when there seems to be lots of frameworks for this kind of thing already.
Kartograph
La Bella Italia is a very nice example and would serve as a good starting point. I love the trade route animations and the border styling with the glow filters.
The bonus here is that I know I can make an svg map, which is all this would need to get up and running.
My issue here is it doesn't seem like Kartograph is as rich of a platform as D3.js. I'm not sure if I can double dip and link some D3 stuff with the kartograph events. If I could, that might be the solution.
D3.js
The sliders, animations(hover and selection), and topojson seem like they would be perfect. But the main issue I have here is getting my image converted into a GeoJson format. From what I can tell these formats are strictly for Real World maps, using longitude/latitude.
So there you have it! I'm hoping there is some good news on how I might convert my map image into topojson so I can enjoy the benefits of D3.js. If not, I suppose I could just try kartograph and wire the events up with D3 controls.
Thoughts?
I'm currently writing my master thesis and I have the same topic like you had these days. I called my project Arda Maps. Feel free to ask me anything if have techonology questions.
I'm using the following frameworks/tools in my project:
QGIS
JQuery
D3.js
GeoJSON/TopoJSON
TimeGlider
Can anyone tell me how I would add a label to the center of a polygon by way of kml like the ones in the link: http://maps.huge.info/zip.htm.. I don't want a marker and I don't need the info to pop up when its clicked, I need it to be there from load, it would just have the zip code for the particular polygon. I wont be drawing the entire US zip code, maybe just a few at a time. Oh, and I'm using mapquest API not google or anything else
Use the Leaflet.label plugin, that does exactly this.
ive used an online srpite service http://spritegen.website-performance.org/ but i want to know how to make them by myself.
How can i save an image that it should be so small but when used on my web site it comes out normal size?
Sprites aren't about making the image itself small, it's about decreasing filesize by packing several images into one.
Take a look at Yahoo's icon sprite. Notice that they have all their section icons stacked vertically in one large image. They then use CSS to position the background to only show a small window of the sprite image, thus giving you just the icon.
In the end, it's up to you how you arrange your sprite. Check out the bottom of Amazon's sprite.
Either way, hopefully that helps gives you a better idea of the concept of sprites.
From the very site you link:
CSS sprites are a way to reduce the
number of HTTP requests made for image
resources referenced by your site.
Images are combined into one larger
image at defined X and Y coorindates.
Having assigned this generated image
to relevant page elements the
background-position CSS property can
then be used to shift the visible area
to the required component image.
So there is nothing magical involved: you simply need to pack all your pictures into a single giant image with your favourite graphics tool and insert them as CSS background. Just look at this CSS sprite by Google:
(This is a post that I'm moving from ui stackexchange.)
We have some irregular shaped areas...imagine a map of the states of the US. Imagine also that inside each state there is a rectangular region that contains graphics and text. We want to make each of the states react to mouseover/mouseout/click.
If it is a straight up HTML/Javascript page (no Flash), are there other ways to implement this than image maps?
If this is not possible, I would also consider just having the rectangular region within each state react to mouse events.
Does "straight up HTML" mean you can use Javascript? If so, consider the Raphael javascript library, which wraps SVG. Check out their homepage for a great overview of what you can do, including this example of counties (?) of Australia: http://raphaeljs.com/australia.html
You could also consider processing.js, which is a similar visualisation library but wraps canvas as opposed to SVG.
how about coordinates? grab your map of the us, figure out the polygons that contain a state, and every time the user clicks somewhere, get the position of the click and figure out what polygon that position is in.
the only tricky part is doing the translation from logical to physical. i.e. when you get the location of a click it'll probably give you the location in global browser positioning, and you'll need to figure out where your image is using jquery's .position().