What is the best way to create a 2D plot, with different points in different coordinates (x/y coordinates) such that they are represented using different shapes on the plot, and whenever we click on one of them, or go with mouse over them, we see a text changing in a small window next to the plot?
If I could do this in HTML, that would be great.
If there is a generic Flash component that could do that, simply by loading some text data from URL, that would be IDEAL.
Thanks.
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
Is this what you were asking?
Try this tut:
http://www.w3schools.com/tags/tag_map.asp
Good luck!
Here's a solution I quickly put together using jQuery. It can easily be modified to use Vanilla Javascript, but for the sake of writing it quickly I've resorted to a framework.
It basically consists of a <div> that is relatively positioned, with anchors as plots that are absolutely positioned. This allows us to use coordinates to position the plots anywhere we like within the relative <div>.
You can create a few icons that will represent different plots on the graph and assign those to the anchor elements.
To make things nice and easy I've used a JSON object to store each plot so you can use it from a 3rd party source.
// change this to fit your needs
var plots = [
{"width":30,"height":30, "top": 150, "left": 100, "content": "Lorem"},
{"width":20,"height":20, "top": 100, "left": 20, "content": "Ipsum"},
{"width":50,"height":50, "top": 20, "left": 20, "content": "Dolor"}
];
// store our 2 divs in variables
var $content = $("#content");
var $map= $("#map");
// Iterate through each plot
$.each(plots, function() {
// store 'this' in a variable (mainly because we need to use it inside hover)
var plot = this;
// create a new anchor and set CSS properties to JSON values
var $plot = $("<a />")
.css({
'width': plot.width,
'height': plot.height,
'top': plot.top,
'left': plot.left
})
.hover(function() {
// replace content of target div
$content.html(plot.content);
});
// Add the plot to the placeholder
$map.append($plot);
});
I hope I've written it in an easy-to-understand way :)
Note that all of the above can be achieved using just HTML/CSS, just inspect the source to see what exactly gets created.
Here's a demo
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 searched on the internet a lot but I couldn't find any useful link. I am trying to develop a custom menu.
It needs to be an area-based rollover menu which changes depending on which part of the image is currently being hovered over by the user. The image and related link needs to change depending on what area of the image the user is hovering over. Check the below image:
After clicking the next image would be below one,
Lastly when I hover on any specific slice of pizza, the image should be changed accordingly. An example is the below image:
Is it possible with CSS3, JavaScript?
There's two different ways that I could think of. Since you tagged JQuery I'm assuming that's acceptable. pageX and pageY track mouse movements on screen and can be used to determine what area of the screen is being hovered over. Here's a fiddle I made to determine the coordinates: http://jsfiddle.net/cpk3mqxw/
$("#image").mousemove(function (e) {
mousex = e.pageX;
mousey = e.pageY;
$("#update").text("x: " + mousex + " y:" + mousey);
});
EDIT: For checking the coordinates, what you need to do is think of the page as a grid system, as per usual with JavaScript, and gauge that If mousex is more than 132 and less than 155 it must be over THIS part of the image. Again, a separate span tag with constantly updated x and y coordinates will be helpful.
a.e:
if(mouse x >= 102 && mousex <= 220 && mousey >= 26) {
//do this
}
It pays off in the end, but it is quite a bit of extra work. Another way is to use an image map.
<img src="image.jpg" id="image1" usemap="#one">
<map name="one">
<area coords="30, 50, 70, 100" href="gohere.html">
</map>
And if you'd like the area to be highlighted or styled you can use maphilight.js which you can find more information on here: http://davidlynch.org/blog/2008/03/maphilight-image-map-mouseover-highlighting/
A great solution for your problem would be to create a sprite containing an image of your pizza with one slice missing on each image. Then, you create a div the size of one pizza image:
<div id="myPizza"></div>
Then, you can check X and Y position of the mouse over this div using a script similare to this one http://coursesweb.net/javascript/get-mouse-coordinates-inside-div-image_s2
Then, depending where the cursor is on your image, you can put a class with the right background position on it. I suggest you this to create your classes: http://www.spritecow.com/
Hope it helped, simple script with sprites!
I have been able to solve this problem.
I used <map> and <area> to define each of the areas (pizza slices) I need.
Then I added the onclick() and onmouseover() event handler to each area to call a function to change the picture.
HTML
<area shape="circle" coords="200,250,25" onmouseover = "changePic('newImage.png')" />
<img src='start_pic.png' name='mainPic' />
JavaScript
function changePic(img){
mainPic.src = img;
}
PREVIEW LINK
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.