As some of you know, using the clear screen function causes the online player to undo any CSS rules.

To try and get around that I thought about using a 0 opacity.

What I want to do is have my title image fade-in, wait for a key press, then move the player to the first room after first hiding the title image with opacity.

Here's what I have so far (forget the first two lines of JS - they're for something else):

JS.eval ("getCSSRule('a.cmdlink').style.color='#000000'")
JS.setCommandBarStyle (GetCurrentTextFormat("") + ";border:" + game.defaultbackground)
OutputTextNoBr (game.css)
OutputTextNoBr ("<img src=\"" + GetFileURL("aftermath_title.jpg") + "\" id=\"titleimage\" onload=\"$(this).fadeIn(7000);\">")
wait {
  if (game.lastoutputsection > 1) {
    JS.eval ("$('.section"+(game.lastoutputsection-1)+"').css('opacity', '0');")
    MoveObject (player, room)
  }
}

I don't get any errors on this, but all that happens after I key press, is that the flashing cursor shows up waiting for a command. The title image doesn't disappear and I don;t get a description for my first room (in fact I don;t think it;s moving me)

Instead of opacity you could try to use sections, something like this (not tested):

OutputTextNoBr (game.css)
newsection = StartNewOutputSection()
OutputTextNoBr ("<img src=\"" + GetFileURL("aftermath_title.jpg") + "\" id=\"titleimage\" onload=\"$(this).fadeIn(7000);\">")
EndOutputSection (newsection)
wait {
  HideOutputSection (newsection)
  MoveObject(player,room2)
}

Instead of this:

JS.eval ("$('.section"+(game.lastoutputsection-1)+"').css('opacity', '0');")

you can also use:

JS.eval ("$('#titleimage').css('opacity', '0');")

since your image has an id. You should also be able to do this:

JS.eval ("$('#titleimage').fadeOut(0);")

which will not only set its opacity to 0, but (I believe) remove the element altogether. (I'd have to verify that, but it's what I remember.)

Thank you, both. I must admit I didn't try all of these, but for simplicity I went for J's very last method and it worked like a charm! The room description displays where the title image was, so I think that confirms your suspicion that it removes it altogether.

It really is very frustrating not understanding JS. I hunted high and low for an answer through google last night, and while there were plenty of 'hide image with javascript' results, I couldn't dig out the code I needed.

Thanks again.

Incidently, for the reason I stated in my first sentence about the issue with clear screen, how would I use this as a general alternative to it? What I mean is if I wanted a general clear screen during my game, how might I do that using this method?

That's trickier. It's easy to get rid of a single element that you know about. It's harder to get rid of a whole bunch of other ones but leave the one you want (the CSS div).

What I'd do instead is replace the ClearScreen function like so:

  <function name="ClearScreen">
    request (ClearScreen, "")
    OutputTextNoBr (game.css)
  </function>

That does the usual request to clear the screen and then additionally outputs the CSS again.

Then just use ClearScreen as you normally would.

Brilliant! This answers another question I had about creating some film-like titles.