Jump to content
Sign in to follow this  
TheBoz

Movable Zoomed Image without Java?

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,

 

Share this post


Link to post
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;
}

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...