I am trying to make a clone of a popular browser game called Travian. There is a /farms page where the user has an overview of all it's farms (I assume for now that the position of each kind of farm is always the same). Each farm can be upgraded to another level (up to 20) and the current level will be displayed on the /farms page. If the current farm level is 0, then no number will be displayed.
The issue I have is on that same png picture there should be 20 different a links for each resource and this is going to be done when the user will click on any of the white circle. How can I achieve that?
Dare I say it. But possibly html image maps is a potential solution.
https://www.w3schools.com/html/html_images_imagemap.asp
The technique isn't widely used in modern development practices mind you, as they aren't good on mobile. Svg alternative might be worth looking at too.
http://thenewcode.com/696/Using-SVG-as-an-Alternative-To-Imagemaps
Related
I've been asked to make an interactive site map for a local development which has a few houses on it, so users can click on the relevant house within an aerial site layout, and see it's details listed, and whether or not it's sold.
Staff need to be able to mark houses as 'sold'.
It's been a while since I've done anything like this - in the past I would have used flash and had the sold status updated via actionscript and php, but things have moved on. What are some of the most popular methods now?
I've included an example below which is a lot larger scale than what I'm looking to do, but the same principle. I can't work out how they did it though, and I'd really like it to be vector so it can be zoomed into without losing quality, plus have the option to animate things like the popup bubbles etc if the tech allows.
Also, I'd probably be looking to include this in a Kirby CMS site, and hopefully have the updating done through that, but it's fairly flexible.
Thoughts appreciated!
https://www.redrow.co.uk/developments/the-sycamores-162433/interactive-site-map-4803v1
I am making a Game in HTML5. In one part of it, I want the users to be able to customize the avatar they get by default.
For sample, let me share a screenshot from Zombie Lane on Facebook (now this game may not be in HTML5 but that's not the point):
My question is as to how do I include the images in the HTML5 page and in which format?
Whenever a clothing is different shirt is selected, the change is applied immediately. Is it a whole new photo that we see, or is the photo changed somehow by programming? How is it done?
NOTE: I do not want to get into 2D/3D rendering or any complicated algorithms, what's the simplest way?
I'm looking into creating a website that allows people to create their own designs for a certain product. This product can have straight lines, curves, squares, and various shapes. I would not only like these people to be able to free hand draw their own artwork, but also be able to drag and drop (or just click in an area) certain stock images onto the template. I started this project using HTML/Canvas, and have implemented the drawing of freehand/shapes/lines, but I've read a few places that say I should be using SVG for the images.
Reading that I should use SVG for images made me think that since I'm a novice on HTML and website design in general, that I should possibly be doing this differently. So I was wondering how some people would implement this. For a good concept, think of a web site that people can design their own T-Shirts. You just draw on a square canvas, circles/squares/lines/free hand, but can also stick stock photos on there. Thanks, and I'm not looking for code, just to know if I should be using a mix of HTML/SVG/Canvas, or something completely different that I don't know about.
to summarize....
svg, or canvas.......or both, or something else completely.
Okay this is how i imagine you want it to work:
Your customers select a tshirt size and style.
An embedded application within your website allows the users to draw
a nice design they want or import an image
A price is calculated based on the size of the tshirt and the size
of the print
Upon succesful payment, you receive on your backend an image of the
print, the order details and you feed that image into your T-shirt
printing thingy, you print it and you post it.
If this is right you should consider this: http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html
You will probably want to remove some unnecessary tools from it and fire it up with different configurations based on what kind of tshirt the customer selected. One example is the t-shirt size. If a customer selects a small t-shirt you fire up a smaller drawing size. The list goes on.
You need to have some good JS skills however to be able to play around with SVG-edit because it is massive but from what i feel it fits perfectly to your purposes.
If you want to see the differences between SVG and Canvas read this: http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/. Its pretty straightforward.
Now why did i suggest using SVG-edit? I don't know if there is any other application implemented using canvas that has so many tools and works so nice as SVG-edit.
It has everything you need, including a '''SAVE as PNG'' function which will serve your purposes in case your t-shirt printer doesn't print SVG images.
I am in the middle of a Extension build. Basically I'm trying to do a web-based RPG based off of PMOG(the Nethernet). I'm looking for some kind of overlay function like this:
http://img.skitch.com/20080814-ms5hmqh3433rgt7cg2yg13kcka.jpg
Any ideas?
edit
Also, is there any way I can log the websites someone goes to, without actually logging the websites? I'm trying to base EXP earned and Gold earned on how many times they go to a website per day. (I.E. 40xp/gold the first time and 10 every other time)
To create "pop overs", you would create a <div> on the page with a very high z-index (which is a CSS attribute). z-index determine what goes on top of what else. From there, you can use absolute/relative positioning to determine where it should appear on the screen (again, using CSS). To show/dismiss it, you can use a large variety of JavaScript techniques (including sliding it in from off the page).
Bit of background
I've been producing a Flash-driven webcomic for three years now, incorporating some basic animation, a synced soundtrack and zoom-drag page viewing. The recent Flash-bashing, my desire to reach iHandhelds and my preference for open versus proprietary means that I want to make the move to HTML5 techniques this year. In the long-term, I think the writing's on the wall for Adobe's product, and I'm not entirely convinced that's a bad thing.
I'm relatively comfortably with both CSS and HTML, having worked a little in web design before. However, JavaScript is a foreign country to me, and I simply wanted to get some advice as to
whether what I want to achieve can be accomplished consistently across all browsers and
what the best techniques/approaches to the problem would be.
Any advice, even general principles, are very welcome. I've already sought out several HTML5 tutorials and introductions, which lead me to believe that the canvas element will be foundational to my plan; however while all the individual problems I face have been answered by many blogposts and guides, combining the various solutions into a single entity is something I'm not currently able to figure out, as I'm not certain of the limitations of the new HTML5 tags, or of best practice.
If I'm successful in achieving what I'm after, I'm going to post the full code online with an explanation of all the elements. Webcomics might not be a huge domain, but having a resource that did this would have made my life a lot easier - hopefully it'll help someone else in a similar position.
What I'm after
Here's a diagram giving the basics of the design requirements. I'll explain the elements, and the desired extras, below.
(Perhaps the simplest way to demonstrate what I'm after would be for interested folks head over to my website and see how my comic currently works. This isn't a plug - it would simply give the quickest insight.)
At core, I'm after a viewer that will:
display text (SVG image) in a canvas element above an raster image the page's panel art
both images should be zoom-and-draggable in sync but should ideally fade in separately, with the raster image coming first, followed by the SVG image
I'm guessing that the best way to accomplish this would be to layer two canvas elements one above the other using z-index, with the SVG file in the uppermost element. These could then be nested, as in the diagram, within a div element that would carry the zoom-drag function. Is this a reasonable approach, or are there more efficient options?
The next and previous buttons are self-explanatory. Would it best to have each page (bearing in mind some will involve animation and music) on a separate page, or to have all pages within a chapter on a single page, with the buttons making them visible progressively? I imagine this would have a great impact on loading speeds.
Finally, I'd like to have the viewer capable of displaying fullscreen if the reader desires. I imagine this could be accomplished by using Javascript to make the canvas elements and their surrounding div switch between different CSS giving a px-defined size and 100% height and width. Is this a good approach? Is it possible to apply the size change to the div element only and have the canvas elements automatically follow suit, possibly by defining their size via % in CSS?
Desired extras
At various points in the comic I make use of basic animation techniques - simple movements of layered raster images across the viewing pane. This would be simple to accomplish, I imagine, using Javascript; am I correct in thinking that applying overflow:hidden to the wrapping div will prevent images larger than the viewing area from spilling outside the viewer area?
I also want to synchronise audio with some of these animations. I understand that synchronising canvas events with the audio would be the best way to do this on, permitting both to begin activity only upon page loading or next button click.
That's about everything. As said, any advice at whatever level would be greatly appreciated, even if it's 'yes' or 'no' to the various questions I've asked. At root, it would also be good to know if HTML5 is the best option for what I'm after or whether (with gritted teeth) I should stick to Flash for now and go after handhelds using Adobe AIR.