Scrollable images

Jul 17, 2019

I have a very tall image 800wide 5000high, png format, crisp.

The intent is to add it to a scrollable region in SL.

When the image is added to a page, it is downsized, blury, and not useful.

Reset picture and size option does nothing.

Is there a way to retain the original size for scrolling?

6 Replies
Russell Killips

Hello Sam,

To do this, I usually use a Web Object. The Web Object will automatically get scroll bars if the image is large.

You can use notepad to create a file. Add in this text:

<!DOCTYPE html>
<html>
<body>
<img src="picture.jpg">
</body>
</html>

You can change the img src to the name of your picture.

Then choose file Save As.
Change Save as type: All Files
File name: index.html

Here is an example project for you to look at.

Sam Carter

Thank you for the alternate approach.  We use web objects to scroll pdfs but the pros come with cons.  

The reservation I have with web objects is that they're embedded in the .story and do not update when changes are made to local hard-drive web content. It's necessary to delete the object and recreate the object to do an update.

Russell Killips

With my first example, I noticed that the WebObject couldn't scroll when running on an iPhone in Safari.

I modified the code in the index.html file and it seems to work on my iPhone now.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<html>
<body>
<div style="position:absolute; top:0; bottom:0; right:0; left:0; overflow:auto;">
<img src="picture.jpg">
</div>
</body>
</html>

This discussion is closed. You can start a new discussion or contact Articulate Support.