PNG images with hot spots? - javascript

I have a few full screen png's where I want to create regions on the images such that when a user clicks on one of the regions, a specific png dissolves in to replace the current image. I'm creating sort of a slide show but I might have 3 or 4 active regions that cause different images to appear.

Techniques for doing this have not changed much: use an imagemap or place transparent elements over the image and give them a click event.

Related

Remove PNG Background to have multiple layers of PNG that can be hovered

So I'm making some sort of interactive map for a roleplaying game I have, where I want to be able to hover a country and it can scale up a bit and have a hover effect and so you can be able to click on it and it will give you main info of the country and stuff. Now the issue comes that I'm trying to check if there is a way to have multiple PNG layered up on HTML, CSS, JS and avoid having the transparent background of the top layer hover only that specific one. I'm trying to check if there is a way for the code to detect only the colored area of the img or if this is not possible.
I've tried layering with the z-index, but that doesn't really resolve the issue.

How to create a specific type of image slider for my webpage

I am trying to create an image slider on my webpage that looks similar to the screen you get when you want to see all the apps open in the background of your phone, a la below:
What I want would look very similar to that. I just want the images to be tighter together and horizontal instead of vertical.
Here is a better example:
So, as you can see I have my webpage with the title at the very top and then below that I have all of my images. This is how I want it to look but I also want these images to enlarge if the user hovers over them. When enlarged the image will stay in place and text will appear on the image which the users can read.
Here is another example:
So in the image above, the user has hovered over the image and now it is displaying information and the other images are pushed to the side. The example text is the title text, background image is just the image the user hovered over and the information text is, as the name suggest, the text that gives info.
So my main question here is how I would achieve something like this?

Zooming on click of large image to the coordinates of the click

So I have a large jpg, 12000px wide by 1000px height. I am looking to make a site the has the image at 50% size on page load, but when the user clicks on the image once, it zooms in to 100%, then on a second click, it zooms back out to original size.
Since the size of the image is so large, it would need to be draggable at both page load and during zoom state.
I have been playing around with this, but the code is not exactly what I am looking to do.
http://designshack.net/tutorialexamples/jQueryZoom/ZoomTest.html
Instead, I am looking to basically do the same thing as the zoomed in state of this site, minus the step of the click into the zoom state.
http://yogasmoga.com/women/run-jump-n-play-crop-462
If anyone has a plugin they have used, please let me know.
Don't. Easiest -especially if it's for a presentation- is to just use two images. image1.onclick -> show image2; image2.onclick -> show image1. Saves coding, does what you want.

jquery java script image shade

I have an image and I want to restrict the clickable area on this image. I want user to click only particular area. I want to obtain a darker view out side of this clickable area. How could I achieve this usin java script and/or jquery.
Kind regards
There are many ways to implement the clickable area:
using image map :
http://en.wikipedia.org/wiki/Image_map
Take a look at this website : http://odyniec.net/projects/imgareaselect/
or using divs and z-index.
It might be difficult, but if you use a to determine a clickable area first, you can use jquery to do something like this:
On hover over the mapped area, Show a transparent black div, the same size as the image. (This makes the image darker)
Place another div on top of that, with the same dimensions as the image. (this contains the small map-sized container for the new image)
Place another div INSIDE of the last to be the same size and position as your mapped area. (This will contain the original image - not darkened)
Place the image again INSIDE of the last div and position it so it lines up with the original image.
This should show something like what you're talking about.
If it's more complicated than this, I'm sure we will ALL need an example and all of the outcomes of these images. I don't think there's enough detail to give you a real answer.

Can I merge z-index layers into a single image?

Can I merge z-index layers into a single image?
I am working on a painting visualizer for homes. Using Javascript, I have 40 divs, all with a unique z-index. At a given time, 1-4 layers are display:block (and the rest are display:none) in a single space, layering colored shapes over a background image (of a house).
Is there a way to essentially screen shot this space so the user can 'save' their selections?
If that is not possible, perhaps I can save their selections to be pre-loaded for a color-combination 'load' or 'open'?
Thanks!
If you use <canvas> then you can use .getAsDataUrl( ), submit the contents of your layers to your backend and use a library like ImageMagik to merge them and serve a new image.
Otherwise, I'm not sure how you're achieving your drawing effects, but you could "record" all the drawing events as they occur, then when you want to merge layers, you could "replay" the events on the target div, then delete the original div.
You could also add code to essentially "link" the two (or more) divs together and cause them to behave as one. When you hide any of the linked divs, they all hide, if you rearrange their z-index, you move them all as a group. To the user, it would appear that they were just a single layer.

Categories

Resources