I'm looking for a tool which could help me with html map tag. I know I can do it by myself with photoshop and notepad, but it's very laborious. I've investigated image-maps.com but it scales up my image, so the coordinates I put won't fit to my website. Do you know an alternative tools?
Regards,
David
Try dreamweaver.
http://www.adobe.com/products/dreamweaver.html
Starting out with a given image, I would like to be able to trace polygons on the image and then export the result as an HTML image map.
What would also be nice is to be able change the scale of an existing image map, thereby changing the size of the polygons and shapes.
Is there a program that anyone knows of that has these features?
Many program do this. It is to time consuming doing complicated maps manually.
I know coffeecup is a used tool for this.
What would also be nice is to be able change the scale of an existing image map ..
I wrote a Javascript image map resizer, it's here. Just paste in your HTML and it will return the scaled image map. You must include "height" and "width" attributes for the original image in the HTML. (This is a quick and dirty tool, it doesn't actually do anything other than parse the HTML you've pasted in. It uses those attributes as the base of calculations).
You may also be interested in my jQuery plugin ImageMapster which can resize image maps dynamically among other things.
I use this site it's fairly good for quickly making image-maps
I use this site https://www.image-map.net/ to trace polygons on the image and then export the result as an HTML image map.
Do people still use the old HTML Image Maps? The ones with:
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
Or is there a newer, better alternative?
Yes, people do still use image maps. An alternative would be to position elements using absolute positioning and CSS but that's not necessarily better. It also doesn't allow you to have shapes like in image maps
They are in the HTML5 specification, so they will not get deprecated.
You can still freely use them, they certainly still have their place in web development. Or I could say, those rare occasions exist where you can best solve something with an image map.
An alternative solution to using CSS or image maps would be to make use of SVG graphics embedded into the HTML dom.
One tutorial on how to achieve mouseover effects using this technique is described in this tutorial: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
The key takeaway being that SVG elements also trigger traditional dom events including onmouseover and onmouseout.
Yes html image maps are good especially if you want your area to be a polygon. You can add rollover effects to you map as well with javascript. There is a nice tutorial and demo here:
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
Image Maps are still in HTML5 specifications, supported by all browsers.
They can be adapted to responsive design using jQuery RWD Image Maps:
https://github.com/stowball/jQuery-rwdImageMaps
It detects and automatically resize the image maps coordinates.
It's also available for Wordpress developers as plugin:
http://wordpress.org/plugins/responsive-image-maps/
Simple and effective solution.
Yes, I still use image maps, however my last project used Raphaël. It was pretty easy to get something up and running.
http://dmitrybaranovskiy.github.io/raphael/
From their web site:
Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base
for creating graphics. This means every graphical object you create is
also a DOM object, so you can attach JavaScript event handlers or
modify them later. Raphaël’s goal is to provide an adapter that will
make drawing vector art compatible cross-browser and easy.
Nice simple image map example:
http://dmitrybaranovskiy.github.io/raphael/australia.html
While I rarely see them used on modern websites anymore, they do seem to be used by my clients in their email campaigns. However, I've noticed, and confirmed that there are some scaling issues with the coordinate system on mobile devices.
** I know this thread is old, I was just doing some additional research into this for a recent email campaign issue and thought it may help someone else down the line.
3rd party edit
The question on litmus.com on image map support is from 04/2014
Image maps do not support ALT tags, when images aren't loaded the ALT text isn't displayed in some clients.
Image map usage generally results in using large images which can cause deliverability issues and hinder download speed (especially
important to mobile users).
And most importantly, The iOS (iphone/ipad) doesn't scale the image map link coordinates when the image is scaled which breaks the
links. Since iOS represents a large majority of email opens (iPhone +
iPad = 38% via http://emailclientmarketshare.com/) this is important.
Yes, it still used
An image map allows a user to hyperlink to many pages by clicking different parts of an image.Simply by using image map we create lists of coordinates relating to a specific area of the same image and give the hyperlink to a different location. By using this within a single image we give multiple links.
More
image map is quite interesting option in html and html5 they are still being use and i personally love it i therefore find issuse in mobile devices my issue is relatd to scaling
yes i have experience it my self however i am a student enrolled in html html5 and for begineers i would like to follow w3chools link
http://www.w3schools.com/html/html_images.asp
you will gain alot from this [page
I want to draw geometrical figure in the <textarea> of HTML pages, but I'm facing difficulty in how to do that. Could anyone please tell me?
You can use the HTML5 <canvas> element and its javascript API to draw geometric figures in an HTML document. There are many examples and tutorials of its usage, but here is one I found this morning: Mozilla Canvas Tutorial
You can’t draw in HTML <textarea> elements. You can only put text in them. So the nearest you can get to drawing in them is ASCII art.
I have a little project with Google Map API: to show a small map on page. But the Google logo and copyright word are overlap together.
Can I move them out? And how?
screenshot here
You could do this fairly easily with CSS, but you'd break Google's Terms (see section 7.4).
If you can't make your window bigger, you could use an alternate mapping solution, like OpenLayers