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.
Related
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.
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.
I'm looking for a script that will allow a user to pick an image in an HTML page and drag it to a new location while allowing the other page's element to align around it.
While dragging the image should be completely visible (there are many scripts, like TinyMCE and CKeditor) which don't show the image while dragging and only show its new location and the elements around the dragged image after dropping it.
And just to be clear, the image is using the same z-index as the rest of the page (its inline).
I hope I was clear enough, let me know otherwise.
Something like jQuery Masonry? http://masonry.desandro.com/
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.