Ok, following Zefeer's request in
this thread, about adding banners, as well as taglines, here's what I came up with:
What it does is, you provide a series of images and tagline through the profile's notes, and the script randomly chooses 1 of each to display, and changes them at 3 seconds intervals (this can be customized).
Since I'm not exactly a magician of Javascript, this has been made quick and dirty, but it works as intended, even if it's not elegant.
Anyways, here's the script, I'll explain below how to use it.
Quote:
<html>
<head>
<STYLE>
BODY {
padding: 10px;
margin: 0px;
background-color: #000053;
background-repeat: repeat-x;
background-image:url($DPIMAGES.bgimage.jpg);
}
DIV {
position:absolute;
width: 100%;
top: expression((document.body.clientHeight - this.offsetHeight) / 2);
text-align: center;
color: #0f0;
font: bold italic 14pt "Book Antiqua";
}
</STYLE>
<title>Rotating Text</title>
<script type="text/javascript">
<DP NAME="HEADER_VARS" Language="JavaScript" Comments="True" IncludeCast="False" IncludeCrew="False">
/**************************************************/
//------ Configuration block START ------
var Separator = "@" // <-- Set character used as tagline separator
var Interval = 3000;// <-- Set time between change, in milliseconds
var ImagePath = DP_ProgramPathDatabase + "banners\\";
//------ Configuration block END ------
var rotatingTextElement;
var rotatingText = new Array();
var rotatingImageElement;
var rotatingImage = new Array();
function initRotation() {
initRotateText();
initRotateImage();
}
function initRotateText() {
rotatingTextElement = document.getElementById("textToChange");
var tagStart = DP_Notes.toLowerCase().indexOf("\<tagline") + 9;
if (tagStart>8) {
var tagEnd = DP_Notes.toLowerCase().indexOf("\/\>", tagStart);
var tagline = DP_Notes.slice(tagStart, tagEnd);
rotatingText = tagline.split(Separator);
if (rotatingText.length > 1) {
var ctr = Math.floor(Math.random()*(rotatingText.length));
rotatingTextElement.innerHTML = rotatingText[ctr];
setInterval(rotateText, Interval);
} else {
rotatingTextElement.innerHTML = rotatingText[0];
}
} else {
rotatingTextElement.innerHTML = " ";
}
}
function initRotateImage() {
rotatingImageElement = document.getElementById("bannerimage");
var tagStart = DP_Notes.toLowerCase().indexOf("\<bannerimage") + 13;
if (tagStart>12) {
var tagEnd = DP_Notes.toLowerCase().indexOf("\/\>", tagStart);
var tagline = DP_Notes.slice(tagStart, tagEnd);
rotatingImage = tagline.split(Separator);
if (rotatingImage.length > 1) {
var ctr = Math.floor(Math.random()*(rotatingImage.length));
rotatingImageElement.innerHTML = "\<img src='" + ImagePath + rotatingImage[ctr] + "' \>\<br \/\>\<br \/\>";
setInterval(rotateImage, Interval);
} else {
rotatingImageElement.innerHTML = "\<img src='" + ImagePath + rotatingImage[0] + "' \>\<br \/\>\<br \/\>";
}
} else {
rotatingImageElement.innerHTML = " ";
}
}
function rotateText() {
var ctr = Math.floor(Math.random()*(rotatingText.length));
rotatingTextElement.innerHTML = rotatingText[ctr];
}
function rotateImage() {
var ctr = Math.floor(Math.random()*(rotatingImage.length));
rotatingImageElement.innerHTML = "\<img src='" + ImagePath + rotatingImage[ctr] + "' \>\<br \/\>\<br \/\>";
}
window.onload = initRotation;
</script>
</head>
<body scroll="auto">
<div><span id="bannerimage"></span><span id="textToChange"></span></div>
</body>
</html>
So, for the taglines, same as before, put <tagline=Tagline1@Tagline2@Tagline3 />
Where Tagline[1,2,3] are the actual text of the taglines.
For the banner, if you omit it, nothing will be shown. But, if you want to show images, here's what you have to do:
1. Download the image you want to use, and place it in a folder called "banners" under the main database path. So, if you database if in the default location, this would be under "My Documents\DVD Profiler\Databases\Default\banners"
2. Take note of the filename, and enter that into the note section as such:
<bannerimage=image01.jpg@image02.jpg@image03.jpg />
Just replace the individual file names withthe actual names, separated with a @
Enjoy!