Hey out there. I've created three interactive rollover menu images which when the mouse passes over them they play an animated gif. The inactive image is just a still image of the first frame of the animated gif and I have the properties set to not restore the original image since once the animated gif plays, there is no need to return to the inactive image. Now the problem. When any of the images are clicked on to load their respective pages, a faint, dotted 'cut out' line surrounds the gif images and remains unless the entire page is refreshed. Hey out there. I've created three interactive rollover menu images which when the mouse passes over them they play an animated gif. The inactive image is just a still image of the first frame of the animated gif and I have the properties set to not restore the original image since once the animated gif plays, there is no need to return to the inactive image. Now the problem. When any of the images are clicked on to load their respective pages, a faint, dotted 'cut out' line surrounds the gif images and remains unless the entire page is refreshed. It is not the graphic itself, the gifs are clean. GIFs are not supported by QuickTime. Activate AppleScript in Freeway’s preferences: 3 - Construct your Rollover as normal. Jan 30, 2010. Technically you could have an animated GIF sprite which has a static version against an animated one which never changes and then trigger the effect on rollover, though the OP wanted it onclick, and the only way to cause that effect would be through CSS3 selectors (via anchors) to denote the change. I've been trying to find a way to do a specific interaction and I can't seem to find any instance of it in your tutorials. I would love to have a design aspect similar to this site's nav logo hover. I would like to activate a gif animation on hovering the png logo image in the top nav. Is this possible? Css double rollover fx - problem with ie6. The images are either jpeg or gifs. You can see how the roll over and the text colour / type can change. The line as it appears is a boundary line of some sort related to the placement of the gifs. Anyhow, ideally I would like the images to be completely seamless at all times. Any idea of how to set them so they don't get those boxes around them? (if interested to see what I'm talking about, the site is showthereelyou.com - the images are the three film reels on the sidebar). Thanks in advance. > Hey out there. I've created three interactive rollover menu images which when the mouse passes over them they play an animated gif. The inactive image is just a still image of the first frame of the animated gif and I have the properties set to not restore the original image since once the animated gif plays, there is no need to return to the inactive image. > > Now the problem. When any of the images are clicked on to load their respective pages, a faint, dotted 'cut out' line surrounds the gif images and remains unless the entire page is refreshed. It is not the graphic itself, the gifs are clean. The line as it appears is a boundary line of some sort related to the placement of the gifs. > > Anyhow, ideally I would like the images to be completely seamless at all times. Any idea of how to set them so they don't get those boxes around them? (if interested to see what I'm talking about, the site is showthereelyou.com - the images are the three film reels on the sidebar). > > Thanks in advance. > > Go to DW Exchange at the MM site and get the extension called 'IE Link Scrubber' by PVII. I can't find it at their own site anymore. Or add this inside the tag: onFocus='if(this.blur)this.blur()' -- Dan Vendel - *GOF* [url]Contact me directly by clicking here: [url]Formmail tutorial: [url]Nested table demonstration: [url]http://www.vendel.info/tabletut/[/url]. Actually, this is a good point that (I think) few folks think about. The onclick event handler for firing a JavaScript event or function is probably the most commonly used event on the Internet. No problem, you want something to happen when the user clicks on something. What if the user cannot use a mouse or other pointing device, or the device they have to use doesn't have the equivalent of 'click'? A lot of folks will say it's not necessary, or that they don't care. Still more folks will comment that it's redundant only bloats the code. Fine, no problem. See the above paragraph.;) I do a good bit of computer work for a local volunteer organization and one of the officers there is disabled. Confined to a wheelchair, and with hand-eye coordination impairments, he does most of his work from home and spends a *lot* of time on the internet. Unable to use a pointing device with any amount of accuracy, he navigates the Internet using a custom keyboard. Navigation is a matter of tabbing while watching the screen to see what links have focus, then pressing the spacebar to activate the link. If the link is dependent on an onclick event. Nothing happens. Those of us without disabilities are more fortunate than we realize, and often fail to consider the needs of those who are not as fortunate. After watching him struggle through the Internet, I have been in the process of changing all my sites to accommodate these needs. Use 'onkeydown' with 'onmousedown'. Use 'onkeyup' with 'onmouseup' Use 'onkeypress' with 'onclick' Use 'onfocus' with 'onmouseover' Use 'onblur' with 'onmouseout' Now, if only the extensions would do this when they are applied it would save a lot of time.;) -- Dave ----------------------------------------------------------------- If I were half as smart as people think I am. I'd be twice as smart as I was before I forgot everything. (Official victim of CRAFT Syndrome) ======================= 'Gary White' wrote in message news:gup7iv8uch63gng7b7fnqnr41opvg4rs6j4ax.com. > After watching him struggle through the Internet, I have been in the process of changing all my sites to accommodate these needs. > > Use 'onkeydown' with 'onmousedown'. > Use 'onkeyup' with 'onmouseup' > Use 'onkeypress' with 'onclick' > Use 'onfocus' with 'onmouseover' > Use 'onblur' with 'onmouseout' > > Now, if only the extensions would do this when they are applied it would save a lot of time.;) > Good point! But being a js moron, how would e.g. The issue in this thread look? Like this with both or how? Link -- Dan Vendel - *GOF* [url]Contact me directly by clicking here: [url]Formmail tutorial: [url]Nested table demonstration: [url]http://www.vendel.info/tabletut/[/url]. > Actually, that is the code that started this discussion. Right.:) I just used it as an example e.g. Onfocus because it was handy. Guess I should have used a different example for the snippet!:- Sorry. A better example would have been a show/hide layer example such as Page Menu 3 The same approach using the mouse hover would substitute onmouseover in place of onclick and onfocus in place of onkeypress What I've not been able to find an answer to is the javascript:void() for a null link that doesn't jump to the top of the page. A javascript link will not validate level three compliance, but I can't think of or find any other way to do a null link other than using the #.?? -- Dave ----------------------------------------------------------------- If I were half as smart as people think I am. I'd be twice as smart as I was before I forgot everything. (Official victim of CRAFT Syndrome). README.md freezeframe.js 3.0.8 freezeframe.js is a script that pauses animated.gifs and enables them to animate on mouse hover / mouse click / touch event, or with trigger / release functions. It supports responsive images and works as a jQuery plugin. • • • • • • • • • Examples Files & Dependencies • Include the js and css from /build/ • If you do not use a packaged version the following dependencies are required. These files can be found in /src/js/vendor/: • imagesLoaded Packaged v4.0.0 () • jQuery Basic Usage: jQuery Plugin • trigger the image you want by selector and run the freezeframe() function.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
March 2018
Categories |