Actually, it would NOT be correct. After you scan them, they are not
business cards. They are images.
So, what you REALLY want to do is to display images scrolling across the top
of the screen. The following is a page I created that does this. Here are
the basics:
1. You need to use the style sheet in the head.
2. The div with class "CardMarquee" contains all of the divs and the
scripting to use. It is absolutely positioned, so you can place it anywhere
in a page (top, bottom, middle, etc.)
3. The number of images is not related to the number of divs. Each div gets
a new image from the list when it disappears off the left side.
4. The width of the area that the divs scroll across is 1280 pixels. Each
div is 252 pixels in width.
5. The space between the divs is calculated based on the number of divs and
the width of each div, so that they will wrap around like a marquee.
6. The variable "started" can be used to stop the scrolling, by setting it
to false.
7. The variable "ct" represents the index in the array of images of the next
image to display. It is the index of the first image that is not in a div
already.
8. The "interval" variable is the interval in milliseconds between calls to
move the divs. You can use this to speed it up or slow it down.
--
HTH,
Kevin Spencer
Microsoft MVP
Printing Components, Email Components,
Networking Components, Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
..CardDiv
{
width: 252px;
height: 148px;
background-color: #000066;
position: absolute;
top: 0px;
left: 1280px;
}
#CardMarquee
{
background-color: #CCFFFF;
border: 1px solid #66CCFF;
width: 100%;
height: 148px;
position: absolute;
top: 50px;
}
body
{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="CardMarquee">
<div class="CardDiv" id="card1"><img src="images/buscard1.jpg"
id="img0"/></div>
<div class="CardDiv" id="card2"><img src="images/buscard2.jpg"
id="img1"/></div>
<div class="CardDiv" id="card3"><img src="images/buscard3.jpg"
id="img2"/></div>
<div class="CardDiv" id="card4"><img src="images/buscard4.jpg"
id="img3"/></div>
<script type="text/javascript"><!--
var aryUrls = new Array();
aryUrls[0] = "images/buscard1.jpg";
aryUrls[1] = "images/buscard2.jpg";
aryUrls[2] = "images/buscard3.jpg";
aryUrls[3] = "images/buscard4.jpg";
aryUrls[4] = "images/buscard5.jpg";
var divs = new Array();
divs[0] = document.getElementById("card1");
divs[1] = document.getElementById("card2");
divs[2] = document.getElementById("card3");
divs[3] = document.getElementById("card4");
var space = 1532 / divs.length;
var start = 1280;
for (i = 0; i < divs.length; i++)
{
divs
.style.left = start + "px";
start += space;
}
var interval = 50;
var ct = 4;
var started = true;
function moveImages()
{
if (!started) return;
var left;
var url = "img";
for (i = 0; i < divs.length; i++)
{
left = divs.offsetLeft - 5;
if (left < -255)
{
left = 1280;
document.getElementById(url + i).src = aryUrls[ct++];
if (ct == aryUrls.length) ct = 0;
}
divs.style.left = left + "px";
}
}
setInterval("moveImages()", interval);
// --></script>
</div>
</body>
</html>