modified example

hello

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

Abstract El Capitan. The world is lines of fire. The ridge is a line of fire. © 2011, 2012, 2013 APC APC

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

  • Read the width
  • store the value
  • scale the value by some percentage

    • the on leave function

  • write the old width back into the width to scale the image back to original size

    • 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

  • how to get a location on a screen and come up with the offset of where that div should go when it is absolutly placed (outside of the 'flow') by the onhover enter function.

    • maybe that is as easy as just getting the pointer coordinates

    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.