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.
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>
My image won’t display for no reason. I am a noob but I can’t figure it out. The image loads from the url so I know it’s not that. So I’m pretty sure it’s my problem with the coding.
<body>
<img src=https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?dl=0
Height=300Width=250>
</body>
Your URL is pointing to non-image resource. It's actually pointing to an HTML document.
In URL, change www by dl and remove ?dl=0.
This is valid image URL :
https://dl.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG
Alternatively, you can replace dl=0 to raw=1. This is also valid image URL:
https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?raw=1
Not always required but as a good practice I'll suggest using quotes for values. Also as mentioned in comments seperate attributes from each other with white space.
<img src="https://dl.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG"
height="300" width="250"/>
<!--OR-->
<img src="https://www.dropbox.com/s/rm27v6s4nj885qu/IMG_0071.PNG?raw=1" height="300" width"250"/>
source : Mickel's Tutorial
I hope, you must use the url of image, But you are referring the url preview pane of dropbox.
It is the actual url for image.
You also need some improvisation with your code, as below
<body>
<img src="https://uc215f04ebb05efbc98d874fefb2.previews.dropboxusercontent.com/p/thumb/AA767gGwgVfZ9rVS7PJbtIOR3eQsWN4mrXjNjVJH3JKjhI5eE7JOd-eQJwydUx1gPkpE3zkAnMSN3-1KEtFN86x-CdWnREg0mQ6hm7APBCuifux1ECDivRuLkrikn1sY_r20EmBWucKHyy-Ps5VPB8ehkUB6x0y9kSb3QzYpP8fOo7IeyR6IaCYZ66mxrJiUiUtzTAV3ddESpRV7lSRaumsSyVPc4k1RbUBS3-_JDnP8Qv6M42x2g7bZDy9vdhhIOZaO585_XQHegapCJ-8bnwLGt-VEy9nud0avi_gzMSpXxx3EXt_NYTWMfFqfstb2HFMVb7WK7jxkSRSX5eE5ck3Q0bdEPAKp1aPnClU2KqI-OgUea6ApGp4G0H4Q3l3UyOjfomtn-SndAAaUzPbaU1HK/p.png?fv_content=true&size_mode=5" height="300" width="250" />
</body>
It will work without any issue. You are not referring proper url that the actual issue.
Also, keep tag properties in quote "" if required.
Like
<img src="url" height="200" width="300" />
Thanks.
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?
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.