How can I make certain areas of children’s book illustrations clickable? - javascript

I have a design from a client who is a children’s book illustrator. The site will be done in WordPress so they can edit certain pages etc. On some pages there will be illustrations that will also have clickable areas.
I suggest using Flash to show the illustrations, but they don’t like Flash at all.
I was thinking the other option was to use CSS background images with <div>s to position as clickable, but this is cumbersome.
Slicing the images into bits and pieces is also cumbersome due the the organic nature of the shapes and illustrations.
Are there any other options?

HTML image maps?

You could try using an image map. They will allow you to define an area of an image and assign an onclick event or href.
http://www.w3schools.com/TAGS/tag_map.asp

Related

How to create a moving mask showing hidden website features with vanilla html, css, js?

We have a simple website; readable, professional colour-scheme etc.
We are trying to make it have an easter egg, so essentially:
1. (Upon clicking a button or something similar) the cursor becomes a circle
2. Through this circle, you can see a 'hidden' website (the same website as the normal one bit with a different colour scheme, little drawings and animations scattered around and within website components, different fonts etc)
The possible strategies we have come up with, and problems with each are:
1. Strategy: Using 'mask-position' to create a moving mask (the cursor)
Problems: Neither the top nor bottom layer would simply be an image. The top layer would be the basic website, and the bottom layer would be the same website but with a new colour scheme, little animations and illustrations hidden in and around the website components. Potentially the top layer could be an image of the website as it was at the time of clicking over to the new cursor, because the only bit that needs to be interacted with is whatever is inside the circle (the hidden website), but the problem with this is that the simple website still has some small things that move, which a simple image would not capture. Could potentially remove these but if there is a solution which avoids this, it is preferable, as the 'image as a top layer' solution seems clumsy and problematic anyway.
2. Strategy: Use an iframe to show the hidden website within the normal website.
Problems: However, we are unsure how to make the iframe a circle, and how to make it move (based on the cursor position).
We have not tried much as we are struggling to figure out what to try to begin with. Ie I am not sure how to make a mask-frame not using images, and I am not sure how to make a moving iframe which is also a circle.
Any advice, strategies/tricks, or even examples of what I am describing which I can use to explain/confirm the concept to others trying to work on it too would be much appreciated.
Thank you!! :)

Is there a way to make a triangular, clickable box in html/css?

Ok, so I want to develop a web portal page that can direct you to multiple websites that I have. I want to design it like this:
Where each section is a clickable section with JS and when hovered it pops up a bit and fades into a picture of some sort. Anyways, my question is how would I get a div to be angled like this? I read about using the border trick to make a CSS triangle, but I don't believe that will work for this. I was also thinking if there were a way to use the CSS transform property somehow but I cannot like up the triangles uniformly around the page and then keep it scalable so it's responsive. Does anyone have any suggestions? Or is this even possible??
CSS offers something called clip-masks. This allows you to move past basic color shapes and allows for the shaping of images. This would look good when used as the links you want.
See more about clip-paths: https://css-tricks.com/almanac/properties/c/clip-path/
A useful site for deriving the actual CSS for the shape can be found here: https://bennettfeely.com/clippy/
This used in conjunction with media queries for responsiveness and absolute positioning for arrangement should get you where you want to be.
I found this site, maybe it will help:
CSS Triangle Generator
I think you can align different triangles with position: absolute too.

Building a complex image map with selectable and differing backgrounds (colors and image fills) for areas

I'm working on web-based "product visualizer" software that will provide the user with a product graphic, allowing them to select different regions, which are of arbitrary sizes and shapes, of the graphic and choose from various available colors and patterns.
I intend to make this dynamic and scalable. I would like to be able to stay with as few graphics files as possible, using only a base image (photo or illustration of the product) and various texture images and colors to use as fills/backgrounds.
Ideally, when the client wants to add additional products and options, we only need to render an additional base image and possibly other textures. Otherwise, we'll need to manually generate graphics for every combination of available regions and textures... you can obviously see how that would become arduous and redundant.
I've found numerous jQuery plugins and experimented with Image Mapster, but none appear to be able to:
set different background images for different regions/areas
retain those backgrounds statically
Is this even possible (without Flash) or will I need to resort to positioning, aligning and layering manually-generated graphics for all available combinations?
Use a combination of html and css to divide your area into base regions and set your background image to whatever you want.
Use div's to make regions for each base product.
Use background-image to set background for the big div
If you implement this correctly, you should be able to have "modules" for each product having its own div, which should arrange itself nicely if you use the correct positioning (something like "float:left")

How to dynamically alter JPEG contrast and zoom level in the browser

My educational website displays single medical images (such as chest X-rays) as a JPEG in a div. I'd like to add the ability for the user to dynamically change the contrast, zoom and pan within the div containing the JPEG. I've been searching for days for a Javascript library that could do this but I'm come up empty. Does anybody have any suggestions that might help?
http://www.netzgesta.de/shiftzoom/ perhaps? It allows you to add zoom and pan functionality.
also http://camanjs.com/ lets you change contrast.

How do I access separate points/sections on a single image in html/javascript?

I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/

Categories