I am trying to create an image map, where I define on the images coordinates that are links to the some other pages. Now the problem I am facing is that the position of coordinates is not relative.
If the image is on a different browser or in a different screen size, then the coordinates are not preserved. I mean a link which was at a particular place in the image is now on some other place of image.
Can anyone provide a piece of code where I can have some relative positioning where even the browser size or the image size will change the coordinates position also with it.
I tried to user percentage tags like COORDSCALE "50%,50%" but it seems like a wrong attribute for the Area tag. Even this COORDSCALE="ABSOLUTE|RELATIVE" is also not working.
First of all, are these the right attributes? Is there a possibility of relative positioning? Any CSS, or Javascript code will be great.
Wrap the image with div that has relative position. Inside it use absolutely positioned elements to imitate the same thing imagemap is supposed to do.
Google "CSS image map" to find more information about the technique.
Related
I'm trying to write something that draws on an image. I have a flow chart that's in a .png and I want to draw a circle around a specific step in the chart based on the page that the user is on. I would normally just head for HTML5 and use the <canvas> element, but it has to work on IE8, which doesn't support <canvas>. I can use jQuery, but that's the only external library that I can use. Also, the user can scroll up and down the page, so things that I've seen that use absolute positioning end up looking bad since I don't always want the image there. Any tips? Thanks.
How about a DIV containing the flowchart as a background image with another image (which would be a transparent circle outline image) sitting inside the DIV, positioned absolutely (relative to it's parent DIV) which is moved to the correct position within the div based on which page the user is on. Should be simple enough to do.
I have an image and I want to restrict the clickable area on this image. I want user to click only particular area. I want to obtain a darker view out side of this clickable area. How could I achieve this usin java script and/or jquery.
Kind regards
There are many ways to implement the clickable area:
using image map :
http://en.wikipedia.org/wiki/Image_map
Take a look at this website : http://odyniec.net/projects/imgareaselect/
or using divs and z-index.
It might be difficult, but if you use a to determine a clickable area first, you can use jquery to do something like this:
On hover over the mapped area, Show a transparent black div, the same size as the image. (This makes the image darker)
Place another div on top of that, with the same dimensions as the image. (this contains the small map-sized container for the new image)
Place another div INSIDE of the last to be the same size and position as your mapped area. (This will contain the original image - not darkened)
Place the image again INSIDE of the last div and position it so it lines up with the original image.
This should show something like what you're talking about.
If it's more complicated than this, I'm sure we will ALL need an example and all of the outcomes of these images. I don't think there's enough detail to give you a real answer.
I am trying to find a way to drag and reposition an image that is below another (larger) image. So basically I want to make the top image completely ignored by the framework. I have tried making it non-draggable, but it still covers up the bottom image and prevents me from resizing it. Anyone had luck with this?
If both images are in the same layer, then you can change the z-index and move the image to the front on click. ( .moveToTop())
If not, then you have to change the z-index of the layer on click, so that the larger image does not cover the smaller.
Okay my last question got no response. I think I didn't ask the way I should do.
Basically my requirement is similar to this one Programmatically Clip/Cut image using Javascript
But following that link will result in a rectangle view of any portion of the image but I want to clip it any direction (polygon). Would that be possible?
There is not a good way to make an arbitrary polygon shape with the HTML 4 DOM. If you were using canvas I'd say you could do it that way. Your other option would be to just have a transparent png (and gif for IE6) on top and then the image underneath that and absolute positioned similarly to the other answer you referenced.
I used a jquery image scaling plugin for a large image on this page I am building: http://seans.ws/sandbox/test/thrive/
I am trying to put a navigation div below the image, but I cannot do so because the image is absolutely positioned, and the scale of the image changes, so I cannot just specify a padding-top value for the navigation to get it to show up under the photo.
Any help would be greatly appreciated.
I would put both image and navigation div in one container and specify absolute position on it (instead of image). It seems to be simplest and most straightforward solution.
First, does the image have to be absolutely positioned? Generally if you want the image to be placed relative to other elements on the page or you want other elements on the page to be placed relative to the image they are placed relative, sometimes within an absolutely positioned <div>
If you explain why the image has to be absolutely positioned there may be an easier solution.
Assuming that absolute positioning of the image is required, the only possibility I can imagine is either modifying the jQuery plugin or making a second javascript to edit the padding-top as the image is resized.
If you need the image absolutely positioned on the page but relatively positioned to all other elements, I suggest putting the image and the content (which you want to appear underneath it) inside of an absolutely positioned <div> element, but leaving them each relatively positioned.
You could get the height value, and then work out how much padding you need.
var myheight = $('.maxAtOrigImageSize').height();
$('.nav').css('paddingTop', myheight+'px');
However, you would need to add an event for when the window changes size, so that if the user adjusts the window size, you can update the padding of the nav.
I'm answering your question, but I feel there is a cleaner solution. I would create a containing DIV for the resized image to sit in, and follow that with a nav DIV. The nav would always naturally be in the right place when resized, at the bottom of the image. You may want to consider changing the way you implement this.