Tag: leg

While modernizing the My Broken Leg page I decided it would be nice to show the large version of the page’s images when users hover over the thumbnails, rather than requiring them to click the thumbnails and be taken to another page. Of course, doing this required my first foray into using JavaScript within a web page.  I believe it’s best to learn new languages and tools while trying to accomplish something specific, so this was actually a great opportunity.  Not only did I learn a lot about some specific aspects of JavaScript, but I got a good feel for using it in general.

The functionality is written so that a web page uses a single function to create the “active” thumbnail, passing a unique root name of an image and an alternative text string.  The function adds a named thumbnail to the page and listens for the appropriate events in order to show and hide the large image as needed.  Obviously, the thumbnails and large images need to use the same root file names and be stored in known locations, so the solution isn’t completely generalized.

A more challenging aspect of the project was getting the images to show up in desirable locations.  For instance, if the thumbnail appears in the upper left part of the window and there is room to show the full image at the same position, then that is the most desirable location.  If the thumbnail is at the right or bottom of the window, then aligning the large image with other edges of the thumbnail would be better.  Making these decisions requires knowing the size of the image before it is shown.

A web search turned up many questions about the best way to find an unloaded image’s size and the answers suggested a number of different approaches.  I did not have success listening to the image’s “loaded” event, as the image size was usually not updated by the time the event was fired.  Instead, I went with the approach of polling the image size during loading to see when it had changed (this happens only at the end of the load).  This eventually required creating a new image object each time an large picture was to be shown, rather than changing the source of an existing image object.  Using new images made it easy to see when the size changed from zero to non-zero.

Another interesting problem turned up when I decided to let users dismiss the large images not only by moving the cursor out of them but by clicking the mouse.  If the cursor was still over the thumbnail, the large image would be shown again immediately!  Solving this required keeping a list of all active thumbnail images and checking the mouse position vs all of their bounds whenever a large image is dismissed with a click.  If the mouse is over a thumbnail at that time, a different state is entered that disallows showing a large image until the mouse leaves the thumbnail.

I’m pretty happy with the results.  They seem fast on my PC, but I will have to check out the behavior on a touch screen device.  The ability to click a thumbnail to see the large image was left intact, so that might still work on touchscreens.  I will probably use a technique similar to this on some other pages in order to show the description of a page when the user hovers over a link to it.

The My Broken Leg page was one of the more visited parts of my site back in the day.  I often received emails from people who had recently broken their leg and were looking for information about what lay ahead for them. At the time, there weren’t very many medical resources available online, but things are much better now.  I rarely get emails about my broken leg anymore, but still want to share whatever information I can.

I performed the standard cleanup to this page – splitting style out into a CSS file, removing broken links, adding a bit of new information.  I also noticed that both the thumbnails and linked images on this page were relics of a time when screens were smaller and downloads were slower. I made the thumbnails larger so they show up better, but the source images (scanned from photos and X-rays) are still a bit smaller than I’d like.  In a future change I hope to show these larger images as overlays when the user hovers over a thumbnail.

This is the first time I used floats to place images on one or both sides of a block of text.  I ran into a bit of a problem with text that extended below the images, as it started filling in the area below the images.  This was particularly bad for the list text.  I found that using overflow: hidden was the right way to prevent this, though the name of that command suggests it would do something different (like hide the overflow!).