Adding href / click event to the zoomed image

[webaschtl]

Hi,
I want to add a hyperlink ("<a href..:") to do anything after clicking on the zoomed image.
But with this code...

    <div class="large">
        <a href="goto.html"><img src="demo/rushmore.jpg" alt="big rushmore"></a>
    </div>

... the zoomed image does not appear correctly anymore.

As a work around I added a click event to this image via jQuery (... bind("click").function...).
But how can I add this behaviour just with a href and without jQuery/Javascript?

Thanks a lot!
webaschtl

[Mottie]

Hi webaschtl!

The link is interfering because it has a width and height set to "auto". If you add the following css, it should fix it:

.large img, .large a {
  display: block;
  width: 500px;
  height: 333px;
}

In this demo, you'll see I had to add the id of the specific window to the link (#zoom2 .large a). But because jsFiddle disables the ability to open new windows within the iframe, to see the link work, you'll need a full screen preview: http://fiddle.jshell.net/Mottie/f6d49/13/show/light/

[kessingb]

OK, I am trying to get a mapped area to work with the images. The map has a “title” (for a mouse over like info) and a hyperlink. Any chance this will work somehow?

[Mottie]

@kessingb Could you share an example please.

[kessingb]

Here is the web page and image. Thanks!!!

Bailey

Bailey Kessing
5737 Foxwood Crossing
New Market, MD 21774-6146

email: bailey@kessing.com
eddress: http://Kessing.com

Phone: (903) 224-5395 (903-BaileyK)
Home: 301-865-1223
Cell: 240-409-7247
Office: 301-846-5373

On Jan 15, 2013, at 12:09 AM, Rob G notifications@github.com wrote:

@kessingb Could you share an example please.

—
Reply to this email directly or view it on GitHub.

[Mottie]

Hi @kessingb!

Hmm, I have no idea why the location map at the bottom of that page needs a bunch of script tags and loaded scripts to create an iframe just for a link and image. At the maploco site itself, they provide that simple code (the code below was pulled from the iframe):

<a href="http://www.maploco.com/view.php?id=3058862">
    <img style="border:0px;" src="http://www.maploco.com/vmap/3058862.png" alt="Locations of Site Visitors" title="Locations of Site Visitors"/>
</a> 

This is way easier to work with than an iframe surrounded by script tags.

Anyway, I set up this demo. The large image is directly from the map loco site, so it may change, or not change, depending on how they update the image.

Is this what you were after? Or, did I totally misunderstand?

[kessingb]

Thanks for the reply! But there is no mapping that I can see that has “tool tips” ( a title comment) or that is clickable to go to a URL that I can see…is something not functioning in my web browser (Safari on the Mac)?

Bailey

On Jan 15, 2013, at 10:04 AM, Rob G notifications@github.com wrote:

Hi @kessingb!

Hmm, I have no idea why the location map at the bottom of that page needs a bunch of script tags and loaded scripts to create an iframe just for a link and image. At the maploco site itself, they provide that simple code (the code below was pulled from the iframe):

This is way easier to work with than an iframe surrounded by script tags.

Anyway, I set up this demo. The large image is directly from the map loco site, so it may change, or not change, depending on how they update the image.

Is this what you were after? Or, did I totally misunderstand?

—
Reply to this email directly or view it on GitHub.

[Mottie]

Are you referring to tooltips for each dot on the map? I'm not seeing that either, even on your original page.

Or if you mean the large image tooltip (title), I added that back into this demo and you can see how annoying it is to have it there.

[kessingb]

LOL. That is it. In the image I sent. I have an area mapped only but in my final. Each dot will have a “tool tip” providing info about the “dot”. Hard to believe but those dots mean something! ;) Thanks that will work.

WHat about the hyperlinking of the map area?

Bailey

On Jan 15, 2013, at 10:43 AM, Rob G notifications@github.com wrote:

Are you referring to tooltips for each dot on the map? I'm not seeing that either, even on your original page.

Or if you mean the large image tooltip (title), I added that back into this demo and you can see how annoying it is to have it there.

—
Reply to this email directly or view it on GitHub.

[Mottie]

Maybe instead of an img, use map and area (ref). The plugin will work with that markup as well. Each area can have an href attribute linking it to a site, tooltip or whatever.

[kessingb]

OK. Thanks for all your help and I am almost there. Can you take a look at http://lgdfm3.ncifcrf.gov/bic/BIC%20Circos%20BRCA1no11%20-%20zoomer.html

As you can see it “works” with both the magnification and “tool tips” and even the hyperlinks upon clicking! However, there is a problem as you can see in that it drops the mag image as you hover over the graphic and this makes clicking and the tool tip info difficult to access. Is there a setting that will prevent this behavior?

Bailey

On Jan 15, 2013, at 2:23 PM, Rob G notifications@github.com wrote:

Maybe instead of an img, use map and area (ref). The plugin will work with that markup as well. Each area can have an href attribute linking it to a site, tooltip or whatever.

—
Reply to this email directly or view it on GitHub.

[Mottie]

It looks like the problem is that the map and area tags are outside of the "large" class container. Move the HTML around to achieve this:

<div class="zoom">

    <div class="small">
        <img src="brcanoexon.png" alt="BRCA1" border="0">
    </div>

    <div class="large">
        <img src="brcanoexon.png" alt="BRCA1" border="0" usemap="#circosmap">
        <map name='circosmap'>
            <area>
            ...
            <area>
        </map>
    </div>

</div>

[kessingb]

That did it! Thanks. It is perfect now!!!

Bailey

On Jan 16, 2013, at 4:56 PM, Rob G notifications@github.com wrote:

It looks like the problem is that the map and area tags are outside of the "large" class container. Move the HTML around to achieve this:

...

—
Reply to this email directly or view it on GitHub.

[Mottie]

Great! :)