Jump to content

Movable Zoomed Image without Java?


TheBoz

Recommended Posts

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,

 

Link to comment
Share on other sites

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;
}
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...