Grid Letter & Photo with Background

Save this script, an image (note size)
a midi and a background image to a folder.

Change the areas in RED as needed.

See the Demo here.

<!-- saved from url=(0022)http://internet.e-mail -->
<HTML><HEAD>
<TITLE></TITLE>
<STYLE>
BODY {
font-size:10pt;
color:#000000;
font-family:arial, tahoma}

.letterStyle {
font-size:12pt;
color:#000000;
font-family:comic sans ms}

</STYLE>
<SCRIPT language=VBS>
'----------------------------------------------------------------------------
' Grid Letter & Photo with Background, by Bill Scott
'----------------------------------------------------------------------------
' All HTML and script by Bill Scott, April, 2000
' billscott@redrivernet.com

' Grid Letter & Photo HTML and Script follows:

Option Explicit

Dim screenx, screeny, proportion
Dim xxtemp, yytemp, tt
Dim photoHeight
Dim startFlag

startFlag=0

' Height of photo proportional to window height.
' Height will be re-adjusted if letter width winds up being less than 350.
photoHeight=.8

Sub Window_OnLoad()
document.body.scroll="no"

startFlag=1
screenx=document.body.clientWidth
screeny=document.body.clientHeight
proportion=Image1.style.posHeight/Image1.style.posWidth

Image1.style.posHeight=(screeny*photoHeight)
Image1.style.zIndex=1

Image1.style.posWidth=Image1.style.posHeight/proportion
if screenx-Image1.style.posWidth-(screenx*.05)<350 then
Image1.style.posWidth=screenx-((screenx*.05)+350)
Image1.style.posHeight=Image1.style.posWidth*proportion
end if
Image1.style.posLeft=(screenx*.95)-Image1.style.posWidth
Image1.style.posTop=(screeny-Image1.style.posHeight)/2

top1.style.posTop=Image1.style.posTop
top1.style.posLeft=0
bottom1.style.posTop=Image1.style.posTop+Image1.style.posHeight
bottom1.style.posLeft=screenx
left1.style.posTop=0
left1.style.posLeft=Image1.style.posLeft
right1.style.posTop=screeny
right1.style.posLeft=Image1.style.posLeft+Image1.style.posWidth
xxtemp=0

top1.style.visibility="visible"

drawLinesTop1
End Sub

Sub drawLinesTop1()
xxtemp=xxtemp+10
if xxtemp>screenx then
top1.style.posWidth=screenx
xxtemp=0
yytemp=screenx
bottom1.style.visibility="visible"
drawLinesBottom1
Exit Sub
end if
top1.style.posWidth=xxtemp
SetTimeOut"drawLinesTop1",0
End Sub

Sub drawLinesBottom1()
xxtemp=xxtemp+10
yytemp=yytemp-10
if yytemp<0 then
bottom1.style.posLeft=0
bottom1.style.posWidth=screenx
xxtemp=0
left1.style.visibility="visible"
drawLinesLeft1
Exit Sub
end if
bottom1.style.posLeft=yytemp
bottom1.style.posWidth=xxtemp
SetTimeOut"drawLinesBottom1",0
End Sub

Sub drawLinesLeft1()
xxtemp=xxtemp+10
if xxtemp>screeny then
left1.style.posHeight=screeny
xxtemp=0
yytemp=screeny
right1.style.visibility="visible"
drawLinesRight1
Exit Sub
end if
left1.style.posHeight=xxtemp
SetTimeOut"drawLinesLeft1",0
End Sub

Sub drawLinesRight1()
xxtemp=xxtemp+10
yytemp=yytemp-10
if yytemp<0 then
right1.style.posTop=0
right1.style.posHeight=screeny
letter.style.posHeight=Image1.style.posHeight
letter.style.posWidth=Image1.style.posLeft
letter.style.posLeft=0
letter.style.posTop=Image1.style.posTop
expandImage1
Exit Sub
end if
right1.style.posTop=yytemp
right1.style.posHeight=xxtemp
SetTimeOut"drawLinesRight1",0
End Sub

Sub expandImage1()
Image1.filters(0).Apply()
Image1.style.visibility="visible"
Image1.filters(0).Transition=5
Image1.filters(0).Play(1.200)
SetTimeOut"showLetter",1200
End Sub

Sub showLetter()
letter.filters(0).Apply()
letter.style.visibility="visible"
letter.filters(0).Transition=6
letter.filters(0).Play(1.200)
End Sub

Sub movText()
if startFlag=0 then Exit Sub
tt=((window.event.y-40)/letter.clientHeight)*(text.scrollHeight-letter.clientHeight)
text.style.top=-tt
End Sub 
</SCRIPT>

<BGSOUND balance=0 loop=99 src="midi.MID" style="DISPLAY: none" volume=0>

</HEAD>

<BODY bgcolor="#ffffff" background="bg.jpg" language=VBS onMouseMove="movText">

<DIV id=top1 style="z-index:100; visibility:hidden; width:0px; HEIGHT: 2px; LEFT: -1800px; POSITION: absolute; TOP: 0px; font-size:1px; line-height:1px; background-color:#000000">&nbsp;</DIV>
<DIV id=bottom1 style="z-index:100; visibility:hidden; width:0px; HEIGHT: 2px; LEFT: -1800px; POSITION: absolute; TOP: 0px; font-size:1px; line-height:1px; background-color:#000000">&nbsp;</DIV>
<DIV id=left1 style="z-index:100; visibility:hidden; width:2px; HEIGHT: 0px; LEFT: -1800px; POSITION: absolute; TOP: 0px; font-size:1px; line-height:1px; background-color:#000000">&nbsp;</DIV>
<DIV id=right1 style="z-index:100; visibility:hidden; width:2px; HEIGHT: 0px; LEFT: -1800px; POSITION: absolute; TOP: 0px; font-size:1px; line-height:1px; background-color:#000000">&nbsp;</DIV>

<IMG id=Image1 src="1.jpg"
style="width:330px; height:450px; filter: revealTrans; visibility:hidden; position:absolute; left:-1800">

<DIV id=letter class=letterStyle style="filter: revealTrans; visibility:hidden; overflow:hidden; width:350px; HEIGHT: 2000px; LEFT:0px; POSITION: absolute; top:0px">
<DIV id=text style="width:90%; HEIGHT:90%; LEFT:5%; POSITION: absolute; top:5%">Sample Text Here. </DIV> </DIV>

<SCRIPT language=JavaScript>
<!--
ScrollSpeed = 275; // milliseconds between scrolls
ScrollChars = 4; // chars scrolled per time period

function SetupTicker() {
// add space to the left of the message
msg = " . . . . Your Message Here . . . . ";
RunTicker();}

function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();

<!-- end -->
</SCRIPT>
<!--VERMEER bot=HTMLMarkup -->
</BODY>
</HTML>