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>
Related
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?
we are using follwing code to display images in this site:
http://demo1.kidsdial.com/
you can see 4 images below "slideshow" images
but it's not looking responsive.
That means, in mobiles and tabs it's not arranged properly & in smaller screen monitors, it's not displaying properly.
What code changes do I have to do to make it responsive?
Try this:
<img alt="" src="...topoffers1.jpg" style="max-width: 23%;">
<img alt="" src="...topoffers2.jpg" style="max-width: 50%;">
<img alt="" src="...topoffers3.jpg" style="max-width: 23%;">
http://prntscr.com/6r4iaj
http://prntscr.com/6r4igz
http://prntscr.com/6r4ilv
I'm currently creating a image gallery (using Zurb Foundation as Framework) and would like to show the zoom icon on image hover (like this example here: http://codepen.io/Twikito/pen/Jeaub). But I would like the icon to be a font (Font Awesome) icon and not just one but 3 individual clickable icons.. Would that be possible?
I've put a quick JSfiddle together using font-awesome. The CSS is hacked together but demonstrates what's possible. It should give you a starting point to experiment with.
<a href="#" title="" class="image">
<img src="http://www.lyricis.fr/wp-content/uploads/2010/04/kickass-film-still-01.jpg" alt="">
</a>
<div class="cn">
<div class="inner">
<i class="icon-zoom-in large"></i>
<i class="icon-cloud-download large"></i>
<i class="icon-comment large"></i>
</div>
</div>
Note: The JSfiddle above uses font-awesome.css called externally from bootstrapcdn.com
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.