Place a small picutre in the top right corner

ericgonzp

Hey all, I am trying to place an ever changing emoticon in the top right corner, to help display emotions, which is quite important for what I am creating. I did what I would normally do in HTML, and when I test Twine all I get is a broken image link in the top right. My twine is using Harlowe syntax, so that may be cause the issue.
Thanks

My CSS

	
	#content {
    position: relative;
}

#content img {
    position: absolute;
    top: 0px;
    right: 0px;
}

Inserted into the Twine Editing box, first line

<div id="content">
    <img src="smile/smile.jpg" class="ribbon"/>
</div>

greyelf

If you wish to use locally referenced images files then I suggest you do the following:

1. Create a new folder/directory on your local hard-drive, you will use this folder/directory store all the files used by / related to your story. I am going to name the new folder/directory mystory in these instructions.

2. Place all the media (image, audio, video) files you want to use in your story in the new mystory folder/directory. eg. your smile.jpg file.

3. Change your img element to the following:

<img src="smile.jpg" class="ribbon"/>

4. Use the Publish to File option to generate a Story HTML file, which you need to save in the new mystory folder/directory.

5. Open the HTML file in your web-browser and your media files should work correctly.
eg. your smile.jpg file should appear.

note: Some people prefer to store their media files separately to their Story HTML file, to do this simply create a media folder/directory within the mystory folder/directory. Next move all the media files in the mystory folder/directory into the new media folder/directory, and finally append "media/" to the start of any media file reference in your story.
eg.

Change
<img src="smile.jpg" class="ribbon"/>

to be
<img src="media/smile.jpg" class="ribbon"/>

ericgonzp

Thanks a lot Grey Elf, I take it that my problem was the fact that I didn't try publishing the file, after I did, it worked perfectly. I'll keep working on this. Thanks