I was wondering how one would go about automatically making an image map based on just the opaque parts of a png image. You are normally able to click anywhere on the png image, even transparent areas, and it will register as clicking the image. Is there any way to exclude transparent areas and only have opaque areas register?
I assume there is some sort of javascript color detection feature, or something along those lines. I have access to jQuery on my website, as well.
Thank you for taking time to read and answer.
Trying to do this with images will be a major headache. It's possible that there is a javascript library out there to detect colors, but that's very complex stuff.
Maybe give svg a go if the graphics are simple.
This site (not mine) has a nice map using svg.
Related
I'm trying to make a website where you can drag body parts to make a character do a pose. I'm currently using Canvas and FabricJS and I want my images to have 'body parts'.
This video (watch in slow speeds) showcases exactly what I'm after.
The video above shows that when double-clicking on a body part, it will move to wherever you move your mouse to. The highlighted part is the part that will be movable. There are presets and things that would be useful but at the moment, I'm only looking for if such a thing is possible.
If there is no way to do it with Canvas or Fabric, do you know of any libraries I can use to get this to work?
I am trying to test things out lately with Sikuli and the use of an Image with a Transparant background.
For example with the Sikuli IDE we define:
Image_FireFox = ("FireFox.png")
Now I took that "FireFox.png" and I have adjusted it with Paint.NET to make the background transparant. And then I save it again to "FireFox.png", and I put the new .png in the map of where Sikuli orginaly placed it.
When I open the IDE again, that image appears to have a black background (and not transparant). And also the image is not recognized anymore by my Sikuli Script. If I open the image in Windows Viewer, the background is still transparant.
The idea behind it is to make the image better recognized, and then my script would not care if the background of the FireFox icon is white, red or whatever colour.
Does anyone know if there is a way that Sikuli can deal with images with a transparant background? So that finding an icon on the desktop goes better, and the background wouldn't matter anymore.
Sikuli (or should I say OpenCV core that's being used by it), does not care about the background of the image itself. What it does is just to scan the whole screen as it is, exactly as it appears to you. It is not aware of types of images or anything else, just pure visual appearance. Saying that, if your image remains unchanged since when you first created the pattern and you can uniquely detect it on the screen, that will work.
As far as I understand, this quite the opposite of what you're trying to do. Do not try to change the image background because if you do, everything that will become visible behind this image (due to transparency) will prevent Sikuli from detecting it rather than helping it. Keep in mind that Sikuli only deals with rectangular patterns, so anything which is other than rectangular image won't work.
In regards to the way it looks in IDE, I'm not sure. That might be as a result of not supporting images with transparent alpha channel. You can try and ask this question on Sikuli official forum here.
its time to add an updated answer.
as of the current state sikuli has been replaced with sikulix. and sikulix can now deal with transparent or even masked images quiet well.
see here link
I want to be able to take my kingdom of loathing signature that has this code:
<img src="http://sigs.kingdomofloathing.com/player_2192849/mode_bigsig/l1_clan/l2_clantitle/s1_level/s2_class/playerfeed_2192849_bigsig.gif" border="0" />
I want to take the white background of the image and make it transparent. The reason why I can't do this in an image editor is because these signatures update every once in awhile according to what you have been doing in the game.
The simple answer is that you can't do this with CSS and HTML.
Adding transparency to the element with CSS like Frank Tudor stated (via opacity) will affect the entire image.
So really you have three options:
Edit the image using design software like Photoshop, removing the
white bg and saving it out as a trans gif or png.
Utilize CSS opacity, but this will make the entire object transparent. If you're okay with that then this is probably the easiest solution.
Use a scripting language. As others stated you can technically edit images using certain scripting languages like PHP. This will be the most time-consuming/technical way to perform this task (depending on your coding skills).
Hopefully this helps.
If the images are being updated, then it's up to whatever code you are using to dynamically create those images. You should certainly be able to use transparency when creating the images, regardless of how they are made.
I recommend PNG rather than GIF, but either would work.
Post the code of however you generate the signature images, and someone can help you update it to use a transparent background.
There are advanced manipulation functions javascript in one case I remember opacity being used for transparency and in most server-side programming languages you can find image functions.
The problem you face (without an image editor) is that transparency is parameter of the image as it is saved out (and some image types look better than others when it comes to transparency).
You could try this...
Try adding an ID or Class to your IMG tag and this bit of code.
#IDgifThing {
opacity: 0.5; /* 50% transparent */
}
I have not tested it, but I hope it helps you or at least puts your mind in the right direction.
I have to place on a web page a cylinder that looks like this:
it is composed by small images that overlaps to draw the curves on the surface. Every one of them is places on the page with a different img tag enveloped in an anchor with its own href. The z-index property of the img is used to make them overlap in the right way.
The cylinder has to be composed because it is dynamically created, as you can see from the image, its faces can have different colors.
What i need to do is to make all the faces clickable and each one has to point to a different URL.
My problem is, of course, that the cylinder has curves. And i have to be sure that the clicks points to the correct URL especially near the curves, it hasn't to be precise at pixel level, but at least acceptable.
I've tried to use a map with a single area for each of the images that composes the cylinder, but of course it didn't work, as i saw from the specifications, in such cases only the first declared map in the DOM works.
I'm thinking about to solve this via Javascript, but i think it wouldn't be an easy job, so i would be happy if someone can give me some advice on what should i try.
Oh, i cannot use HTML5 features to solve this.
Neat application of older technology to solve a challenging puzzle.
I can think of two ways forward for you. One is to put a transparent (rectangular) image on top of the cylinder and create an HTML image map, using the shape="poly" attribute. For resources, search for the HTML elements map and area for reference, especially the shape attribute. There should be many good tutorials online. Nowadays this technique isn't used that much any more, but it was really popular in the late 90s.
Another way is to use event delegation in javascript, attaching an event listener to the primary container. On each of your image "pixels" apply a CSS class for the appropriate portion of the cylinder it is in. In your event handler, you can do something differently depending on the class of the clicked on image, and you can do this without the massive overhead of attaching an event on each individual "pixel". In JQuery this would be something like:
$("#cylinder").on("click", ".green", function() { location.href = "green_url"; }
$("#cylinder").on("click", ".red", function() { location.href = "red url"; }
assuming you put class="green" on your green pixels and class="red" on your red pixels. (You can do this by quadrant or other technique; color is just an example).
Your best luck SVG ! https://developer.mozilla.org/en-US/docs/SVG/Tutorial
It is almost impossible with html dom elements to do this, you will have to bend it with CSS compatible all browsers.
There is also Canvas but you will have a hard time dealing with the clicks.
Only problem with SVG is that it's not supported in < IE8, and hardly in IE8. But bending a DOM element is also not available < IE9.
EDIT:
I saw that you can't use HTML5, so your only chance is generating the whole image in GD2 for example and trying to map the points. But what is the reason you can't use HTML5 ?
You might also try doing it using javascript / canvas via getImageData() function. This canvas function will rgba values of the given point. Using the alpha value you can check if mouse is over or clicking on the correct area or if it is a transparent area and nothing should happen.
I also made jquery plugin exactly for this purpose. Maybe it might help. http://www.cw-internetdienste.de/pixelselection/
Information:
The images have large transparent sections, so each must be overlapped to create the needed effect. Specifically, the clickable portions of each image are in weird trapezoid shapes meant to be pressed up against each other.
Images have image maps with large portions being overlapped by the transparent portions of other nearby (trapezoid) images. I don't expect any change in z indexes will solve this...
Combining the image files into a larger single one to overlay a single image map for each section seems less than ideal, especially since I may need to re-order or rename them later and such. Never mind hover animations and other possibilities down the road.
What would be the best workaround?
Alright, after much tinkering I think I've found a solution: I just took a 1px transparent gif, scaled it up to cover the whole area (with a higher z-index, of course), and then mapped the image map polygons within that. Seems to work.