I have to do 4 things with an image for a website i am creating.
You should be able to zoom in and out of the image.
When you rollover a certain part of the image it should highlight that part.
When you rollover the image a tool tip should be shown.
When one of these rollover parts are clicked it should link to a different page
Here is the image
As you can see it is quite intricate. I have a very hq version of the image which i would use for the site.
It is a image of a retail park, so when you rollover a certain retail.
Either the whole image goes dark and shows the tool tip of what retail shop you are on, or else, it just becomes more highlighted and shows the tool tip.
How would i do this in html , css and jquery?
Something like this would be perfect, though i would need the image to be able to zoomed in on
I'd recommend finding something like google maps that will let you specify your own images. A quick search online revealed:
tutorial for google maps:
- http://forevermore.net/articles/photo-zoom/
- http://blog.mikecouturier.com/2011/07/create-zoomable-images-using-google.html
3rd party libraries:
- http://www.maplib.net/ (link expired)
- http://mashupforge.com/ (link expired)
I am sure there are a bunch more as well. Basically, these should give you all the functionality of google maps, but without having to recode it all yourself. You could specify boundaries and do all the normal google maps stuff and have it link out using its various api features.
Developer of Mashupforge here. You can accomplish everything easily with Mashupforge with the exception of number 2. We don't support highlighting when you hover over a marker yet. Other than that, you just upload your source image and the app basically creates a zoomable, draggable map for you. Feel free to reach out to me if you have any questions!
Related
I'm currently working to develop a real estate website for a client. The client is stuck with the idea to create something like this :
http://woodfield-sillery.com/plans/
Basically, I'm looking to find a way to recreate the same thing, technically it would require :
Managing image map behaviour (to be able to react to mouseover)
Managing the onclick to open a view of the selected floor
Once selected, a second map would show of the floor, with available condos
Then onclick again, it would show pricing, availability, etc.
I'm having trouble managing the rollover image map through CSS.
Besides that, of course, the client would want to manage all by himself (so he can update the condo statuses), and I was planning to host the website through Wordpress
Questions :
Has anyone worked on a solution like this and would be willing to share experience?
Has anyone come across a Wordpress solution that works this?
Has anyone have a technical solution for this (Javascript, HTML5, CSS combined?)
I'm the author of MapSVG WordPress / jQuery plugin which is able to do what you need: http://mapsvg.com
To get started you would need to create a blank image in any vector editor (InkScape, Adobe Illustator, etc.). Then embed building image (png/jpeg) to the background. Then add shapes on top of the image and give them a transparent color fill (=rgba(0,0,0,0)). Save image as SVG, upload it to MapSVG map builder.
Everything else will be done in MapSVG Builder - colors, tooltips, popovers, links, event handlers, etc. See the demo.
you can use maphilight plugin
or you can use jvector
tutorial use link
I've been searching for a way to implement a gallery in my first ever website (written in HTML).
I basically want to make a page with thumbnails, and, when clicking the thumbnail, a bigger picture to show up (over the gallery, not exiting the gallery), eventually with a title under it, and , when clicking the big picture, to return to the gallery (eventually with a fading effect)
The problem is that I don't even know what I should be looking for, exactly, in this case.
If you don't need to build the gallery from scratch, I recommend using one of the many libraries that you can find online.
Here's a list of some very useful JavaScript/jQuery photo galleries:
Top 10 Free Responsive Image Galleries.
Hope it helps,
Regards.
There are many libraries online that do exactly this. My first google search came up with the following PhotoSwipe. Included in the webpage is a link to their documentation and git repo. If you would like other choices, this website lists 10 libraries that do exactly what you want
When you normally right-click over an image displayed on a Web page inside a Web browser, you get a context menu that has a menu item 'Save Image As'.
But if you right click on some images on some websites, the context menu doesn't display items that indicate that the image is one image. Instead, it displays 'View Background Image'.
If you view the background image, it turns out that the web application has one composite image that it has cached and then probably at client side, it slices and dices that image into separate tags.
For example, if you go to any thread on the Writers website of Stack Exchange, like this one:
https://writers.stackexchange.com/questions/3102/how-can-i-make-a-story-bigger
And right-click on the facebook icon and view the background image, you get this image:
http://cdn.sstatic.net/Skins/sketchy/img/sprites-beta.png?v=2
Similarly, if you go to a website that has the shareThis widget, like this:
http://sathyaish.net/
On the extreme top-right corner, there is this shareThis widget image. If you right-click on that image and view the background image, it looks like this:
http://w.sharethis.com/share4x/images/service-icons-sprite.png
1) I want to know what technology is used to achieve this and how may I learn to do it?
2) Secondly, how do I become good at JavaScript? How do I learn all these tricks? Which books should I start reading that will make me good at JavaScript?
See the word "sprite" in both the image urls? That's is what you are looking for.
Sadly, the technique is often used for content images — placing performance over correct HTML.
While you can get general tutorials on CSS Sprites (as Quentin pointed out), you might also want to check GWT ImageBundle Design doc which details how the idea was incorporated into Google Web Toolkit
I have been searching all of the net but I can not seem to find a simple opensource plugin which essentially provides a basic image cropping tool.
Here is the deal... I am essentially looking for exactly what "jcrop" provides example: http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop
however with the added ability of just being able to zoom in/out of the image.
The simplest tool which demonstrates what I am looking for is:
http://kroppr.rborn.info
as you can see its just like jcrop but this one lets you zoom into the image and move the image around so you can get the crop area you want.
Is there ANY opensource solution out there or does anyone happen to have the skill to integrate this quick hack?
Here is free opensource solution. It is a exact copy of kropper (functionality-wise, not sure otherwise). http://www.gastonrobledo.com.ar/cropzoom/index.html
Edit: Above link is broken , as the developer has changed his domain name to http://www.cropzoom.com.ar/
New Link of this guys: https://github.com/gastonrobledo/cropzoom
I'm using Google web toolkit for some project mapping seismic activity of some land area. The request from users is to create a map which marked points. When user will click on some point, more detailed information is shown.
So, I need to be able to draw some particular areas on a common image. Areas should be dynamically drawn (size and color based on last monitoring figures), and active: when user hover a mouse or click to the area, more detailed information is shown.
Please see the example of image:
http://polansky.eu/images/p07-b.jpg
I tried many ways how to draw dynamically or overlay image, and to bind handlers, but nothing was successful. Any ideas please?
Check these projects out:
gwt-g2d
GWT Widget Library (demo)
gwt-canvas
gwt-incubator GWTCanvas (demo)
Not sure if all of the mentioned projects suit your needs but I guess they'll help as a starting point.