New Topic/Question
Reply
<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>Welcome</TITLE>
<STYLE>
.time {behavior: url(#default#time2);}
#oDiv1
{
font-size:28pt;
font-family: arial;
font-weight:bold;
color: #000000;
background-color: #ffffcc;
border:3px solid gold;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
padding:20px
}
#oDiv2
{
font-family: arial;
font-weight:bold;
font-size: 28pt;
background-color: #e4e4e4;
border:3px solid #666666;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
padding:20px;
color:red
}
#oDiv3
{
color: white;
font-family: arial;
font-weight:bold;
font-size: 28pt;
background-color: #3366CC;
border:3px solid #666666;
padding: 20;
position:absolute;
top:20px;
left:20px;
height:300px;
width:400px;
}
</STYLE>
<script>
function fnGo(direction)
{
// divCollection holds the collection of DIVS in the slide show.
var divCollection = oWrapperDiv.childNodes;
var ColLength = divCollection.length;
for(i=0; i<ColLength; i++)
{
if (divCollection(i).style.zIndex == 2)
{
if (direction == "forward" && i!=2)
{
var next = i + 1;
}
else if (direction == "back" && i!=0)
{
var next = i - 1;
}
else
break;
// Loop below sets all DIVS to low z-index.
for(j=0; j<ColLength; j++)
{
divCollection(j).style.zIndex = 0;
}
// Last DIV is set to next highest z-index.
divCollection(i).style.zIndex = 1;
// The DIV that is to transition in is set to highest z-index.
divCollection(next).style.zIndex = 2;
var transitionFilterCol = divCollection(next).childNodes;
var nextTransitionFilter = new Object();
// Create a reference to the next TRANSITIONFILTER.
nextTransitionFilter = transitionFilterCol(0);
var nextDiv = new Object();
// Create a reference to the next DIV.
nextDiv = divCollection(next);
// Begin the next transitionFilter.
nextTransitionFilter.beginElement();
// Begin the next DIV
nextDiv.beginElement();
break;
}
}
}
</SCRIPT>
<?import namespace = t urn = "urn:schemas-microsoft-com:time"
implementation = "#default#time2" />
</HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">
<BODY BACKGROUND="backgrounds/parchment.gif">
<DIV ID="oWrapperDiv">
<DIV ID="oDiv1" CLASS="time" STYLE="z-index:2">
<t:TRANSITIONFILTER ID="oTran1" BEGIN="indefinite" TYPE="ellipseWipe" DUR="1"/>
<img src="images/dirty_pelican.jpg" width="400" height="265" alt="Dirty Pelican" /><br>
The First One
</DIV>
<DIV ID="oDiv2" CLASS="time" BEGIN="indefinite" STYLE="z-index:1">
<t:TRANSITIONFILTER id="oTran2" BEGIN="indefinite" TYPE="fanWipe" DUR="1"/>
<img src="images/fishing01.jpg" width="400" height="265" alt="Fishing" />
The Second One
</DIV>
<DIV ID="oDiv3" CLASS="time" BEGIN="indefinite" STYLE="z-index:0">
<t:TRANSITIONFILTER ID="oTran3" BEGIN="indefinite" TYPE="pushWipe" DUR="2"/>
<img src="images/Powerboat01.jpg" width="100" height="100" alt="Power Boat" />
The Last One
</DIV>
</DIV>
<BUTTON ID="oForward" onclick="fnGo('forward');" STYLE="position:absolute; top:460;left:100;">Forward</BUTTON><br>
<BUTTON ID="oForward" onclick="fnGo('back');" STYLE="position:absolute; top:460;">Back</BUTTON><br>
</BODY>
</HTML>
the code in my, "mystile.css" is:
table {font-family: Arial; font-size: 16px; font-weight: normal; color:#ffffff;}
select, input {font-family: Arial; font-size: 16px; font-weight: normal; color:#ff0000;}
Thing is I can not figure out what to put in the .css file or how to make the above code work. the images are in a file named "images" located with in the site.
If this is not where I should post this question please forgive me and let me know where to post it.
Thank you in advance
Sammy
MultiQuote
| 