Search

There is an interesting tutorial on how to add a svg layer over an html imagemap over here.
Can anyone figure out how this could be implemented in the symphony workflow?

I’d probably just use an imagemap and add the hover behaviour with jquery, but the tempting thing about the above approach is it uses xslt to transform the html into svg xml.

I wonder if this could be used with just the svg only, and have a dropdown countrylist for old browsers instead of an oldschool imagemap…

Or use Raphael JS to create a clickable map. Raphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+. It will serve SVG or VML depending on what the browser supports.

Ah thanks, forgot about that.
Well I made some considerations, svg or raphael seem even more verbose then olschool map/area html and need a transformation form a drawing to the coordinates. However the only options if you need super irregular and overlapping forms, next to the simple map/area. So I redesigned the implementation to only need rectangulars, now I could emulate imagemap clickareas with jquery, but even more simple; just use a css based sprite imagemap based of inkscape: clean, simple code.
Now I wonder if one can use a pure svg file instead of png for the css backgrounds….

Create an account or sign in to comment.

Symphony • Open Source XSLT CMS

Server Requirements

  • PHP 5.3-5.6 or 7.0-7.3
  • PHP's LibXML module, with the XSLT extension enabled (--with-xsl)
  • MySQL 5.5 or above
  • An Apache or Litespeed webserver
  • Apache's mod_rewrite module or equivalent

Compatible Hosts

Sign in

Login details