Movable Zoomed Image without Java?

[TheBoz]

I am in the process of learning CSS and creating a stand alone web page for a kiosk at our school district. The site houses senior class composite photos (so one large photo with all the students in the class in it). I am currently inserting the full size .jpg in the page with an img tag and then I am using enlarge on hover to make the photo bigger. Once it enlarges it, it is static though, you can only see the part of the photo that fits on the screen. I need the users to be able to move the enlarged photo around (via touchscreen) so they can find the person they are looking for. Is this possible without having to use javascript?

 

Thanks,

 

[Ingolme]

If you put the image inside a container with overflow: auto, scrollbars will appear. On most touch screen devices boxes with scroll bars let you tap and drag to move the content within it.

 

HTML

<div class="pan">
  <img src="file.jpg" alt="My photograph">
</div>

CSS

.pan {
  width: 900px;
  height: 500px;
  overflow: auto;
}

[TheBoz]

Thank you, I tried your code and it worked as you described. I was hoping for something that is a little more seamless. I am afraid some users will only see what is on the screen and not realize they can move around using the scroll bars as intuitive as it may seem. Is there a way to easily split the picture into say 6 zones and use the enlarge on hover command that way?

[Ingolme]

Not without Javascript.