I have a Dojo Content Layout Pane on my Page and inside that there is an image which is being formed inside my Python code. The images is made from multiple small segments. Now what I have to do is to show different tooltips on different segments of the image. What I did was that I associated the image to a and each area has different tooltip. Now the problem is that when the Content Pane is resized, then it resizes the image as well but the coordinates in remain the same so the tooltips get screwed up. Is there any way to change the coordinates when the resizing is done? Because what I think is that when resizing is being done, then DOJO is handling it and the internal onresize event us not triggered.
Related
I am using Adobe Edge Animate to do some CSS3 animations, and using a plugin that converts the SVG images to tags so that the SVG elements are accessible via Javascript. The problem is, when one of the parent DIV containers is hidden and later re-shown, the embedded SVG image is reloaded losing any changes that have been made to it, such as fill colors of shapes, etc.
This also causes some stuttering in the animation when a new image is loaded, as it takes a small amount of time to reload the image.
This problem is not present in Firefox or IE. Is there any way to tell chrome to not re-load embedded images when hidden and shown?
Here is a link to the page in question: Link
If you press the enter key, it triggers part of the animation. You can see after the rotation where it switches out the image and flashes. If you use the built in function via browser console called changeBladeColor() you can see how it resets any changed attributes. This function changes the fill colors of the shapes in the SVG.
Here is an example usage for testing:
changeBladeColor(1, '#ff0000');
It seems the only solution is to position the elements off the page. I had to re-do a lot of my animation, so keep this in mind when doing any projects where you need to display and hide objects (especially ones that may not appear to be doing so).
I am working with image map i am taken two buttons in my image. in button click one popup(div)displaying .in that div i am taken image one map with areas . i am trying to click (close button and on and off button)) but not responding .after maximize the browser window it is working . could any one solve this problem.and i want make all images responsive i used JQuery Image Map it is working but . when i given div position is absolute.
it is not working. can any one provide solution for this problem
(press tab key for identify image map area's)
Although your question is hard to understand, i will try my best for 50 reps (I am young and needed the money ;)
You are using a JQuery Library from here:
https://raw.github.com/stowball/jQuery-rwdImageMaps/master/jquery.rwdImageMaps.min.js
The readme of it prints in large letters:
"Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize"
So, your close handler doesnt trigger, because the area coords were only calculated by that "rwd" once you resize your browser window, and the readme tells us, that it is designed to do so.
Btw to make your code work:
add $('img[usemap]').rwdImageMaps(); below line 20 in your javascript code.
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.
I have a PDF document embedded in div in a page. The page also has re-sizable regions to make one column smaller/larger than another on demand.
When re-sizing the regions, onmousemove events are not fired when the mouse is over the pdf, thus breaking a lot of the re-size functionality.
Any way to get these onmousemove events?
Thanks!
Not that I know of.
One option is to replace the embedded PDF with a placeholder (a <div> for example, same dimensions as embedded PDF) during dragging. So, when the mousedown event fires, hide the PDF, show the placeholder. When the user has finished dragging show the PDF again.
Ended up overlaying a div on top of the PDF.
My page has a full screen flash object with a centered fixed content area (the rest background).
Without touching the flash source, I want to add "links" to set places within the content area to run script(s) (eg. ajax, event tracking) - similar to an image map.
Needed: - any page click compares the clicked x/y coordinates to a lookup table and if coordinates are within a "link" region, run a script - remember the coordinates are of the fixed content area within flash, not relative to the browser. will the Flash animation and interactivity still work as normal?
Options tried:
set flash wmode=transparent and place a div containing links covering active area
This works in IE but Firefox disables the interactivity of the Flash file under the div layer
AFAIK Internet explorer is the only browser that allows click events to be received by elements under transparent content, so an image map won't work.
I do not believe there is a way to accomplish what you are trying to do.
Though, If you could edit the flash source you could capture the event there and then send the coordinates of the click to javascript through ExternalInterface.