Image Mapper Sticky Note Option -...

User 15653 Photo


Registered User
233 posts

JQuery is cool... :) Thanks Eric.
User 15653 Photo


Registered User
233 posts

How do y'all deal with this script notice that comes up with Internet Explorer? Doesn't come up with firefox but does come up with IE.
Attachments:
User 187934 Photo


Senior Advisor
20,181 posts

Click on allow blocked content. It's an IE thing.:lol:
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 15653 Photo


Registered User
233 posts

I clicked that right away and it works fine. I was just a little concerned about how the message would be received where I work (where I'd planned on using this). I'm not a huge IE fan but that's the only thing in use in a lot of business. That little message is only a nuisance for me.
User 187934 Photo


Senior Advisor
20,181 posts

Anybody that uses IE knows what it is and is use to it. To me it seems more dangerous for users because they will get immune to it and just click it anytime it pops up.:P
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 15653 Photo


Registered User
233 posts

Yeah - you have a good point there... :)

Thanks again for your help Eric.
User 143493 Photo


Registered User
92 posts

Eric Rohloff wrote:
Yup. Coffeecup's image mapper, HTML Editor, and Colorbox.:) Can you say JQuery is cool.:cool: If you need some directions after you make you map just give a holler.;)


Hello Eric.

I love the work you did with Image Mapper and Colorbox. I have used Colorbox on some sites . . . http://www.anythingwoodwork.com/. However I could not figure out how to make it work with Image Mapper. Any tips you could offer would be awesome.

Thanks
Onward Through The fog!
User 187934 Photo


Senior Advisor
20,181 posts

What page are you trying to apply the colorbox to image mapper?
There's this version using tool tip instead of Colorbox.
http://www.coffeecup.com/forums/image-m … post238039
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 143493 Photo


Registered User
92 posts

Eric Rohloff wrote:
What page are you trying to apply the colorbox to image mapper?
There's this version using tool tip instead of Colorbox.
http://www.coffeecup.com/forums/image-m … post238039


Hey Eric, Thanks for the speedy reply. the page I want to use IM and colorbox is located here:
http://www.thierryboehm.com/Joshua/test … htest.html --- I first ball is the only one I have mapped for a test

I will also go check out the link you just suggested.

I guess what I am really wondering is where you put the colorbox link format. do you put it where the URL field is in Image Mapper?
Onward Through The fog!
User 187934 Photo


Senior Advisor
20,181 posts

Here's how you setup your image map links to use colorbox.
This one is copied from mine. The class="group4" is what your mainly looking for.
This is for just an image.
<area name="Bob Visser" shape="circle" coords="591,375,23" class="group4" href="colorbox/photos/large/bordered/Bob_Visser.jpg" alt="" title="Bob Visser" OnMouseOver="window.status='Bob Visser'; return true" OnMouseOut="window.status=''; return true">

Then in the head of your page you place the script links.
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".group4").colorbox({rel:'group4', slideshow:true});

});
</script>

<***************** End of photo colorbox******************>


<***************** Start of textbox colorbox******************>

This is for having text and images after clicking the link inside the text.
You'll be looking at the class="inline" href="#bobvisser" for this application
<area name="Bob Visser" shape="circle" coords="591,375,23" class="inline" href="#bobvisser" alt="" title="Bob Visser" OnMouseOver="window.status='Bob Visser'; return true" OnMouseOut="window.status=''; return true">


Then you add the hidden text content for colorbox popup to your page. id='bobvisser' needs to match the above href. Adjust to your actual needs.
<div style='display:none'>
<div id='bobvisser' style='padding:10px; background:#fff;'>
<p>Budgets, numbers, financials, accrual accounting, AARGH! We like to make software, not do accounting. Luckily for us, Bob loves accounting. Seems like a match made in heaven. <a class="group4" href="colorbox/photos/large/bordered/Bob_Visser.jpg" title="Bob Visser">Bob</a> used to crunch numbers for people like Heineken, L’Oreal, and some giant German bank. Nobody says EBITDA with more enthusiasm.</p>

<p>When Bob isn’t up to his ears in Excel spreadsheets, he likes Sam Adams, live music, and wacky American sitcoms. Since he lives in the Netherlands, American TV shows are hard to come by. Maybe that’s why he likes accounting.</p>
</div></div>

This goes to the head of your page.
<link rel="stylesheet" href="colorbox/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="colorbox/jquery.colorbox.js"></script>

<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
});
</script>

Look at my source code and you will see it's actually pretty simple to set each link up. Concentrate on getting one to work then start adding more, making adjustments to the code to reflect a new colorbox popup.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.