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
Related
I want to make a panorama viewer in HTML5, I have managed to place images in my canvas so that they form the 360 degree image and used a jQuery plugin to make the effect of scrolling sideways. Now to my "problem", I want to make it more spherical feeling by stretching the edges of the image in the canvas when I rotate my image. Like Google does in it's street view, to get a better feel for the depth in the image.
Is the stretching effect something that is possible in HTML5 canvas with or without an JavaScript plugin (feels like someone could have made such a plugin or had the same problem besides Google).
Hope I'm not being to fuzzy...
What I believe you are asking is how to perform a 3D projection on an HTML5 canvas. Your best approach would be to use wegGL. Take a look at this example.
And a beautiful example.
You can also try checking out the software Pano2VR by Gnome Software. The trial version has an unlimited trial time, it just puts stamps on your panoramas. But it's pretty easy to customize.
I would like to create a web based regional map that would enable the user to click in order to choose a region on the map, and will also have some visual effect (resizing, etc) when hovering over one of the regions.
I want the map to work on desktops and mobile devices.
I'm having doubts regarding the best technology to use here when I'm mainly considering traditional image maps vs.SVG.
Image map are more widely supported, but any animation that effects only a single area in the map must be hacked over. SVG is a more natural fit, but is not supported by Android (old IEs can work using svgweb)
Any advice? Any other option I'm overlooking?
It sounds like you have your answer; you are offering the option between SVG and image maps, say that you need mobile support, and say that Android doesn't support SVG. SVG is thus eliminated, and you are left with image maps.
Android and any other mobile OS that wants to remain competitive will almost certainly be enabling SVG in their default browsers eventually, as there is basically no good reason not to.
If you truly cannot wait, however, there's this:
http://www.howtocreate.co.uk/tutorials/css/slopes
I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.
Remember imagemaps from Web 0.9b? I'm curious about the state of this tag now in 2010.
Given some of the surprising and successful resurgences of white elephant technologies (Google Maps' use of Javascript, which was novel when it first appeared, and MySpace ushering in an animated GIF renaissance), is anyone using imagemaps today in new or interesting ways? How do they fare in current browsers, and do they play well with contemporary Javascript techniques or other new technologies?
Image maps still work perfectly fine, but most web developers choose not to use them, preferring instead to have multiple images positioned using CSS (possibly with each image wrapped in an anchor tag or with javascript events attached).
Image maps were great in the days when CSS was poorly supported, but we don't need them anymore even though they still work fine. Using CSS on multiple images allows you to do everything you can do with image maps, and it's much more flexible.
For example, you can dynamically remove an individual img. With image maps you would have to replace the entire image to remove even one item in the map.