Before I can write about the specific requirements of the photo editing, I need to describe in detail the functionality of the page. I did not have any control or access to the Epoiesen site,1 and so I worked from a less-is-more mindset in developing the essay’s web functionality.
The entire time I had wanted to include some mouseover feature that would change the image, and I had assumed it would work by swapping the images whole cloth.2 Instead, when fishing around Google for useful code snippets, I learned of sprite functionality in web design.3 Sprite design, as I understood it then, used a single image that has been cropped to show one part of the image and then, when the proper input is directed, would crop to a different part of the image.
The code I wrote does this for images that are very particularly sized:
.crop {
width: 433px;
overflow: hidden;
}
.horizcrop {
width: 1299px;
overflow: hidden;
}
.position {
object-position:0 0 0 0;
}
.position:hover {
object-position: -433px;
}
.position:active {
object-position: -866px;
}
.horizposition {
object-position:0 0 0 0;
}
.horizposition:hover {
object-position: -1299px;
}
.horizposition:active{
object-position: -2598px;
}
This block of code in the .css file works in concert with the code for embedding the image in a web page’s .html, and the original source also included instructions for Epoiesen’s editor:
// This is a template for how to input the images uses the DO_Mouseover.css //
<div class="crop"> // This will crop a portrait orientation image to be 433px in width / /
<img src="Images/Gottheil_IllustratedSkinDiseases_1906_217_Combined.png" width="1299" height="595" alt="" class="position"/> // This points to the image and its basic img settings. The important addition is the class="position", because this will add the mouseover and click function.
</div>
<div class="horizcrop"> //This is the same div class as above, but works for the landscape orientation. //
<img src="Images/Darier_TextBookDermatology_1920 59_Combined.png" width="3897" height="595" alt="" class="horizposition"/> //same as before but using the class="horizposition" instead //
</div>
The way these two pieces of code interact creates the cropped field of view which can only see one third of a total image. When a user mouses over the image—signified in the .css file as “[divclass]:hover”—or clicks on it—“[divclass]:active”—the file is recropped to show a different part of the full image. Importantly, a standard for portrait or landscape images had to be developed separately, because the images had different image widths.
I write this section partly to codify my method (X.3.1), but also to stress a base groundwork for the production of these images: I wanted to create a double transformation—one for the initial mouseover, and a second for a mouse click. I worked on this simple code in tandem with the selection of images for the photo essay.
Although if required, I am sure the editor of the journal, Shawn Graham would have made arrangements. ↩
An interesting note here is that the dissertation website’s opacity function actually does this process of swapping images, but required some Javascript knowledge. I did not have knowledge about this process then (and I still do not know it now). ↩
I have long lost this source. It might have been on Stack Overflow or perhaps Reddit. ↩
This dissertation examines the ways human subjects were turned into research objects as part of the war against tuberculosis.
Sean Purcell,2023 - 2025. Community-Archive Jekyll Theme by Kalani Craig is licensed under CC BY-NC-SA 4.0
Framework: Foundation 6.