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>
Related
The default stroke for creating SVG elements with raphaeljs seems to be black 1px. I can manually turn it off every time I create an element, but I rather set it as a default attribute "stroke: none" to the entire paper. Is it possible?
I encountered this problem a little while ago; I believe this is a library default. Whilst you could change this in your library source, doing so would make updating library versions difficult, so you might be better off disabling it in the code that calls Raphael.
If you're worried about this being verbose, you could use a delegate function that hides the 'defaulting hacks' as you build similar shapes.
It depends if this is just for defaults, or trying to cut down repeated code etc. You could create your own shape with defaults you want as a possible alternative is what I was thinking...
var paper = Raphael('mydiv',400,400);
Raphael.fn.myBlueCircle = function (x,y,r) {
this.circle(x,y,r).attr({fill: "#00f", stroke: "none"});
};
paper.myBlueCircle(100,100,100);
paper.myBlueCircle(150,200,100);
jsfiddle
You may also want to do the same for sets if those are to be used with the new elements reference
I'm not able to access the canvas id using jquery.
I added the jQuery Library. But I'm not able to get an alert when I click the canvas id.
But javascript is working fine.
<script>
$(document).ready(function(){
$('#sq').click(function(){
alert('test');
});
});
</script>
<canvas id="example" width="260" height="200">
<h2>Shapes</h2>
<p>A rectangle with a black border. In the background is a pink circle. Partially overlaying the
circle.
Partially overlaying the circle is a green
square
and a purple triangle,
both of which are semi-opaque, so the full circle can be seen underneath.</p>
</canvas>
Everything you've put inside your canvas element is fallback content : It won't be used in a modern browser so you can't access it and you certainly can't click on it.
The correct use of a canvas in a modern browser is to draw onto it using its context.
From the MDN :
The < canvas > element is an HTML element which can be used to draw
graphics via scripting (usually JavaScript). For example, it can be
used to draw graphs, make photo compositions, create animations or
even do real-time video processing.
If you want to catch clicks on the canvas, do
$('#example').click(function(){ // <-- use the id of the canvas
alert('test');
});
You are not suppose to put html elements inside the canvas tag. The idea of the canvas is to draw on it using code (a.k.a. javascript).
What you are doing isn't gonna work (or more likely will be seen only if the browser doesn't support canvas - which means very very old browsers) :)
Take the html elements out of the canvas and change $('#sq').click(function(){ to $('#example').click(function(){
Look at this:
http://jsfiddle.net/Zprb4/
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/
Problem:
I'm working on a website where there is a "dial" that displays a number of tabs representing different divisions of an umbrella company:
At the moment I have everything prepared in HTML/CSS (positioning of each of the tabs). The inner circles are on a higher z-index as the tabs will need to animate outward when rolled over (I can achieve this part). The images for the tabs actually look like this:
Unfortunately it didn't occur to me until now that because of the mechanics of rollover and rollout in JavaScript, the boundaries for each item are square, meaning they overlap all over the place. For example, the centre circle's rollover area is actually this:
Which detracts some massive clickable/rolloverable areas on the inner circle of tabs. This effect then stacks with each of the tabs, rendering a standard approach non-viable.
Approach:
This is fine, what I plan to do now is measure the distance and angle of the mouse from the centre of the dial and use these values to determine the relevant tab, and work from there. I'll basically do the following:
Collect angle (using atan2) and distance (using pythag).
Apply my .click() to the entire dial, and work with these values from there.
Use setInterval() to constantly check which item is rolled over and work with its animation from there.
Question:
I'm not exactly sure how to implement what I am doing (with JQuery). I know how to do all the Math stuff once I have the coordinates that I need, I'm just not confident in getting the actual coordinates (ensuring the same results cross-browser).
How can I best gather the coordinates of:
The centre of my dial.
The cursor (assuming that the cursor is within the same axis as the centre of my dial i.e. rolling over the centre of the dial will mean both sets of coordiantes are the same).
Note:
Taking the above, anything that achieves the same result (being able to have proper rollover detection for overlapping elements) is equally as helpful.
To get the center:
var dialPos = $( "#Dial" ).offset();
var center = {
x: dialPos.left + $( "#Dial" ).width() / 2,
y: dialPos.top + $( "#Dial" ).height() / 2
};
Cursor coordinates:
$( "#Dial" ).mousemove(function( e ) {
var x = e.pageX - center.x;
var y = e.pageY - center.y;
});
You can define an image map over the stack of layers. The map will define clicking/hovering regions, and the browser will take care of hit detection. With Adobe ImageReady, I have mapped a portion of your reference image so that "Reprise" and "Initiative" are hotspots:
ImageReady produced the following HTML:
<img src="images/Imagemap.png" width="488" height="488" border="0" alt="" usemap="#Imagemap_Map">
<map name="Imagemap_Map">
<area shape="poly" alt="" coords="82,336, 138,303, 130,287, 123,265, 120,238, 125,206, 136,179, 158,152, 178,136, 209,122, 244,117, 244,55, 215,60, 184,67, 158,77, 122,101, 97,130, 73,169, 62,202, 59,224, 58,253, 61,281, 73,318" href="#">
<area shape="poly" alt="" coords="73,72, 112,111, 138,89, 161,76, 187,66, 214,59, 244,57, 244,0, 205,4, 165,12, 118,34, 94,51" href="#">
</map>
(As you can see, mapping arbitrary regions can be exausting, and I dare to say virtually impossible without the use of a tool.)
You'd apply the map to a transparent image on top of everything. The final assembly can be imagined as the following stack:
The regions were highlighted just for reference. The real composition should be 100% transparent.
Good luck!
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.