Comments (13)
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/
from anythingzoomer.
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?
from anythingzoomer.
@kessingb Could you share an example please.
from anythingzoomer.
Here is the web page and image. Thanks!!!
Bailey
Bailey Kessing
5737 Foxwood Crossing
New Market, MD 21774-6146
email: [email protected]
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 [email protected] wrote:
@kessingb Could you share an example please.
—
Reply to this email directly or view it on GitHub.
from anythingzoomer.
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?
from anythingzoomer.
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 [email protected] 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.
from anythingzoomer.
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.
from anythingzoomer.
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 [email protected] 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.
from anythingzoomer.
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.
from anythingzoomer.
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 [email protected] 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.
from anythingzoomer.
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>
from anythingzoomer.
That did it! Thanks. It is perfect now!!!
Bailey
On Jan 16, 2013, at 4:56 PM, Rob G [email protected] 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.
from anythingzoomer.
Great! :)
from anythingzoomer.
Related Issues (20)
- Large Container Positioning Problem
- div contets HOT 1
- Different sizes images HOT 4
- Zoom displays large image only HOT 2
- conflicts with jquery wrapAll() HOT 1
- Hover doesnot work properly when -transform-rotate is done HOT 6
- Using zoom in multiple stacked images for Chrome / Safari HOT 5
- Plugin not showing zoom window when implemented on bootstrap modal HOT 2
- Issue while rotating image. HOT 4
- image map HOT 3
- Is it possible to rotate zoomer automatically on page load HOT 4
- Cloned Image Offset HOT 3
- Responsive Image HOT 4
- Magnifying svgs HOT 8
- Enable/Disable Anything Zoomer HOT 1
- Show coordinates of large image HOT 6
- Make zoomDim configurable in options HOT 1
- Zooming over input/radio elements HOT 8
- How to use dynamic id based this plugin ? HOT 1
- Canvas compatibility ?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from anythingzoomer.