Best practice - Imagemaps in RedDot CMS

Craig from New York asked in the RedDot googlegroup if there is a way to build an imagemap in the RedDot CMS and make it editable by non-HTML knowing editors. I think for simple rectangle imagemaps it is. Here is my short summup of how I did it:

I added in the RedDotEditOnlyMode a DIV-Tag with a customized background with coordinates in it.
I gave the DIV a padding, so that you can see the x and the y axis in the background image.
I had to fiddle around a bit until the background image fitted the real map coords but its managable.

Then put your image in it and add a list to the same template. Connect to this list another page containing 4 coordinates with standardtext elements for building a rectangle.

CSS:
  1. // Tip: I prefer using a normal
  2. // image inside a wrapper
  3. // and then not using a map but
  4. // another image as link, which is positioned via:
  5. position: absolute;
  6. margin-top: 123px; //from list  std-element
  7. margin-left: 321px; // the same :)

If you prefer using a map, as a hint for your editors, you can give the rectangle a background color in editmode.
I hope you could use this. Please let me know, if you implemented it in your project.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

2 Reaktionen zu “Best practice - Imagemaps in RedDot CMS”

  1. Craig from New York

    Hello.
    This is Craig from New York.
    This works very well. A nice trick!
    Thanks

  2. Markus Giesen

    Hey Craig,

    thanks for your comment!
    If you have any code examples or a demo link for the other blog readers I would love to publish it or give you author access for the blog ;)