I am putting together an interactive for a biology project. I want to have the user click on a hyperlinked area of an image to link to more information. I am excited by SVGs because selections can be linked directly to the path without creating an image map overlay.
I used Illustrator to create the SVG and assigned a link to the path in the Attributes panel, but I was disappointed that the link is not active in the browser.
Here is that SVG: http://nspowers.org/bio/flower.html.
Next, I tried ImageMapster. I referenced the US map example (http://jsfiddle.net/juvyh/)
$('img').mapster({
mapKey: 'state'
});
to generate this:
<img src="http://nspowers.org/bio/flower.svg"
usemap="#usa" style="width:202px;height:151px;">
<map id="usa_image_map" name="usa">
<area href="#" state="stamen" full="Flower Identification" shape="poly" coords="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314 120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874 99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868">
here: http://jsfiddle.net/nspowers/juvyh/1971 using the Illustrator SVG code.
I do not understand why the selection area is different from the shading-on-hover.
I would appreciate learning the cause of this difference and if there is a better workflow to achieve paths that can be hyperlinked directly within the SVG that will display in the browser.
It appears that the fill="none" attribute on the polygon is what is suppressing the link.
If you change that to fill="rgba(0,0,0,0.0)" (fully transparent black) the link works fine.
Here is a jsfiddle: http://jsfiddle.net/FE9LD/
And here is a jsfiddle with some css to add in the highlight effect (may need latest chrome): http://jsfiddle.net/FE9LD/1/
If you set pointer-events="fill" it will use the fill area as a link no matter what the value of fill is.
<a xlink:href="http://nspowers.org/flower-desc.jpg" >
<polygon fill="none" pointer-events="fill" points="103.709,42.484 96.906,45.624 92.981,55.306 94.551,65.249 102.663,70.482 115.484,72.314
120.979,66.557 122.025,57.399 120.194,50.596 125.165,60.539 126.735,67.604 123.072,78.07 114.437,83.042 113.391,84.874
99.892,86.705 85.916,78.594 80.421,69.436 77.281,59.231 81.468,49.026 90.103,42.484 95.598,39.868 "/>
</a>
Demo here
Related
Never done this before, but I think people used to capture the location of the click, if possible, and map that to a location in a bitmap image. That just seems like a whole pile of trouble to me, especially with a resizing of the image.
Now I suspect a better way is to have an SVG image, with anchor elements embedded, so they adjust their location with a resizing.
Is there, on the very slim chance, any other method?
Using svg is the easiest option there. Use svg.js, raphaёl or snap.svg or some other library. I prefer svg.js (plugins available, object oriented, syntax sugar for some methods, lightweight) but basically they are all the same though neither of them is perfect. So here is the code to create a clickable line (save it to .html file and run, don't forget to download svg.js):
<div id="svg"></div>
<script src="svg.js"></script>
<script>
onload = function() {
var draw = SVG('svg') //we are going to draw in a div with id='svg'
var line = draw.line('30%', 80, 180, 60) //coords can be in %, px or other css units
line.attr( { 'stroke': '#f00', 'stroke-width': 5 } ) //styled with css
//there are also shortcut methods like stroke('#f00')
.on('click', function() { draw.text('click') }) //method calls can be chained
}
</script>
Svg elements are part of html and they are styled with css, so it's much easier to manipulate them.
Download svg.js and see examples at https://svgdotjs.github.io/installation/
Read documentation at https://svgdotjs.github.io
Forget about mapping, it's boring unproductive and hard to maintain. There might be other options but I doubt there is something simpler than svg (if you use a library).
Since you were considering usage of mapping to make clickable locations on a diagram I suppose you are not drawing some trivial charts and existing charting libraries (there is plenty either svg based or not) won't serve you. Writing a library that will draw your kind of diagrams using svg library of your choice shouldn't be hard.
To make such a library I just write functions (or wrapper objects) to draw each class of objects (one function per class) that needs visual representation plus a couple of auxillary functions (e.g. for conversions between coordinate systems).
This is done with the usemap attribute of the img or object tag along with an associated map tag containing area tags that define arbitrary shapes, each of which can be associated with an href.
The following example is from the current HTML5 spec draft at W3C
<p>
Please select a shape:
<img src="shapes.png" usemap="#shapes"
alt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star.">
<map name="shapes">
<area shape=rect coords="50,50,100,100"> <!-- the hole in the red box -->
<area shape=rect coords="25,25,125,125" href="red.html" alt="Red box.">
<area shape=circle coords="200,75,50" href="green.html" alt="Green circle.">
<area shape=poly coords="325,25,262,125,388,125" href="blue.html" alt="Blue triangle.">
<area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60"
href="yellow.html" alt="Yellow star.">
</map>
I have the following issue. I have to draw a circle from a lot of points which are too close enough. You could see it in the jsfiddle link below:
http://jsfiddle.net/L6e5oz3L/
<path style="" stroke-dasharray="10 5" fill="#0000ff" stroke="#0000ff" d="M181.8181818181818,225L181.8181818181818,225M181.8181818181818,225L181.7933822865362....
I am using path for the case. Now I have to put stroke-dasharray style on it but actually the points are too close and the dashes are not rendered as expected here:
Do you have some ideas how could I achieve that effect?
I found it - if I use polyline instead of path with fill color "none", It works perfectly.
Hello I came across a really interesting looking website :
http://digitalbakery.org/
I wonder how did they provide a background image for the animated SVG Path elements?
I have tried to set a background image for SVG before. Did not work. However looking in the DOM I see in fact the images and SVG are entirely separated. The img are in a ul element specified somewhere.
Is the Path element, when hover, has its opacity reduced to zero hence revealing the img underneath? If so I cannot seem to figure out how is the exact location worked out. How can this effect be achieved?
I have used the named clipPath to crop images. The simplest example:
<svg id="pLayout">
<g>
<clipPath id="hex-mask">
<path d="..."></path>
</clipPath>
</g>
<image x="..." y="..." xlink:href="..." **clip-path="url(#hex-mask)"** />
</svg>
Location calculates by container's vertexes.
I am using an IMG Map that has many small pictures. When I hover over each image it will display a larger image. How do I do this? I do not mind using javascript, css, etc as long as it works. Please provide an example.
HTML OF IMG MAP
<img src="img.jpg" alt="Main Photo - Please View With Images On"
usemap="#Map" class="center" style="width:900px;" border="0" />
<map name="Map" id="Map">
<area class="1" shape="rect" coords="4,3,225,150" />
<area class="2" shape="rect" coords="2,152,221,303" />
<area class="3" shape="rect" coords="3,303,221,452" />
</map>
Each class would have a different image to display larger.
Here's a way to do it with ImageMapster:
http://jsfiddle.net/zSBL5/
To make this work with its built-in tooltip API you need to do a couple things. First add an attribute to each area like this:
<area data-key="2,all" shape="rect" coords="0,90,82,170"
href="http://www.shelterness.com/pictures/amazing-diy-photo-tiles-1-500x373.jpg" />
Note data-key. This is ImageMapster's "mapKey". The only reason we need it for your situation is to create a single area group called "all" that can be used to show the same tooltip for each area. Each area will have an attribute like this but with a different number, e.g. data-key="3,all", data-key="4,all", and so on.
Then here's the code to bind imagemapster:
$('img').mapster({
toolTipContainer: $('#tooltip-container'),
mapKey: 'data-key',
areas: [ {
key: 'all',
toolTip: true
}],
showToolTip: true,
onShowToolTip: function(data) {
if (this.href && this.href!='#') {
data.toolTip.html('<img src="'+this.href+'">');
}
}});
Here's what each option means:
1) toolTipContainer should contain the HTML for a template to show the tooltip. In the fiddle, you'll see I added a hidden div with ID "tooltip-container"
2) mapKey is the name of the attribute you added to each area. This attribute can contain one or more comma separated values. Imagemapster groups together areas for highlighting that share the first value, so use different ones if you don't need to group any areas. The 2nd value should be the same for each area, I use this to activate tooltips for all areas.
3) areas is an array of area-specific formatting information. Usually you use this to control how the highlighting effects on each area are shown. In your case I'm just using it to activate tooltips for all areas. The key all matches every area, since they all have that as then 2nd key, and toolTip: true enables tooltips. Normally you would say toolTip: "some text specific to this area:" and that text would just get shown in your default tooltip container. In your case, we want to show an image, and I want to grab the image URL from the area itself, so I need to handle it in a function when the tooltip is shown.
4) showToolTip says enable tooltips for the whole map.
5) onShowToolTip defines a function that gets called whenever a tooltip is shown. From here you can intercept it and change the contents to show the image from that area.
This should be simpler - but the tooltip API in imagemapster is really designed around a very simple model where you just have some hardcoded text for each area. This is a workaround to grab the URL from the the href of each area.
I think you want something like the below given fiddle. Code written is very rough & can be optimized. Just check you want this or something else.
Demo: http://jsfiddle.net/3GF6s/3/
Can someone help me that how can apply 4 different type of tooltips onto a single image?
When someone mouse over on image at top bottom left and right, at that time 4 different tooltip should be displayed.
Here, I have put example what I need. It's in Flash but I want without Flash.
http://www.lavasa.com/high/
If you have any idea regarding same please share with me.
I think you have three options.
Doing some work and displaying a tooltip 'manually', i.e. a floating div using javascript or something, there are probably a bunch of libraries for doing this.
Split your image into four, and provide a title (which will be displayed as a tooltiop of mouse is hovering) for each.
Do it old school with a <map>.
An example using <map>:
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area title="Save" shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area title="Furniture" shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area title="Plantations" shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
(Blatantly stolen from http://www.javascriptkit.com/howto/imagemap.shtml which was the first google hit, only added the 'title'-tag)
You could add 4 transparent images over your image and apply hover methods in them.
I think your looking for an imagemap with tooltips. Here is a quick example I can find, the demo you want to see is at the bottom of the page.
http://jquery.bassistance.de/tooltip/demo/
Well image map also struct me.
But these is another simpler method without having to write custom javascript. Just cut the image into 4 different parts and apply tooltip to each or simple <img alt="txt for north-west"/> will show some image tooltip.