I am creating a web application in which I need to display an image which a grid superimposed on it. So when the user clicks on any one tile of that grid, that tile gets magnified.
I have the image with superimposed grid but cannot find a way to zoom parts of it. I am using jquery and javascript
Can you please help me with it?
Use a plugin like http://www.jacklmoore.com/zoom
Related
I am using the GOJS javascript framework to work with flowcharts. I have a pretty huge flowchart that isn't fully visible in the viewport. There is a scrollbar to view the hidden content in the canvas.
I am trying to export the canvas as an image. But I am only able to export the visible part in the canvas and not the full flowchart. I have tried using canvas.toDataURL() and the GOJS diagram.makeImageData() APIs, but haven't been successful.
Could the JS experts here please help me out? Thanks so much...
You should not be touching the Canvas element inside the Diagram's DIV element.
Have you read http://gojs.net/latest/intro/makingImages.html ? You need to pass some options to Diagram.makeImageData.
I am developing a wayfinder app for the library building. I'm developing it using HTML and JavaScript. I've mapped all the coordinates of library rooms on the image, and I'm navigating one object over the image to show the directions, and I'm using jquery.path to navigate the object.
But now I want to change the size of the image, I want to make it bigger than earlier, but now have to map all coordinates. :(
Anyone please suggest me another ways to map coordinates quickly.
I am trying to achieve an effect similar to this site:
only instead of the mouseover function putting a border around the corresponding image, I want to simply highlight different parts of the image by drawing a polygon with defined coordinates over the image.
I have a test of my site up at:
http://perfectdays.ca/image-map/
I used a plugin called ImageMapper in Wordpress to create the image map as you see it on the site. Right now, when you mouseover the arms, for example, the arm regions on the image are highlighted.
I cannot figure out how to a)have the corresponding text on the left get highlighted when you mouseover the arms, or vice versa (and more importantly), have the arms highlight when you mouseover the text "Full Arms."
There was a somewhat similar post called Javascript Newbie: How to highlight text and image in different divs on mouseover.
However I cannot figure out how to adapt that to include the highlighting of certain parts of the image without using the plugin mentioned above.
Any help is much appreciated.
Are you able to put this in your area tags?
onmouseover="highlight(this.id);"
Then you can just make a simple javascript function that changes the class of the corresponding link.
Okay, my first question is this:
Is it possible to drag and drop an image on the canvas to a different place on the canvas?
I have the image on the canvas already, I would just like the user to be able to move it by clicking and dragging. I know this is possible with Kinetic JS, but is it possible just using the regular HTML5 canvas?
Second, if the first question isn't possible:
Is it possible for an image to be placed on a canvas at the point where a user clicks?
Can someone help me out here, or point me in the direction of a tutorial?
Thanks!
Is it possible to drag and drop an image on the canvas to a different place on the canvas?
Yes. You can read more about it here - http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-an-image-tutorial/
Is it possible for an image to be placed on a canvas at the point where a user clicks?
Yes. You'll need to find out the co-ordinates of the canvas element that were clicked and place the image accordingly.
You can read more and view demos of the canvas element here - http://www.html5canvastutorials.com/
Is it possible to drag and drop an image on the canvas to a different place on the canvas?. Yes. However, if you want this, you have to implement it yourself.
Is it possible for an image to be placed on a canvas at the point where a user clicks? Yes. However, if you want this, you first have to implement 1), then implement dragging images.
I have a multi-layered image in Photoshop that I would like to use on the web. The aim is to have a number of buttons to show/hide the various layers.
My initial thought was to export each layer as a transparent GIF PNG, stack the images using CSS and use Javascript to toggle the visibility of each layer.
Is there a better way to achieve this? I am particularly interested to hear of any software or Javascript libraries to simplify this process.
Many thanks.
Edit:
To clarify, the image in question is a map with various outlines and shaded areas to overlay, so I will only need basic control of layer opacity.
I would stack each layer into one large image. In your front-end code create a frame the size of the layer with your stacked image as the background.
Create the buttons and use jquery to trigger a background shift relative to the button that is pushed. It will appear the image is changing, but it is just shifting the background. This will save on consecutive image loads, making the UI appear quick and seamless.
You could try to use the ::before and ::after and -webkit-mask-image property to help you create you multi layered image.
Or just stack png with absolute position and your png needs to be in 24bit mod, by the way.