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
Related
I'm trying to make my webpage more interactive by making a small town-like map, with different buildings that are clickable and lead to different pages on my site, but I'm having a lot of difficulty animating the webpage with just HTML/JS and also making it stay the same even after resizing the window.
This is my test site right now, for clarity: https://people.ucsc.edu/~anlin/test#
(I am currently just switching between a png of the map and a gif of the buildings moving when the mouse is hovering)
How can I accomplish this, and should I be using something other than plain html/js to do this?
Thanks!
Probably svg would help you out. You can do awesome interactive stuff with svg. Meanwhile, you can also use css to create great animations. It really depends on what you need.
Check this out: https://medium.freecodecamp.org/a-guide-to-svg-on-web-c5932dadca03
Some examples:
https://codepen.io/search/pens/?q=svg%20animations&limit=all&order=popularity&depth=everything&show_forks=false
You can use an <svg> , which is a "scalable vector graphic"
Here is almost an exact example of what you described
https://codepen.io/dudleystorey/pen/ltpmv
I found a lot of resources about my question, but I'd just like opinions based off of a high level overview of what I'm trying to do.
Basically, I'm using a combination of Javascript, and HTML to build a customizer for a friends' website. I should start by saying that I have some HTML experience but this is the first time I'm using Javascript (I am experienced with Java). The ultimate goal will be something like a customizer to allow users to select the parts of a bicycle and change their colors to place custom orders.
I've got the various parts of the bike as images files, and I'm using this jscolor color picker found at: http://jscolor.com/examples/#example-showing-hiding to allow the user to select a color from the color map. My plan is to layer a given part (photo) on top of a copy of the same photo, and fill only one of them, like layering in Photoshop. This way, the part fills in the correct shape, instead of filling as an entire square of the image file. As the cursor moves, the color should change in realtime. Once done, they can save the part and the color record will be kept on the back-end.
As I'm new to Javascript and not that experienced with HTML, I'm finding it a bit challenging to get this on the right track. So I'm hoping for some advice from some people who are experienced with HTML/Javascript/CSS to point me in the right direction to get this going along a better track than it is currently. I wasn't sure how to "phrase" what I'm trying to do.
The three main parts I'm addressing:
Using HTML buttons to load a different bike part (essentially load a separate image file).
Adding the color from the jscolor picker to the image of the selected part.
Saving the state of the part when the user clicks a Save button.
I will continue to search the forums as I already saw a few leads similar to what I want to do, but I mostly want to know if my approach seems feasible for what I'm attempting to do.
Thanks in advance!
Using normal HTML buttons will make things complex for you.
I think leveraging HTML5 Canvas API is a better way to approach this problem. Canvas is the HTML5 element for helping out you do the graphics manipulations using JavaScript. Learn more about canvas here.
You can make use of a library such as Fabric.js to make things easier.
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
Is there any JS library or code available to track user clicks? We'll use this to generate heatmaps using Heatmap.js.
This JS lib/code is supposed to work with fixed and liquid CSS layouts, cross browser, and different screen resolutions.
We have tried some simple tracking code, but it's not tracking the click positions properly for different screen resolutions and layouts.
I just wanted to check if something like this already has been implemented so that we can avoid reinventing the wheel and save time.
Any help, links, suggestions are much appreciated.
Thanks.
I found this website today searching for the same thing : www.crazyegg.com however I think you should "buy" their services instead of just importing a .js .
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!