Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Say a webpage renders a realistic world map, so the countries have jagged borders. To my knowledge, it would be next to impossible to draw divs that exactly match the country shapes using common CSS.
Is it possible to make the individual countries clickable, exactly following the borders?
For this you would use the HTML <map> element. This essentially requires that you have a static image, because you have to specify each point in an area.
http://www.w3schools.com/tags/tag_map.asp
A map element has the map name and is comprised of area child elements.
http://www.w3schools.com/tags/tag_area.asp
For arbitrarily shaped area, you would use shape="poly" and put in the x- and y- coordinates for each point.
http://www.w3schools.com/tags/att_area_coords.asp
It is also possible to use what's known as a server-side image map, though these have fallen out of fashion. These are more complicated, require a scripting language on the backend, and are considered less accessible than client-side maps. They were popular in the early days of the web.
you can use this but once you doit you cant resize the image or the map wont fit properly.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
In my little watch app (targeting watchOS3+) I need to show an image which will be fetched from a server (it is not big, let's say 600x600).
The image will be displayed alone in a modal page (only the Close button is on the top left corner)
Similar with the Photos app, I would like to be able to offer the user the possibility to pan and zoom the image.
Zooming will be done by using the Digital Crown (the events are wired up already).
Any idea how to deal with panning and zooming? Did anyone implement something like this already?
Thank you in advance!
I have solved the problem by implementing a small trick (see attached image).
Basically the zooming (Digital Crown) happens "in background" on a cached UIImage and a viewport (sized exactly as the display size) crops an area from the UIImage and shows it via the WKInterfaceImage.
Panning is done by simply moving the viewport around, following the TapGestureRecognizer data.
I think I will encapsulate this in a custom control and put it on GitHub.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
so I'm trying to make 2.5D game and I want to make that players could hide behind objects (like walls, fountains, other players which are closer to camera).
Preview of what i'm tying to say:
So I want to ask some suggestions/help how could I do it ?
This seems like a very vague question but a basic idea will be manipulation of the background and foreground. You will need to be able to change where your character falls and whether or not the an object can be both foreground or background. If they can be both then you could declare that as a object that could be hidden behind.
I propose some solution that you could try :
with libgdx to draw an Object1 before an other Object2 you just render the object1 and then render the Object2 but to manipulate distance like you want to do, you should try to use Masking with Depth buffer
see an example in the officiel docs
https://github.com/mattdesl/lwjgl-basics/wiki/LibGDX-Masking
also not very efficient but you could try :
I once try to make some object look in the background comparing to each other, so i played with their opacity color, it worked fine for what I needed
hope that was helpful good luck
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to create a general parser for sites and get relevant information. First thing I would like to be able to do is being able to know what is the logo of the site.
Usually the logo will be an image that will link back to the main page, and might content the word "logo" in its ID.
What would be a good strategy or standards that I could apply in order to find what is the logo of a page when parsing it?
There isn't really a way to make this a generic process. There are no rules about what how the logo of a site will be displayed - so there is no single ID, class, tag or location you can look to. Likewise, images don't "link" to anything, an <a> link might contain an <img> tag, but thats about it.
Short of writing a long, long list of best guesses, there is no way to reliably parse an arbitrary HTML page and get a logo from it.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I've been making a portfolio, And I didn't really limit myself to what would be easier to code.. So... I ended up with this (that's the homepage but almost every other page is ready too in photoshop)
http://postimg.org/image/z0w6wb4zb/
So what would be the best approach to turn this into HTML/CSS? Should I slice it into zones, or each layer separately (as in clouds, tree, island.. etc).. I was told to use semantic HTML but I'm not sure I understand what this means here.
and what do I do for the buttons? Image maps? wouldn't that be a bad idea?
Do you think this design is worth the trouble anyway?
I can't post a comment, the best I can do is answer, so here goes:
Mr. Lister is right, image maps would probably be the way to go. But, one more item that I think is worth noting, SEO value, particularly for Home/Portfolio/Contact Me/and About anchors. One potential solution is to use image-maps... but do some feature detection to see if the browser allows for the css rotate functionality.
Your HTML
<section class="homepage-navigation">
<a class="contact-me nav-link" href="/contact">Contact Me</a>
...
</section>
Your CSS could be
.home-navigation{position:relative;}
.home-navigation .nav-link{position:absolute;}
.home-navigation .contact-me{transform: rotate(-95deg);left:10px;}
So... there is a trade-off here. Using an image map and having your link text embed in the image is much easier... but you lose out on browsers seeing the anchor text. If you go the CSS route, you need to consider supporting both browsers that allow for the transform css property, and browsers that don't. :|
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Canvas from html5 was introduced some time ago. Currently it's used (almost) only for demonstrations how cool it is - it's mainly related to painting, games and charts. Many of them can be found at Canvas demos.
How creatively / unusually can canvas be used?
Some examples:
jsAscii - ASCII art from images with
Javascript and Canvas (yea, I
know, it's painting but not the
classic one)
Javascript compression using PNG and
Canvas
There's a really cool tool called Detexify which uses machine learning on the back end which allows you to draw the LaTeX symbol you're interested in knowing the LaTeX code of and it will suggest one for you based on what it's learned from other users.
My two favorite are:
Processing.js - an implementation of the processing language in javascript/canvas.
Bespin - a collaborative coding IDE that feels more like a beautiful native app.
I always thought of creating a simple image editor with the canvas tag. It would be easy to use it for cropping, resizing, changing color values, removing red eyes etc.