I have an illustrator file and I need to get coordinates for the different shapes. The aim is to be able to click different parts of the image to link through to different URLs.
Please suggest how to achieve this
Thanks
What you need to do is use the Slice Tool to create smaller hot spots on your image.
http://www.pdesigner.net/Adobe_Illustrator_Tutorials/1_14_3_1.html <-- Slice Tool Tutorial
Then what you want to do is Select the Slice and then go to Object> Slice> Slice Options. Here you want to enter the url.
http://livedocs.adobe.com/en_US/Illustrator/13.0/help.html?content=WS714a382cdf7d304e7e07d0100196cbc5f-6361.html <-- How to set the Slice Options
After that you want to save and export your file for Web and Devices where you will choose the Images and HTML option.
Let me know if that works for you.
Related
I have thousands of high-resolution images that I would like to display on my website. I would like to select an image from Google Drive, dynamically tile the image, and display it on the website using OpenSeaDragon. Is that possible? If so, how do I go about it?
Thanks!
Can you get a link to the image on Google Drive? I assume so. Given that, you have a few options:
Paste the URL into https://openseadragon.github.io/openseadragonizer/. This should be plenty fine, as long as your image isn't terribly big; it loads the whole image and then tiles it in memory.
If your image is very large, you can paste its URL into https://zoomhub.net/, where it'll tile it on the server.
If you want to make your own viewer, follow the instructions on https://openseadragon.github.io/docs/. For the image tile source, try https://openseadragon.github.io/examples/tilesource-image/; this is what option 1 above uses.
If you're making your own viewer, and the images are too big to work with the simple image tile source, you'll want something like https://openseadragon.github.io/examples/tilesource-dzi/. You'll need to do the conversion yourself using something from https://openseadragon.github.io/examples/creating-zooming-images/.
I have a dwg (I can change the file format to svg or other formats if needed) file that I want to show on my web page. After this file is displayed in the page, I want to be able to zoom in, zoom out, pan and put links that request the api where necessary. In fact, it looks like information and links about the relevant place appear when you hover over the landmarks on Google maps.
How should I go about doing this job?
If you can translate the DWG file to DXF (there are several tools to do this) then you can use MapServer to render it on a web map compatible way. Have a look at MS4W for an easy way to install and configure MapServer on Windows. Since you want pop-ups, I'd recommend using Leaflet as the client side browser tool kit for providing pan, zoom, pop-ups etc to communicate to MapServer. figuring out the coordinate system of the DWG file will likely be the hardest part.
Use this method if integrating your DWG with other mapping data (roads, etc) is important. Otherwise look for something easier to implement.
There are libraries that let you easily zoom and pan an SVG image. For example svg-pan-zoom.
As for the links, you would need to do a bit of extra work. IIRC DXF files don't have the concept of a whole element that you could hover over. All the lines in the file are discrete object. So, if I am remembering that correctly, you may need to load the SVG into an editor and add elements on top of the diagram that correspond to your hover areas. They don't need to be visible. They can be transparent and still hoverable. You just need to then add the interactivity. Ie.
Optionally add hover effects with CSS.
Add a mouseover or click event handling to implement the link handling, or
use standard SVG <a> linking instead.
I would like to create a webpage that displays one image at a time with shapes and annotations shown over it. Each image should have a unique URL address in the address bar.
I have a set of images as PNGs. For each image there is a set of shapes (rectangles, polylines - as pairs of x,y coordinates in pixels) and annotations (location on the image x, y in pixels and a short text as string) to be displayed over it.
When user loads the unique url for an image they should see it with shapes displayed on top of it and annotation markers shown as circles. When user presses a button labeled „next“ the page loads the next PNG with its corresponding shapes and annotations. User can click on an annotation marker and a text balloon should open to show the text for the annotation.
How to approach developing this? I am asking since I don’t have an overview of web app frameworks or the current best practices for databases and graphic formats for online content.
I have experience in programming - Python, datascience, Procedural geometry, Unity for game development (C#), Lua - but not for the web.
I can do a WebGL app using Unity to do what i want and link it to a MySQL database but it feels like shooting a fly with bazooka. Maybe there is an easier, simpler way. Any advice or tips would be appreciated.
The best tip, I think, is in one of the tags of your question: canvas.
Images can be drawn onto it, as well as shapes. To handle your markers you could compare the coordinates of a click on the canvas to the coordinates of your markers (see this post for further info on getting the click coordinates). The annotation balloons could be realised by hiding or showing a simple <div> on click.
As for web app frameworks, depending on how fancy it should be you could do it "by hand" in native html and css, or use something with nice predefined components, like Bootstrap.
Depending on where you will be hosting this webpage, you will, or will not have to worry about the backend/server. There are numerous hosting providers available that provide user-friendly admin panels.
i am trying to make a custom page that would look like this
if i have a page where you can upload an image and enter description which feeds into a sql dB using PHP, how could one create a map of image thumbnails instead of markers? this photo was taken from: http://www.blocsoft.com/bmap/ but after browsing thru their site i didnt see anything about image thumbnails as markers
An alternative, but less flexible, approach would be to store the photographs in Panoramio and enable the maps Panoramio layer http://code.google.com/apis/maps/documentation/javascript/layers.html#PanoramioLibrary
You're going to want to do this via Javascript.
See http://code.google.com/apis/maps/documentation/javascript/overlays.html#SimpleIcons
Example # http://code.google.com/apis/maps/documentation/javascript/examples/icon-simple.html
Basically, you can use PHP to populate the markers within the javascript markup, then let JS init it.
Quick question... there are lots of ways to create an image map (old school, I know!) for a web page, but I have a requirement for one. I want to have an interactive map showing UK counties. I have the map, I have "mapspinner" (also dreamweaver) to do the polymap...
but, I was wondering if there was a way to use a magic wand to get the area's coordinates?
I have tried using photoshop export to illustrator paths, but the file doesn't contain any coords (as expected really!).
Does anyone know a way to do this? (I see that fireworks might do it, but I don't have that software)
thanks in advance.
GIMP can do this. See http://docs.gimp.org/en/plug-in-imagemap.html for a tutorial of exactly the task you are trying to accomplish.
I needed to do this, so I wrote an addon for Photoshop to export all coordinates of a path.
You can find it here: https://creative.adobe.com/addons/products/2389
The way to use this with magic wand would be:
create marquee using wand
right click -> Make Work Path..
(rename your path)
(repeat)
(install pathToCoords), go Window -> Extensions -> pathToCoords
click Export
Hope this is useful to someone.