I would like to use 'image mapping' with shape poly or other solution to build an app, based on image handled functionality.
I have tried it using in Ionic 3 and worked fine in Browsers, but under Android it does not.
Is there any solution to solve it?
This picture and functionality would the part and parcel of my app so it is indispensable to create clickable areas on image.
UPDATE:
This is the 9's tooth shape from 32 :) I have an universal denture image with the normal 32 tooth shape. My goal is to transform the image to a 32 clickable tooth, with their own shape.
It is important to know, on which tooth the user clicked, because I want to give for the clicked tooth a colored background. This works on browser under Ionic3 fine, but builded to android not.
'<'img src="denture.png" usemap="#image-map"'>'
'<'map name="image-map"'>'
'<'area target="_blank" alt="Tooth9" title="Tooth9" href="Tooth" coords="407,93,421,89,434,87,447,90,458,91,468,94,478,103,480,112,476,125,471,135,467,146,462,153,453,158,441,158,428,152,419,141,412,129,406,118,401,109,403,98" shape="poly"'>'
'<'area target="" alt="" title="" href="" coords="" shape="0"'>'
'<'/map'>'
Related
I've created a web langing page using flutter, the page is shown on browser as expected.
Inside the html code, i've added the scripts to integrate screen recording with hotjar and smartlook.
In the smrtlook and the hotjar consoles, i can see the recording of the sessions but, these are complete blank.
All the records are white screens, whith only the tap/click/swipe gestures.
I've added inside the tag in the app html this line
as described (by smartlook) here without solving my problem.
Do i placed this tag in the wrong position?
Does the app needs to be built with renderer canvaskit rather than html?
Is there something else i'm not considering?
Thanks,
I am developing an app, and it works 100% in android. In IOS I have 2 issues:
refresher does not work
<ion-refresher slot="fixed" #ionRefresh="doRefresh($event)">
there is a flicker when I touch the screen (may be related to background? I read some old posts about that)
ion-content.background{
--background: url(/bg.png) 0 0/100% 100% no-repeat;
}
I don't believe its relevant to this issue, but I am using vuejs.
I tested in various desktop browsers and it works as well.
So, we had 2 things here, and I thank #johnborges for following up
it was necessary to add the pullingIcon
link for Ionic docs
and the relevant paragraph
Using the iOS native ion-refresher requires setting the pullingIcon
property on ion-refresher-content to the value of one of the available
spinners. See the Spinner Documentation for accepted values. The
pullingIcon defaults to the lines spinner on iOS. The spinner tick
marks will be progressively shown as the user pulls down on the page.
the flicker, based on this link from stackoverflow I added a CSS DIV element instead of styling ion-content. It worked. I had to do a secodn CSS trick because one of my pages had fullpage slides and padding, but after that it worked
I have two plugins to choose from. It will be used on a forum type script. I like the idea of HTML emojis (i.e. 😃 😃), however, each device is going to show their own styles and some devices (ipads as an example) do not render some HTML emojis.
With image emojis (i.e. <img class="emojis" src="/img/smiling_face.png">) there will be uniformity across all devices and browsers.
I am still not sure what to choose. If it was up to you, what would you use for your forum?
I want to make a website ie 6 compatible. I have included two PNG files (PNG-8) with <img src> tag. When I open the website with IE6, the pictures appears for a short moment and disappears again. How can I fix that without any javascript or other additional files?
If adding JS is really not an option, you can try using the following filter:
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
I would, however, not recommend this... the JS methods are generally better.
You can't do that without JavaScript or additional files.
IE6 does not support natively transparent PNG.
Here is a fix: http://www.twinhelix.com/css/iepngfix/
ie6 does support transparency in 8bit, just not 32bit that most people use. and the support is not 100%, partial transparency will show as transparent, but the fact remains that you can get transparency in ie6.
you could create a gif specifically for ie6 and serve it up via conditional comments...that sounds optimal for what you are doing.
there are also a number of JavaScript and/or HTC solutions
So I'm creating an app which basically is a UIWebView that loads an HTML page, which should have images on it. The HTML page is loading fine (confirmed with a little text on the page), but then I have this code in it:
<img src="images/image_1.png">
test
Check this out:
The tag has a broken image link
But, when I tap on the link, the
image loads!
How is this happening? What kind of solution is there?
I have the images in a subfolder of resources, which I added by "Create Folder References."
Help? A note: This is on iPad, using 4.2. But that shouldn't matter, right Apple? (Also, changing it to xml <img /> type tag doesn't do anything)
The image was way too big - over 2500px wide. Resizing to 1024px fixed it. Thanks Jose Vega.
Also, Automator is a gift from the Gods when it comes to batch operations.