Is it possible to add images outside boundaries, and if so how? (coding)

[DeltaWolf]

Recently I read a comic called Mr. Tambourine Man, which takes place after the canon story's ending. Possible Spoilers for this page and further: http://odditycollector.com/mtm/?s=6&p=I00001
In the comic John goes off the panel and onto the homestuck webpage. I'm wondering if and how you could recreate the effect with mspfa using CSS or JS.

I'm not exactly sure if/where i intend to use it, but it seems like a neat gimmick to use in a comic.
(I assume it has to do with adding new images to the page itself with CSS or JS.)

Any help would be very much appreciated!

[lavendersiren]

When it comes to meta-shenanegans like that, it helps to think a little bit, ahem, out of the box.
You'll likely need to define an invisible box larger than the panel area. This will involve div stuff.
From here, you can either do a pre-baked solution, or a piecemeal solution. the latter tends to be cooler in concept, but harder to pull off. For the pre-baked solution, you would need to make your actual panel the size of the larger invisible box and utilize alpha transparency, having a space the same size as the usual panel size where expected.

I've never done this sorta stuff on mspfa, but I have dabbled with some web design stuff for my own off-site fan-adventures.

When in doubt tho, look things up on w3.

[DeltaWolf]

Thanks for the advice! I've messed with HTML a bit and you can use code to create an image then a modifier to move its location on the page, which is actually pretty easy.

If anyone else is interested, i adapted code from this page for the comic: https://allwebco-templates.com/support/S_add_div.htm

Here's my test page that shows my recreation: https://mspfa.com/?s=36129&p=3

It breaks when you zoom the page however, so be careful.

If anyone wants code, here it is

CSS (for page 3)

Code: Select all

.p3 .mspfalogo {
    background-image: url(https://pipe.miroware.io/5ef38bcdfec54f06f5442694/ProtagonistStory/mspfa/mspfahead.png) !important;
}

.p3 #locator { position: absolute; visibility: visible; left: 600px; top: 1100px; height: 0px; width: 0px; z-index: 0; }

.p3 #locator2 { position: absolute; visibility: visible; left: 600px; top: 400px; height: 0px; width: 0px; z-index: 0; }

Page Code

Code: Select all

[img]https://pipe.miroware.io/5ef38bcdfec54f06f5442694/Other%20stuff%20(Not%20Sburb)/johnstare.png[/img]

<div id="locator">
<img src="http://odditycollector.com/mtm/images/hover2ld.gif"><br>
</div> 
<div id="locator2">
<img src="http://odditycollector.com/mtm/scraps2/arrowd.gif"><br>
</div>

You need both pieces of code to work, you just use the CSS #locator and #locator2 tags to move the arrow and windy boy to different parts of the page.