Is it possible to make divs with for example five or six corners?
I need this to make clickable zones on a map. If there is another way to achieve this I would be delighted.
No, you can't. A block in HTML is rectangular.
And even if you change its look using (expensive) css based tricks, the clickable zone will keep rectangular.
But there are several solutions for clickable zones :
simple computations with javascript from the event coordinates on click
the old image-map format
If you want to do it in javascript without image maps, you may be interested by ready algorithms to decide if a point is inside a polygon.
If the map is an image, use a polygon imagemap. There are several web apps that make it easy to create these (just Google "imagemap generator").
If you're using a mapping API like Google, they'll have documentation on creating clickable targets within the map (for example: Google Maps Docs).
Related
On google maps, on the website, is there a way to make it so that all land area is of a gradient color, and no names, text etc shows? so just a gradient color map, with nothing else.
Or is it better to use an image for such a case? The thing is, i need to show pins at specific countries, so idk if its simpler to use an image, and set each pin position separately, or to somehow use google maps, if its possible to set it to gradient color?
any ideas are welcome
You can create your own style map, I suggest you check the documentation
https://developers.google.com/maps/documentation/javascript/styling or https://console.cloud.google.com/projectselector2/google/maps-apis/studio/styles
The second link takes you straight to the management console to create your map.
Is there a correct procedure to locate certain image locations in an image sprite. Say I wanted to create 10 div images in my header using the image below, how do I find the precise location of each.
Is just a case of trial and error using CSS background position till the image fits?
http://www.argos.co.uk/wcsstore/argos/en_GB/siteAssets/brfp-2014/images/icons-s73f662fc84.png
Now if you are not adverse to uses SCSS/SASS, then I would highly recommend using Compass' method. It converts a folder of images into a sprite map and the creates classes that allows you to access these sprites. This has proven to be the easiest way for me to work with sprites without worrying about all of the messy calculations.
If you can't do that, then what I have personally done, is create multiple small sprite maps. For example, if I have an arrow that has a hover on/off state. It will stack it into one image and just create a class with a shifted background-position.
Can anybody tell my how map on http://ubytujnaslovensku.sk/sk/ was created/how to create something simillar?
there's only one image....
The map on the website you have provided is using two images. The first image is the actual IDLE map, the second is a shadow version of it.
The shadow version is simply a 'Sprite', where all of the areas is inset and is looking however they want it to look, when you hover it.
Whenever you then hover a zone JavaScript sees it and sets the 'Background-position' variable according to the country you are hovering.
The Sprite image is shown here.
I would suggest you to get a deeper understanding of sprites before trying to accomplish a similar map.
Can any one point me to any resources for making graphs in HTML5? Most of resources I have seen through Google use animated graphs, I just want a simple static graph in HTML5. One more thing, I am really very weak in graphs, so a simple, easy to understand solution would be very helpful. I will be using this XML file to display data in graphical format.
US Canada Mortality
Thanks in advance :-)
Check out the new canvas tag. It allows you to draw shapes including rectangles and circles using javascript. Canvas Tutorials
If you're looking for just a standard bar chart, though, you can use the div tag with a specified width, height, and background color. This method avoids the use of javascript.
A customer has asked us to a add a feature to his website allowing visitors to colour in panels in a simple line drawing.
The website visitor will have a limited palette to choose from and will select a colour and click in a shape within the line drawing to colour it in as in:
There will only be four or five of these line drawings. The drawings themselves are not required to be interactive or flexible, only the colouring.
The line drawings will be super simple and we don't need to save the visitor's selections although the visitor will want to print or email the result.
Simple simple stuff. Most of the time where you see this done on sophisticated websites I assume it's done with Flash.
But is Flash the only way to go? Or can it be done with JQuery/Javascript or Silverlight or something else? Our team's knowledge covers ASP.NET, HTML, CSS, Javascript. No experience of Flash.
If you have a finite number of line drawings, and a limited number of colours, you could just pre-generate every possible colour/section combination - isolate each area as a transparent GIF/PNG and composite them using position:absolute to create an "onion skin" / animation cel effect. Use some old-school HTML image-map code (or server-side parsing of the myimage.X / myimage.Y parameters, or jQuery) to work out where they clicked, identify the image section under the mouse click location, and replace that image only with the corresponding version in their selected colour.
You can't draw these kinds of shape without using canvas or SVG. And I am not sure about the support provided by browsers for these.
If you can go for canvas then you ca ntake a look at
Processing js library
or for SVG
Raphaël—JavaScript Library
There are only two ways i can think of atm:
Split the line drawings into the colourable elements and show each image absolutly positioned to merge the images into one on the website.
Use Javascript to load a pre-coloured image of that part with "onclick" (or generate a coloured version with asp/php/whatever server-side.
Not sure if it's possible to print absolute positioned elements cleanly.
Use flash, it's simple there so even without experience you should be able to do it in 1-2 workdays.
My guess is that you could use the new HTML 5 canvas element to achieve this goal in an open, standards compliant manner.
Note: canvas is a new feature and is only supported in recent browser releases (latest Safari, Firefox or Chrome for example).