For a vehicle inspection app, I need to display a flat vector image of a generic vehicle and allow the user to tap areas of that image to select that part of the vehicle and record any damage.
I have a hybrid app that implements this functionality using an HTML image map e.g.
<img src="flat-vehicle-condition-vector.jpg" usemap="#image-map">
<map name="image-map">
<area target="_self" alt="Front Nearside Wheel" title="Front Nearside Wheel" href="Front Nearside Wheel" coords="332,171,34" shape="circle">
<area target="_self" alt="Bonnet" title="Bonnet" href="Bonnet" coords="230,290,231,378,362,398,359,262" shape="poly">
<area target="_self" alt="Front Bumper" title="Front Bumper" href="Front Bumper" coords="88,225,52,441" shape="rect">
</map>
Is there a plugin or an approach to achieve this in NativeScript, please?
Related
I'm not a developer and my coding knowledge is pretty basic. Anyways, I'm helping my department build an intranet site, and the editing options are super basic and static for images, but there is an option to build content blocks using HTML. I'm trying to make one kind of fun element that is slightly more interactive without having to buy really fancy expensive software. So I was able to design an image and make an image map with links using a free image map generator, and really all I want to be able to do is hover over the whole image and make it pop just a little bit, maybe with a very small image hover/zoom effect. Can anyone help?
<!-- Image Map Generated by http://www.image-map.net/ -->
<p style="text-align:center;"><img src="https://ukg--simpplr.visualforce.com/sfc/servlet.shepherd/version/Download/0684X00000NVlCRQA1?asPdf=false&operationContext=CHATTER" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="" title="" href="https://kronos.sharepoint.com/teams/LearningTeam/SiteAssets/Forms/AllItems.aspx?id=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam%2FStrategyAndReadiness%2Epdf&parent=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam" coords="79,55,50,114,78,169,141,168,176,114,149,54" shape="poly">
<area target="_blank" alt="" title="" href="https://kronos.sharepoint.com/teams/LearningTeam/SiteAssets/Forms/AllItems.aspx?id=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam%2FAdaptiveLearning%2Epdf&parent=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam" coords="184,115,154,173,186,228,252,229,283,173,251,115" shape="poly">
<area target="_blank" alt="" title="" href="https://kronos.sharepoint.com/teams/LearningTeam/SiteAssets/Forms/AllItems.aspx?id=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam%2FL%5FCExperience%2Epdf&parent=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam" coords="292,58,260,114,290,168,355,168,390,115,357,58" shape="poly">
<area target="_blank" alt="" title="" href="https://kronos.sharepoint.com/teams/LearningTeam/SiteAssets/Forms/AllItems.aspx?id=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam%2FLearningAndDelivery%2Epdf&parent=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam" coords="396,120,365,173,398,227,465,228,494,173,462,115" shape="poly">
<area target="_blank" alt="" title="" href="https://kronos.sharepoint.com/teams/LearningTeam/SiteAssets/Forms/AllItems.aspx?id=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam%2FL%2DCSuccessTeam%2Epdf&parent=%2Fteams%2FLearningTeam%2FSiteAssets%2FSitePages%2FLearningTeam" coords="502,178,469,232,503,290,571,290,599,230,569,176" shape="poly">
</map>
I would like to put an image on another image like it is done in Facebook, Google+ and now Twitter.
Large back image with a smaller one on the left side dropping off the large one, if that makes sence
There's several ways you can do this, 1 of them is using position (so you're on the right track).
Place 2 images inside an element that has position:relative and place the top image position:absolute, like so:
<div style="position:relative">
<img alt="" src="foreground.jpg" />
<img alt="" style="position:absolute; left:40px; top:20px" src="background.jpg" />
</div>
Check out this DEMO
Another way would be to have the background image set as a background on the <div> and place the image you want on top directly inside that div. Check out this 2nd DEMO
I have installed the image-map plugin for Tiny MCE in Joomla 2.5.
It appears to be working alright in the backend. I have inserted an image in the article and created image map tags using the plugin button.
The tags for image map appears to be correct
But when I am browsing in the front-end there seems to be no effect for the image map. Firebug shows the line image map area as disabled.
<p>
<img border="0" title="Ground Floor" src="/images/ground-floor.jpg">
<map id="imgmap2012831174531" name="imgmap2012831174531">
<area target="_blank" href="/mywebsolutions.co.in" coords="212,934,294,1058" alt="MYWEB SOLUTIONS" shape="rect">
</map>
The line with
<area target..... appears faded.
</p>
I have tried everything including installing a jquery no conflict plugin.
<object data="images/sampledata/fruitshop/map.png" usemap="#map" border="0">
</object>
<map id="map" name="Map">
Map id should be same to usemap id.
You have to given the src in object tag. Then it will works fine..
All the best....
area tag must be closed properly like,
<area target="_blank" href="/mywebsolutions.co.in" coords="212,934,294,1058" alt="MYWEB SOLUTIONS" shape="rect" />
or
<area target="_blank" href="/mywebsolutions.co.in" coords="212,934,294,1058" alt="MYWEB SOLUTIONS" shape="rect"></area>
One more thing you should not use TineMCE for this function, select CodeMirror or None in site setting, it will definitely work. after saving particular post you can change back to tineMCE. Remember not to edit same on TinyMCE in future, else it will remove your functionality.
I'm trying to figure out how to use MapHilight but not having much luck. The only "documentation" on it seems to just be some working examples. This might be because the site hosting the plugin, seems to be down. I've also just learned JQuery yesterday so I don't know if that's impeding my progress. What I'd like to do is specify the look and feel of my image map hilighting on an area by area basis. David Lynch's Simple Demo shows this, but I'm not sure how it's working. I don't understand why he uses the image has the background for the containing div and what purposes the canvases are serving. Here's what I have so far:
...
<script type="text/javascript">
$(function () {
$('#ImageMap1').maphilight();
});
</script>
</head>
...
<div style="float: left">
<img id="ImageMap1" src="solar_system.jpg" usemap="#ImageMapmapAreas" />
<map id="ImageMapmapAreas" name="ImageMapmapAreas">
<area alt="" title="" href="#Jupiter" coords="222,186,28" shape="circle"/>
<area alt="" title="" href="#Earth" coords="135,194,13" shape="circle"
data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'ff0000','fillOpacity':0.6}"/>
</map>
</div>
This gives me, I guess, default highlighting of a solid red line. The data-maphilight metadata is not being used. An explanation of how to get this working would be great, but directing me to a resource explaining how to use maphilight overall would be even better because I ultimately want to make use of almost everything in this demo.
I see that you decided to switch to Silverlight but since I'm fiddling with maphighlight now I decided to look at this.
The thing is that the sample you posted works fine after switching " with ' and vice versa.
<div style="float: left">
<img id="ImageMap1" src="http://geographyandhistory.wikispaces.com/file/view/solar_system.jpg/43347125/283x202/solar_system.jpg" usemap="#ImageMapmapAreas" />
<map id="ImageMapmapAreas" name="ImageMapmapAreas">
<area alt="" title="" href="#Earth" coords="228,151,53" shape="circle" data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"00ff00","fillOpacity":0.6}'/>
<area alt="" title="" href="#Sun" coords="68,54,44" shape="circle" data-maphilight="{'strokeColor':'0000ff','strokeWidth':5,'fillColor':'00ff00','fillOpacity':0.6}"/>
</map>
</div>
Here's a fiddle - http://jsfiddle.net/k67gq/6/
See how the 'Earth' and 'Sun' areas have the same 'data-maphilight' attributes except quotation marks.
Instead of " or ', using " in data-maphilight worked for me.
Ex: data-maphilight="{"strokeColor":"0000ff",...
I guess there's nothing available. Strange when I saw so many references to this plugin when searching for how to do custom hilighting. I ended up having to use Silverlight.
Hi I am using http://code.google.com/apis/chart/docs/gallery/googleometer_chart.html
I have:
<img src="http://chart.apis.google.com/chart?cht=bvg&chs=250x150&chd=s:egbdf&chxt=x,y&chxs=0,ff0000,12,0,lt|1,0000ff,10,1,lt&chm=o,000000,0,-1,10|V,000000,0,-1,1:15,,:4:10|H,000000,0,-1,3:9,,:8:17&chxl=0:|E|G|B|D|F" usemap ="#chart" />
<map name='chart'>
<area name='bar0_0' shape='POLY' coords= '124,440,124,499,143,440,143,498' href='#'>
<area name='bar0_1' shape='RECT' coords='55,129,78,63' href='#'>
</map>
When I use 'rect' for shape I can attach a click event etc but when I use 'poly' It doesn't work.
I've use a jQuery mouse position plug in to check the coords and they seem ok.
Can anyone help please?
Thanks
put image into something like paint and get it's coordinates, not the coordinates on the web page Obviosuly, so it will still work anywhere on the page.