Adding a slideshow in HTML

SheenaD · 01-07-2013, 06:54 PM

Hi,

I need help please.
I'm new to web design and I've been trying all day to add a simple slide show to my site.
I want the slide show to appear next to my company logo and one at a time fade in and out.
What am I doing worng?
One image appears the other two I want is not.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Jozi Model Management: Modelling, promotional & casting agency</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=960, user-scalable=yes"/><title>Index</title>
<link rel="stylesheet" href="common.css?version=15" type="text/css" />
<link rel="stylesheet" href="Index.css?version=15" type="text/css" />
<style type="text/css">
body,td,th {
font-family: "Arial Black", Gadget, sans-serif;
font-size: medium;
color: #D4AF37;
}
body {
background-color: #000;
}
</style>

</head>
<body>

<img id="Image_1" src="Images/JoziModelManagementLogo.jpg" />

<ul id="navbar_25">
<li><a href="Index.html">Home</a></li>
<li><a href="Page 1 Models.html">Models</a>
<ul>
<li><a href="Page 1.1 Models males.html">Males</a></li>
<li><a href="Page 1.2 Models females.html">Females</a></li>
<li><a href="Page 1.3 Models kids.html">Kids</a></li>
</ul>
</li>
<li><a href="Page 2 Characters.html">Characters</a>
<ul>
<li><a href="Page 1.1 Models males.html">Males</a></li>
<li><a href="Page 1.2 Models females.html">Females</a></li>
<li><a href="Page 1.3 Models kids.html">Kids</a></li>
</ul>
</li>
<li><a href="Become a Model.html">Become a Model</a></li>
<li><a href="Booking Form.html">Booking Form</a></li>
<li><a href="News and Events.html">News and Events</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

<A HREF="Images/slideshow/IMG_3037900.jpg" onMouseOver="status=url[ct];return true;"
onMouseOut="status=''">
<IMG SRC="Images/slideshow/IMG_0172_900.jpg" NAME="Ad_Image" width="240" height="360" BORDER=0 align="right">
</A>

thank you in advance

Old Pedant · 01-08-2013, 07:05 PM

Ummm...that code is *ANCIENT*. You need to find some more modern code.

In any case, that code makes NO ATTEMPT AT ALL to "fade in" the images. It will only do a WHAM! change the image instantly.

sunfighter · 01-08-2013, 07:23 PM

Things are easier to read and copy if placed in the {code} tags generated by the # located above you in the Message box. This is how the code looks with your logo on top and to the left and a place for a slide show next to it. I left your code for the menu and js alone. Get a slide show that fades in and out here http://www.flabell.com/flash/Fade-In...-Slideshow-282

Code:

<!DOCTYPE html>
<html>
<head>

<title>Jozi Model Management: Modelling, promotional & casting agency</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=960, user-scalable=yes"><title>Index</title>
<link rel="stylesheet" href="common.css?version=15" type="text/css">
<link rel="stylesheet" href="Index.css?version=15" type="text/css">
<style type="text/css">
body,td,th {
font-family: "Arial Black", Gadget, sans-serif;
font-size: medium;
color: #D4AF37;
}
body {
background-color: #000;
}
</style>

</head>
<body>

<div>
  <img id="Image_1" src="Images/JoziModelManagementLogo.jpg" width="240px" height="360px" style="float:left;">

  <a href="images/slideshow/img_3037900.jpg" onmouseover="status=url[ct];return true;" onmouseout="status=''">
  <img src="Images/slideshow/IMG_0172_900.jpg" id="ad_image" width="240" height="360" style="float:left;">
  </a>
</div>

<div style="clear:both;" >
<ul id="navbar_25">
	<li><a href="Index.html">Home</a></li>
	<li><a href="Page 1 Models.html">Models</a>
	<ul>
		<li><a href="Page 1.1 Models males.html">Males</a></li>
		<li><a href="Page 1.2 Models females.html">Females</a></li>
		<li><a href="Page 1.3 Models kids.html">Kids</a></li>
	</ul>
	</li>
	<li><a href="Page 2 Characters.html">Characters</a>
	<ul>
		<li><a href="Page 1.1 Models males.html">Males</a></li>
		<li><a href="Page 1.2 Models females.html">Females</a></li>
		<li><a href="Page 1.3 Models kids.html">Kids</a></li>
	</ul>
	</li>
	<li><a href="Become a Model.html">Become a Model</a></li>
	<li><a href="Booking Form.html">Booking Form</a></li>
	<li><a href="News and Events.html">News and Events</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>
</div>

<script>
/*
Script by FPMC at http://jsarchive.8m.com
Submitted to JavaScript Kit (http://javascriptkit.com)
For this and 400+ free scripts, visit http://javascriptkit.com
*/
src = ["IMG_3037900.jpg", "IMG_0172_900.jpg", "_DSC0965v11"]
url = ["Images/slideshow/IMG_3037900.jpg", "Images/slideshow/IMG_0172_900.jpg", "Images/slideshow/_DSC0965v11"]
duration = 4;

//Please do not edit below
ads=[]; ct=0;
function switchAd()
{
	var n=(ct+1)%src.length;
	if (ads[n] && (ads[n].complete || ads[n].complete==null))
	{
		document["Ad_Image"].src = ads[ct=n].src;
	}
	ads[n=(ct+1)%src.length] = new Image;
	ads[n].src = src[n];
	setTimeout("switchAd()",duration*1000);
}
function doLink()
{
	location.href = url[ct];
}
onload = function()
{
	if (document.images)
		switchAd();
}
</script>
</body>
</html>

And the bullets are showing. Please do not double post http://www.codingforums.com/showthread.php?t=285453 You get too many answers that don't make sense.