A place for customers to chat about Realmac and its products - RapidWeaver, Clear and Ember!

[ANN] Image Mapper stack Released (Tsooj Media)

JoostJoost Amersfoort, The NetherlandsPosts: 871Members
edited July 2011 in Announcements
[img src="http://www.tsooj.net/products/index_files/ImageMapper.png_1.png" /]

[span style="color:#932277;"]Image Mapper stack[/span]
This stack is probably the easiest way to add linkable image map area's to any image on a stacks page.
It's fast and simple by using the built-in "Coordinate Inspector". Yes thats a built-in stack by itself
to help you measure the coordinates. But wait thats not all, you can also turn all the area's into a
highlighted area with selectable overlay and outline colors.


[span style="color:#932277;"]New to image maps?[/span]
The intention of an image map is to provide an easy way of linking various parts (area's) of an image
without dividing the image into separate image files. Where an area could be a rectangle/four sided
figure (rect), a polygon/multisided figure (poly) or circle.


[span style="color:#932277;"]So what can I do with this stack?[/span]
The name, size of each image map area, and each image map area
Tsooj Media Stacks, Websites and Office Automation

Prototyping a new web design and in need of some quick random text elements or placeholder images? Try the Lorem Ipsum Utility.
Extend the RapidWeaver publishing features with a custom start or expire date using the Publisher stacks set.
Looking for a free stacks element that comes with a responsive approach?
«1

Comments

  • WesleyWesley BelgiumPosts: 588Members
    edited 7:46AM
    Very cool stack and an innovative, super user friendly way to create the coordinates!
    Newest Stacks from WeaverAddons:
    + 3D Carousel Stack
    + Slidorion Stack
    + CSV + XLS Grid Stack

    Free Utility : WeaverDetect : Detect theme, plugins & stacks used on any page.
  • ColorwaveColorwave A rock in the middle of the Pacific OceanPosts: 1,365Members, Moderators
    edited 7:46AM
    Awesome job, Joost. You have shown that the limits of the current stacks HUD and API still have room to be utilized further than most people think. I have Charlie's image map stack, which I think is very well implemented, but you have taken the concept to new heights. I'll be buying it today.
  • zeebezeebe Lino Lakes, MinnesotaPosts: 820Members
    edited 7:46AM
    Nice new stack. I know it is hard to not copy other stacks by other devs out there, but you should have at least tried to not use the same name of such a similar stack.
  • WesleyWesley BelgiumPosts: 588Members
    edited 7:46AM
    Hmm, perhaps he didn't know there was another stack with the same name? The stack is not listed on rapidweavercentral.
    Newest Stacks from WeaverAddons:
    + 3D Carousel Stack
    + Slidorion Stack
    + CSV + XLS Grid Stack

    Free Utility : WeaverDetect : Detect theme, plugins & stacks used on any page.
  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    edited 7:46AM
    Ummm ... just a question ... the "ImageMapper" Stack has already been developed by Blueball Design.?
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • uknowirockuknowirock VegasPosts: 62Members
    edited July 2011
    Isn't there already a stack called Image Mapper? Just saying...
    If you do what you have always done, you will get what you have always got......

    Filling in as the Support Ninja for Joe Workman Stacks. Got a question? E-mail me
    With over 100+stacks available, Joe Workman has got a stack for you, check out the Stacks Store...
  • zeebezeebe Lino Lakes, MinnesotaPosts: 820Members
    edited 7:46AM
    on 1311108495:
    Hmm, perhaps he didn't know there was another stack with the same name? The stack is not listed on rapidweavercentral.
    I didn't realize Rapidweaver Central was the end all to stacks, he could have checked MyRapidwever as well, that is where I go.
  • bdeckertbdeckert Fort Worth, TXPosts: 293Members
    edited 7:46AM
    The naming choice is really unfortunate because it's going to cause a lot of unnecessary negative feedback.

    After looking at the demo site, it's clear to me that this new stack offers something really unique. Hopefully the naming thing can get worked out...

    It looks like you can image map an entire map of the USA with this thing!
  • zeebezeebe Lino Lakes, MinnesotaPosts: 820Members
    edited July 2011
    All I can say is I was not trying to be negative, I was just trying to point out the name choice. I would have to say the same for everyone else as well, no negatives about the stack, just informing the dev of the name of it. Looks like a good stack to me, something similar, yet different.
  • JoostJoost Amersfoort, The NetherlandsPosts: 871Members
    edited 7:46AM
    Thanks for the great feedback, about the name choice ... with the growing number of stacks this is probably gonna happen more often. If you think you have a better name for this stack than leave me a message using my contact form.

    Best,
    Joost
    Tsooj Media Stacks, Websites and Office Automation

    Prototyping a new web design and in need of some quick random text elements or placeholder images? Try the Lorem Ipsum Utility.
    Extend the RapidWeaver publishing features with a custom start or expire date using the Publisher stacks set.
    Looking for a free stacks element that comes with a responsive approach?
  • Ed BrennerEd Brenner TexasPosts: 3,332Moderators
    edited 7:46AM
    No harm, no foul. It is bound to happen with the ever increasing amount of Stacks.

    Why not keep it simple, some thing like - Image Map.?.
    myRapidWeaver
    FreeStack Theme
    MacSupportCasts
    { old forum post count = 6128 }
  • zeebezeebe Lino Lakes, MinnesotaPosts: 820Members
    edited 7:46AM
    I agree with Ed, in fact on twitter we were surprised it hasn't happened earlier. My idea for a name, Mapping The Image Stack.
  • herzdiebherzdieb Posts: 101Members
    edited 7:46AM
    Whatever name...amazing new stack!
    Very good work! I will buy this stack assap.
    "Design is not just what it looks like and feels like. Design is how it works" -
    Steve Jobs
  • rodsteelerodsteele Posts: 169Members
    edited 7:46AM
    Looks great - is it compatible with prettyPhoto? Thanks.
  • MartenMarten Edinburgh, Scotland, UKPosts: 1,304Members
    edited 7:46AM
    The stack is not listed on rapidweavercentral.

    It is now.
    I didn
  • zeebezeebe Lino Lakes, MinnesotaPosts: 820Members
    edited 7:46AM
    Hey Marten, glad to hear you try to get them all, and I meant no disrespect to Rapidweaver Central as it is a great service you provide us! I believe your site is the only one that has an actual list of all that is out there, but I could be wrong. I get all my news and stuff on Rapidweaver from the Announcement Forums, MyRapidweaver.us and Rapidwaver Central.
  • waxhawmacguywaxhawmacguy Waxhaw, North Carolina USAPosts: 411Developers
    edited 7:46AM
    on 1311137471:
    Thanks for the great feedback, about the name choice ... with the growing number of stacks this is probably gonna happen more often. If you think you have a better name for this stack than leave me a message using my contact form.

    Best,
    Joost

    Hi Joost,

    Your stack is an excellent new stack that takes image mapping to a new level and is for more advanced image mapping needs then what my ImageMapper stack bundle has offered for the past 1-1/2 years.

    For 90% of what the average Rapidweaver user needs for image mapping purposes, my ImageMapper stacks set will do what is needed and is all they will need. But for the Rapidweaver user who needs the added flexibility of what your stack offers, it is an excellent alternative choice for Rapidweaver users to use and definitely fills a need for advanced Rapidweaver users.

    That said however, I would like to respectfully request that you change the stack name to avoid any possibility of confusion for Rapidweaver users as my ImageMapper stack has been a very popular and well received stack that has a large user base. Maybe something as simple as "ImageMapper Plus" would work for you?

    Wesley, the ImageMapper stack has been listed on Rapidweavercentral's site along with the Rapidweaver Add-Ons section and various other sites noted for some time now.

    Thanks in advance for your help Joost on renaming your stack.

    Best,
    Charlie
    The All New Blueball FreeStack Responsive Theme Is Here!
    The only theme that gives you 1000s of layouts! Includes 22 FreeStack Responsive stacks, theme variations & more!
    NEW! Blueball FreeStack Responsive Add-Ons Pack 1 stacks bundle!
    Blueball Google Group
  • JoostJoost Amersfoort, The NetherlandsPosts: 871Members
    edited July 2011
    on 1311157584:
    Looks great - is it compatible with prettyPhoto? Thanks.

    I havent directly tested this with prettyPhoto but the latest version of that lightbox has support for image map area's.
    try adding the following after your link value: " rel="prettyPhoto[image_map]

    You can then set prettyPhoto to respond on the links: $("area[rel^='prettyPhoto']").prettyPhoto();

    If that isn't working then please send me an email using the contact form so I have another look at it.

    I have some thought for a more advanced version so maybe that a "lightbox" implementation is gonna make it onto the todo list for that stack.

    Best,
    Joost
    Tsooj Media Stacks, Websites and Office Automation

    Prototyping a new web design and in need of some quick random text elements or placeholder images? Try the Lorem Ipsum Utility.
    Extend the RapidWeaver publishing features with a custom start or expire date using the Publisher stacks set.
    Looking for a free stacks element that comes with a responsive approach?
  • JoostJoost Amersfoort, The NetherlandsPosts: 871Members
    edited 7:46AM
    on 1311176061:
    on 1311137471:
    Thanks for the great feedback, about the name choice ... with the growing number of stacks this is probably gonna happen more often. If you think you have a better name for this stack than leave me a message using my contact form.

    Best,
    Joost

    Hi Joost,

    Your stack is an excellent new stack that takes image mapping to a new level and is for more advanced image mapping needs then what my ImageMapper stack bundle has offered for the past 1-1/2 years.


    That said however, I would like to respectfully request that you change the stack name to avoid any possibility of confusion for Rapidweaver users as my ImageMapper stack has been a very popular and well received stack that has a large user base. Maybe something as simple as "ImageMapper Plus" would work for you?


    Thanks in advance for your help Joost on renaming your stack.

    Best,
    Charlie

    Thanks Charlie, I'll change the name. Already had some thought for an even more advanced version so maybe Image Mapper Plus and Extreme...


    Best,
    Joost
    Tsooj Media Stacks, Websites and Office Automation

    Prototyping a new web design and in need of some quick random text elements or placeholder images? Try the Lorem Ipsum Utility.
    Extend the RapidWeaver publishing features with a custom start or expire date using the Publisher stacks set.
    Looking for a free stacks element that comes with a responsive approach?
  • JoostJoost Amersfoort, The NetherlandsPosts: 871Members
    edited 7:46AM
    on 1311160297:
    The stack is not listed on rapidweavercentral.

    It is now.
    I didn
    Tsooj Media Stacks, Websites and Office Automation

    Prototyping a new web design and in need of some quick random text elements or placeholder images? Try the Lorem Ipsum Utility.
    Extend the RapidWeaver publishing features with a custom start or expire date using the Publisher stacks set.
    Looking for a free stacks element that comes with a responsive approach?
  • Henk VrieselaarHenk Vrieselaar Lemmer, The NetherlandsPosts: 2,089Members
    edited 7:46AM
    Great stack, Joost!
    The example project in the downloadfile makes it very clear how to use this stack. It's really fun and very easy to link different parts, even very small ones, of an image!

    Henk
  • tamrwtamrw IsraelPosts: 35Members
    edited July 2011
    looks good.
  • JoostJoost Amersfoort, The NetherlandsPosts: 871Members
    edited 7:46AM
    Just wanted to let you know that I
    Tsooj Media Stacks, Websites and Office Automation

    Prototyping a new web design and in need of some quick random text elements or placeholder images? Try the Lorem Ipsum Utility.
    Extend the RapidWeaver publishing features with a custom start or expire date using the Publisher stacks set.
    Looking for a free stacks element that comes with a responsive approach?
  • hansvanbruggehansvanbrugge Posts: 181Members
    edited 7:46AM
    You have another new client ;-)


    Thansk


    Bedankt Joost voor deze knappe reeks stacks (dutch for "Thanks Joost for this nice serie of stacks")
  • herzdiebherzdieb Posts: 101Members
    edited 7:46AM
    on 1311178920:
    on 1311157584:
    Looks great - is it compatible with prettyPhoto? Thanks.

    I havent directly tested this with prettyPhoto but the latest version of that lightbox has support for image map area's.
    try adding the following after your link value: " rel="prettyPhoto[image_map]

    You can then set prettyPhoto to respond on the links: $("area[rel^='prettyPhoto']").prettyPhoto();

    If that isn't working then please send me an email using the contact form so I have another look at it.

    I have some thought for a more advanced version so maybe that a "lightbox" implementation is gonna make it onto the todo list for that stack.

    Best,
    Joost

    Hi,

    do you talk about prettyPhoto, the jQuery LightboxClone, http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

    or prettyPhoto, the Stack, from RW Extras? http://rwextras.com/prettyphoto/pretty1.html

    I would like to create an imagemap with a lightbox effect.
    I've got a picture from a band. I would like to map the band members.
    Every click on a map should open a lightbox with a picture of the member.

    Thank you for your help.

    Al
    "Design is not just what it looks like and feels like. Design is how it works" -
    Steve Jobs
  • JoostJoost Amersfoort, The NetherlandsPosts: 871Members
    edited 7:46AM
    Hi Al,

    I'm referring to the original jquery plugin, the latest version has support for image maps and I'm not sure if the stack from Mauricio is based on the latest plugin version. You can also have a look at the Exposure stack from Joe, I've had some enthusiastic email form people using this stack combined with the Image Mapper Plus stack.

    Best,
    Joost
    Tsooj Media Stacks, Websites and Office Automation

    Prototyping a new web design and in need of some quick random text elements or placeholder images? Try the Lorem Ipsum Utility.
    Extend the RapidWeaver publishing features with a custom start or expire date using the Publisher stacks set.
    Looking for a free stacks element that comes with a responsive approach?
  • herzdiebherzdieb Posts: 101Members
    edited 7:46AM
    Hi,

    is there anbody who knows how to combine Image Mapper Plus and Expose Lighbox from Joe Workman?

    Thank you in advance

    Al
    "Design is not just what it looks like and feels like. Design is how it works" -
    Steve Jobs
  • JoostJoost Amersfoort, The NetherlandsPosts: 871Members
    edited August 2011
    Al,

    With expose you create a custom ID definition as a reference to content that you would like to show via Expose when a link with this ID/class is clicked.

    Simply add the the class value after the link in the image mapper plus stack and you are set to go. For example: http://www.yourlink.com" class="expose_ID

    Note that this is without the opening and closing quotes since these are automatically added for you.

    Best,
    Joost
    Tsooj Media Stacks, Websites and Office Automation

    Prototyping a new web design and in need of some quick random text elements or placeholder images? Try the Lorem Ipsum Utility.
    Extend the RapidWeaver publishing features with a custom start or expire date using the Publisher stacks set.
    Looking for a free stacks element that comes with a responsive approach?
  • FragrantBodyOilzFragrantBodyOilz Posts: 80Members
    edited 7:46AM
    Lovely stack. Quick question Im still pretty much a novice how difficult is it make that US map you have on the product page examples?

    Would you have to use the hud to actually get those dimensions to work. I ask because Id like to be able to figure out some way to point out places where our company has delivered.

    We deliver all over the world so would be kinda cool to show that.

    Thanks in advance ;)
  • herzdiebherzdieb Posts: 101Members
    edited August 2011
    on 1314210017:
    Al,

    With expose you create a custom ID definition as a reference to content that you would like to show via Expose when a link with this ID/class is clicked.

    Simply add the the class value after the link in the image mapper plus stack and you are set to go. For example: http://www.yourlink.com" class="expose_ID

    Note that this is without the opening and closing quotes since these are automatically added for you.

    Best,
    Joost

    Joost,

    could you be a bit more precise.
    I've got expose from Joe and Image Mapper Plus from you, but i don't make it that this faultlessly works

    Thank you in adcance

    Al
    "Design is not just what it looks like and feels like. Design is how it works" -
    Steve Jobs
Sign In or Register to comment.