modified example

Hover the mouse pointer over this paragraph.

How about this one?

And here.

how would we do this by the word?

And when we get it by the word how do we then get the page to speak to us?

This example as previously shown seemed flawed. It changed all of the p elements to the new styles which really is a bad effect. This new example shows how to just have the hover be for the element that is being hovered over.

Let's add an image and make that change on-hover

we need to add some hover callbacks for this. It is easy to do. But what is not easy is having the image scale. It is just a matter of looking for this. Either we need to have a callback for each image, which is a little bit rediculous, or we need to be able to scale the image by a percentage, saving the original, and then removing it later.

the on enter function

the on leave function

Another point: the way things are in this file the resizing of things makes everything in the flow get interrupted. Maybe a better way would be to create a div that contains the enlarged thing and have it absolutely placed on the screen at the position of the object that it is aping. It would cover over that other object (assuming that it is enlarged, but there is no reason why we wouldn't want to make something smaller when we hover over it. If we did things like that the rest of the content would not need to resize. The new element would destroy itself when we moved off of it.

And then we would have a problem if there were a way to get the thing to stop it self from destroying itself (some kind of programiing anomally). Because of that threat maybe a better design is to have a 'hover' node that only exists on hover and is made invisible when the hover is over. There would only be one of these so no chance of nesting (which would could cause stacking problems with overrunning).

The things we need to know to get this accoomplished

maybe that is as easy as just getting the pointer coordinates? In any case it isn't difficult. Look towards the scripts tagged onto this file to see how easy it is to get the coordinates of an object. Setting them, and understanding how jquerry gives them back to you, was the confusing thing. The calls don't always contain a value, but an object that has an name-value pair that provides the style data that was provided by the original object. For this reason jquerry also provides a width, height, and offset function for a document node (from the DOM of the page). Easy as it gets.

so often when hacking things can become very obvious all at once. What is it that I really want to do? to have a 'make it a little bit larger' effect without having all of everything else jumping around on the screen. I considered putting a div that would over lay. That is not the real way to do it as far as I can tell. And so I think the way is to just take that same div, give it the same rules for flow, etc, as the part that is to be replaced. take that other part and set the position relative after saving the location, then put that item back where it was and make it bigger or whatever. The flow of the document should not chance so elements shouldn't bounce around on the screen because the div singleton is replacing the element that is being animated or otherwise special-effected.

investigating the way that jquerry allows one to create nodes one discovers that a node can be built before the one you are referencing, after the one you are referencing, or around the one that you are referencing. If done any of these ways the document is going to do what it does when the inners of the code (what the browser does, and what jquerry internals do ) to refresh the page. And so the idea of not having stuff that bounces around the rest ofthe content on the refresh really means that we kind of need a modal box that has no effect on the way that the mouse behaves and is outside of the flow of the page. The silly ness of the 'flow' of the page is not really that silly at all. What else should content do that needs to be provided to users in a way that provides meaning to them. This is not just you, the designer of the content. But imagine someone who is blind and they have to go to this page and understand it's message. It is a message about not bouncing content around when other content presents an 'enlarge' feature. The enlarge feature shouldn't even be there for them at all because it is meaningless to them in the way that they surf this content. Now if there were a device made of half-sphere headed pins that would create a three d contour of the page based upoon some grey-scaling of the content, and that updated in realtime based upon the 'frame' of the browser (they would only be able to take a piece as large as the device that they have that creates this dynamic countor map for them), in that case it might actually be a pretty cool idea to not have that countouring move around all of the other stuff for them. I don't know if such a dynamic countour map generator exists for the blind, but I hope it does. It seems like a fairly obvious marrying of two ideas, those countor devices and a way to set them in realtime using some kind of electro mechanical method.

And if there are any blind folks reading this page, I hope that it is meaningful for you. If it is not maybe I would have a link somewhere, you can find it, and email me with your thoughts:

my email billperilli (at) mindspring.com

chat me up oh you blind readers of this page and let me know if there are devices that let you have dynamic countor maps of content (it would be awesome for pictures of far away clouds and for landscapes. It might also be useful as an embossing device.)

I like that this method doesn't make the rest of the page jump around. But the algorithm needs a lot more work so that the image elements that get put in the document don't go out side the bounds of the screen.

How easy would it be to get this effect on my web site? Just cut and paste the code into my main page? With just a little bit of hacking I was able to hook code to my main site. It doesn't act well, but it kind-of works. It needs more work, obviously.

© 2010, 2012 2013 Amillia Publishing Company. © 2010, 2012 Amillia Publishing Company.