There was a post about this a long time ago answered by The Pixie with:

JS.eval ("$('<div id=\"imagediv\" />').insertBefore('#status');")
JS.eval ("$('#imagediv').html('<img src=\"" + GetFileURL("mbase.png") + "\" id=\"image1\" /><img src=\"" + GetFileURL("m_red_cape.png") + "\" id=\"image2\" /><img src=\"" + GetFileURL("m_green_uw.png") + "\" id=\"image3\" />')")
JS.eval ("$('#image1').css('position', 'fixed')")
JS.eval ("$('#image1').css('top', '0px')")
JS.eval ("$('#image1').css('left', '0px')")
JS.eval ("$('#image2').css('position', 'fixed')")
JS.eval ("$('#image2').css('top', '0px')")
JS.eval ("$('#image2').css('left', '0px')")
JS.eval ("$('#image3').css('position', 'fixed')")
JS.eval ("$('#image3').css('top', '0px')")
JS.eval ("$('#image3').css('left', '0px')")

This is great and I managed to use it with some trial and error, I want to get the same effect but with the images in line with the text like when you use "Show a picture". As it is it's more like an entirely new layer.

I did get closer when I swapped ('position', 'fixed') for ('position', 'relative') (I also removed the left and top attributes and added height and width ones) because this made the images part of the text but placed the images above all the text rather than as the next part of the structure. Another thing I tried was changing insertBefore to insertAfter just to see if I could figure out what #status is but it didn't change anything.

I've made some progress, I added divOutputAlign1 here, Now I need to figure out how to make it the last test entered rather than that spesific part of text.
JS.eval ("$('<div id=\"imagediv\" />').insertAfter('#divOutputAlign1');")

Is there an alternative to insertAfter() that puts things inside a div?

Hello.

Is there an alternative to insertAfter() that puts things inside a div?

Yes, but you'd need to know the ID of the element (or the class and such) so you could use JS to target and manipulate it.

Are you wanting to change the display settings of the image after the text has already printed? Or are you just wanting to display the image with custom CSS?

If the former, you'll have to stick with JS.

If the latter, it would probably be easier to just code it in HTML alongside whatever text prints to the screen.

Sorry to be so vague, but you'll have to be more specific if you want solid answers.

Also, here's a link to a page concerning images in the documentation:

http://docs.textadventures.co.uk/quest/images.html

Now I need to figure out how to make it the last test entered rather than that spesific part of text.

I think you could use the selector '#divOutput div:last' in this case.

Is there an alternative to insertAfter() that puts things inside a div?

appendTo() inserts something inside the specified element at the end. Or prependTo() if you want it to be before the div's existing contents.

JS.eval ("$('<div id=\"imagediv\" />').insertAfter('#divOutput div:last');")
JS.eval ("$('#imagediv').html('<img src=\"" + GetFileURL("48046d09fc7f79cbfc4bd39e6a9ba6bb.jpg") + "\" id=\"image1\" /><img src=\"" + GetFileURL("hydtama_ref.png") + "\" id=\"image2\" /><img src=\"" + GetFileURL("Soldier76-portrait.png") + "\" id=\"image3\" />')")
JS.eval ("$('#image1').css('position', 'relative')")
JS.eval ("$('#image1').css('height', '300px')")
JS.eval ("$('#image1').css('width', '900px')")
JS.eval ("$('#image2').css('position', 'relative')")
JS.eval ("$('#image2').css('height', '300px')")
JS.eval ("$('#image2').css('width', '300px')")
JS.eval ("$('#image3').css('position', 'relative')")
JS.eval ("$('#image3').css('height', '300px')")
JS.eval ("$('#image3').css('width', '300px')")

This all works fine but I need to get it to be able to make more than one set of images. It creates the images just as I want them but then if you try to fire the same function again it does nothing, I think the images flicker a little bit some times.