I need to use image map in my website, to add different links to each part of image.
But I have problems with its responsiveness. I couldn't change map area's size while resizing window.
Can anyone help me with this? The method is not important, I can use either Js or Css.
Update:
I used http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html for responsiveness, but it affects on map area coords. When I reload the page, map coords are all 0, those are being updated only after resizing the window.
Do anyone have this problem too?
Imagemap is a very Old way to create websites I preffer using photoshop image sÃlice and save as html maybe you should try it ir you will use non dynamic images that way you can fix width and height and a lot more
If you have the image saved as a vector image, you could save it as an SVG and use RaphaelJS. I've only recently picked it up but it is quite easy to use once you get the hang of it.
You can assign links, style and hover events to each node attribute, and Raphael allows you to set the viewBox so that it scales on resize (can't link as rank not high enough - help can easily be found on SO though)
Here are some examples of using RaphaelJS: LINK1 LINK2
And check out jsfiddle.net/AUNwC/294/ for example of each node having a responsive clickable area (resize window to check)
Related
I'm a beginner with writing code so I'm struggling a bit with this one.
I want to have two images layered on top of each other, and when you use your mouse on it like dragging or painting, the image underneath will show in the places you've traced.
I've been using these as source, but none of them use an image on top and I haven't been able to replace the top layer with an image:
https://rifke.world
https://codepen.io/uargh/pen/eYmoXgJ
I think I'll probably need ctx.globalCompositeOperation="destination-out"; but I'm not too sure how to apply it to an image
Any help would be very appreciated since I've been fighting with this for a while.
Thanks! :)
I do not see anywhere that you are loading a second image, I think you should do something like:
var img2=new Image();
img2.onload=function(){
ctx.drawImage(img2,0,0);
};
img2.src="http://placekitten.com/700/1023";
I tried it here, looks like this achieves what you are trying to do.
Besides, you can use PageX and PageY instead of ClientX and ClientY, so that your code works as expected when page is scrolled.
You'll want a static image and a canvas element, pretty much what the link you included is doing. Here's the code from that site to dig into further how they are updating the canvas element for that effect. https://rifke.world//js/script.js?ver=1.4.
You can draw the image you want on top on the canvas element using the following method https://www.w3schools.com/tags/canvas_drawimage.asp.
So I want to make a scroll zoom feature on a map I have created. The map contains an image and a number of divs positioned on top of the map marking out positions (pins).
I have found a number of jQuery tools which allows me to scroll zoom on an image. And I could probably try and use the mouse position and scroll amount to edit the coordinates of my divs as well. Is this the best way of going about this, or does anyone know any jQuery tools that will allow me to scroll zoom in and out of divs?
Here are some tools I found for scrolling on images.
image zoomer
Wheel zoom
You could try using leaflet.js. It is a lightweight javascript library meant to be used for maps, but it also work for images. This tutorial could help you start, and you might want to check this post.
Here is a very basic example of what it could look like.
My app uses up to 6 svg images layered to create an interactive image. I have found that I cannot mouseclick on any images below the first.
** Edit. Excess code and text removed.
You can make an element insensitive for mouse events by setting the pointer-events attribute to none (see Tinkerbin):
svg > *{opacity:.5}
In essence I cannot do what I want this way. Stacking embedded images results in only the top layer being clickable by the mouse.
An image map works, with some mucking about.
I created a clear image calling it clearOverlay and gave is a usemap value tying it to my image map.
My imagemap I created using a free online app http://www.image-maps.com which took my image allowed me to create my clickable zones and generated the html for me. After cleaning it up and swapping the href values for onclick functions I added the map to my code.
Next problem was getting it to overlay my existing images. I eventually used style="position:relative; top:-300px" forcing it to sit squarely on my image. I'm sure there must be a better way, but at this point that worked for me.
For anyone else doing this don't forget to either place the clearOverlay last in your image list or set the css z-index to higher than everything else to make sure it is sitting on top.
So I now have a stacked svg image, where I can manipulate each svg according to where the user clicks. Its only taken me 5 days! I'm kinda over this coding by yourself lark.
** My image map above will not scale to different sized screens. The next time I try this, I will experiment using a transparent svg with fill zones where I wish to click.
Sorry maybe I was not clear in my original question below...
What I am looking for is a way to get a popup to move inside the windows viewable area (not actually create the popup itself). As seen in Google image's when you mouseover a image at the edge of the screen, somehow (which is what I want to know), the script detects that there is not enough space for the popup to appear in the window, so it pushes it inside the viewable range.
So I want to know how this is determined and calculated.
How can I use javascript to make sure
a popup div fits inside the window
when it appears?
A good example is google's image
search. When a image does not fit in
the window (either it is the far right
most or bottom most image), somehow it
is pushed inside when the popup is
opened with the mouseover event. How
is this calculated and how can I
create a script to calculate this.
you can use already build pop-up box/overlay window js library. Use jQuery js framework and go for any plug-in that provide you the same feature. I recommend you to use facybox http://fancybox.net/ with jQuery which makes this very easy.
There's no "use this code in your JS file" fix for this but the general idea is to reposition and override the offsets of the element in question, taking into account the viewport's bounds (to state the obvious).
For example, a couple of good tooltip plugins for jQuery support this behaviour, such as bassistance's jQuery Tooltip Plugin and also qTip. It might be worth digging into their source and seeing how they handle this.
This is one of the best i've come across http://gettopup.com/
I have a big html page, like 4000x6000 px with images and text.
I'd like to have something like a map overview of this page in a small div. A scaled version of the whole page which i could use to navigate.
Does anyone know some js script or example how to do that? Thanks.
Here's the basic framework of how you would do it:
Find a way to take a screenshot of the whole page. Then, resize it down with a scaling factor (like 1/25th).
In the corner of the page, overlay an image. Create an event handler that reacts to where you click on the image. Inside of the event handler, find the location of where the image was clicked (ie x-coordinate, y-coordinate).
Use the reciprocal of the scale (perhaps x25 if the scale was 1/25th) to get the actual dimensions of the page. Use jQuery to scroll to that location.
If you need any help with one of these steps, let me know; this is just to get you started.
I can't think of a single way to do that in html/javascript, for am image sure, but for an entire page?. If the site was built in flash... but short of that, I think you may be S.O.L. sorry. Why is your site so big anyway? That is far beyond the avg users resolution, and violates about 15 usability rules.