It has been a long time since I have had to do Image Mapping! Probably like 4-5 years.
The last time I achieved this using the tag and creating tags for polygonal shapes. This of course works, and is still supported html, even in HTML5. Question is though, is this still a good way to go for image mapping? Or should i scrap this direction and aim to use Canvas or SVG techniques instead?
There are a couple of factors in regards to the decision:
The client uses IE7, so the solution has to work with IE7 and IE8, hence me thinking not to use SVG or Canvas, it would be easier I guess to use the old school map tag, at least it will easily work across all platforms.
The Map has quite custom styles (strokes around the areas with a margin gap too)
Each area has a rollover state, with a popup with content unique for each region. This will have to be achieved with JS. Are there any issues using JS to interact with the DOM structure of the map using map tag?
It's not essential, but I would to make the map somewhat responsive to the viewport.
Using the tag frankly feels really old school, dated and dirty. But, to be honest for my case, it seems like the most suited solution. What does everyone think?
Any feedback welcome,
Thanks,
Craig
For your requirements I think best suite is SVG. By some work around you can make use of all time favorite jQuery with SVG and build cool stuff so quickly. I was able to develope a ticket booking tool on theaters with SVG maps within two weeks.
Also now every one needs every thing on mobile and it works on mobile with just no efforts.
Try to convince client to upgrade IE, that will be best for you. All the best.
Related
Good morning/evening, hope you're having a great day. I had a problem I've been postponing for the last couple of months.
Short Question: Is there a way I can make my website scale, everything in it scale, from text to images, to tables,... when the window size is changed?
Long Question: I've been working on a program that is similar to PowerPoint, I have been giving a lot of webinars/events in my local area and PowerPoint isn't that good for programmers, or if you want to use it for teaching, there is a lot of repetitive things I can automate with programming. Now I have one problem, I just can't figure out what can I do to make a presentation scalable just like how PowerPoint is doing so, I had an idea and that was just to create each slide as an SVG image, or at least use an SVG tag but with the ForeignObject tag and just stick my HTML code in it, but that is ugly coding and will lead to some trouble. On the other hand, if I ditch SVGs and use something like media queries for adjusting the font size, it wont work, since the font will not scale nicely and some text may go to the next line and you know what I mean.
Is there anything I can do about this? I know that this question is too lengthy and I'm sorry. I can code in HTML, CSS, JavaScript and (soon React) if that helps.
I've just started to learn web development and I have an idea to do the following:
Take simple image (jpeg/png) and make some areas of that image clickable (or other events on those areas). For example, when I click on specific area on the image, this area highlights, other part of the image shadows.
First what I googled was HTML map/area tags. But I want to know other approaches which I can use to do that. Just give me some keywords, nothing more.
Thanks in advance
I stumbled upon the same problem some time ago:
HTML maps tags are the quickest way but in the long run often give problems often because of the lack of support.
Going for an SVG image which is widely supported across all browsers is a good solution. There are many JPEG/PNG to SVG converters on the web (even if quality would not be the same)
Another brutal approach is to create some clickable overlay divs over the image, it is a good approach if the areas to click are rectangular.
Hope you find a good solution :)
I have been spending about 7 hours today, trying to:
a) Create my own carousel using intensive javascript and CSS3 features (see this pastebin)
b) Setup and integrate the Roundabout plugin from FredHQ
c) Setup and integrate the Cloud Carousel plugin from Professor Cloud
Both third party solutions were tried because i failed in accomplishing what i wanted by myself. Unfortunately, both solutions do not work the way i would require them to. Both are amazing for displaying images, but i need to show more complex content, a heavily styled DIV with multiple encapsulated DIVs inside, PNGs with transparency, and so forth.
FredHQ's version did not work as it did not scale the content inside my DIVs. Not even the text was scaled, until i removed the font-size parameter, but that is something i need for a proper layout. Cloud's version works with images only.
I have hit a wall and i cannot seem to find any other solution. It seems the word "carousel" is used for slideshows and sliders, so i find hundreds of such solutions, but not one that works like i need it to.
What i need is decreasing opacity on further objects, while the center one is at full opacity. Also further objects should be scaled down by certain scale factors. It does not have to be 3D (not desired, even), but due to the scaling it would look 3d-like.
It does not have to be jQuery, although its probably a good idea if it is.
Does anybody know or can anyone point me to a proper solution?
Have you looked at monete(git), http://www.jacklmoore.com/monte? 184 line. Not sure you'll find something easier to dig into and make it work your way. Hundreds of solutions? So I'll take it you looked at the cycle plugin as well. That's probably one of the most mature and robust ones out there. You're asking for a lot in your question and these kind of question just wear people out after a while. That's all.
You probably won't find anything that fits your needs EXACTLY and you'll have to roll it yourself or hire someone. If you get something going and come back for specific help, you'll fair much better.
I was wondering if anyone could offer any advice. I'm an expert HTML / CSS coder...but I have little experience with HTML 5. I have read about the great things it can do and I want to learn it, but im not 100% sure of what I can do with it. I have read a lot of articles regarding HTML 5 but none of them go into enough detail about it to answer my questions.
Aside from making layout easier, can it do things like create a rotating banner? I need to take the banner on the main page of this site
www.newmarklearning.com
and make it ipad / iphone compatible. I know I could use Javascript and a host of other coding options, but i fugued this is a great place I could start messing with HTML 5.
Problem is in not really sure if thats the right technology to use. Can HTML 5 / CSS 3 handle such things or am i limited to Javascript / Ajax etc???
Any help pointing me in the right direction would be great.
Thanks
Craig
Regarding animations, CSS3 offers you a lot of options. See e.g. here for more information on 2D Transforms. There exist 3D Transformations, too. However, only Webkit-based browsers support it right now. This site also offers a list of CSS3's new features.
In your case, to have the banner animated, you would have to combine a transform with a transition property (the transition let's it animate, the transform only describes the targeted rotation/scale/skew). If you want a constant animation (not just once), there might be some Javascript necessary.
Well, apart from that, HTML5 offers you a lot more new features, like offline storage or other things. The only problem is that the user has to have a relatively new browser in order to support everything, which sadly isn't the case right now (I know several companies that still run Windows XP with some IE6 or 7 or something like that - any updates disabled :-/)
Edit: Oh, OK, I just took a look at your site. For such a "slideshow", at least a little bit of Javascript will be necessary, to store the current slide etc.. But every smartphone browser should support it without a problem
do you mean the banner on the right? That changes on a timer, or when a number or arrow is clicked?
It would be easiest to recreate that with JavaScript.
Check out:
http://www.dhteumeuleu.com/
If you want some cool ideas
I have integrated various WYSIWYG HTML editors over the past few years, but I think I have hit a brick wall on this one.
We need a way for people to edit text that turns into VML/SVG when rendered, but remains editable, with minimal styling such as bold, italic, font face and size, and if possible, ability to create a text region anywhere on the canvas. Google Docs has what appears to be one in their presentation editor. Something like that would work ~ its very close to what we are looking for.
Does anyone know of a commercial or free editor that does this (must be browser based), and if not, has anyone approached doing this, and if so, what were your results. Any other info, links, suggestions etc are welcome - I seem to have hit a brick wall on this one.
Thanks.
You might try http://svg-edit.googlecode.com/ though we do not translate to VML (we require IE users to install the Google Chrome Frame plugin).
One important question first: Why specifically should the output of the WYSIWYG editor be in VML/SVG?
===
I am not aware of any existing editor that fits your description. You may have to write one yourself. If you are going to roll your own, I have two suggestions; one of which I am less confident about in terms of capability and one where I am not entirely sure about the performance ramifications because of the sheer amount of libraries involved. Either way, these are the two best bets in my opinion:
1) If you're intent upon VML/SVG, one library I know that can bring the two together is RaphaelJS, which has some degree of text support, but I'm really not sure how sophisticated the degree of manipulation of the text is:
Raphael JS lib: http://raphaeljs.com/index.html
2) Can you instead use VML/Canvas? I would recommend using VML/Canvas via the exCanvas library (which allows you to write code using the HTML5 canvas element, which is automagically translated to VML in IE/Trident browsers), in addition to the new canvas-text library.
Generic canvas information (generic drawing api):
https://developer.mozilla.org/en/Canvas_tutorial
exCanvas (IE compatability layer for canvas element)
http://excanvas.sourceforge.net/
canvas-text (text-specific extension to browsers with poor canvas text support):
http://ajaxian.com/archives/canvas-text-add-text-functions-to-subpar-canvas-implementations