HTML - Adding <a Href Or Image Map To An Image Puts 3px L/r Padding On Image

I have a page that has an image aligned left with padding and text to the right. The text includes a bulleted list. However, the bullets are showing up misaligned with the rest of the text. Please see the attached screenshot.

I had a similar problem when I tried to wrap text that included a bulleted list in <blockquote> tags.

Thanks!

Hi.

For some strange reason, in my <div class="footer"> and <div class="content">

When I add:

HTML SHEET
.footer {
padding: 10px;
background-image: url(images/images1.png);
background-repeat: repeat-x;
background-position: top;
}

CSS SHEET
.content {
padding: 10px;
background-image: url(images/images1.png);
background-repeat: repeat-x;
background-position: bottom;
}

The padding moves the background images 10px, up or down!

Appreciate any help.
God bless.
In Christ Jesus, Karl.

I i open this code in FF i get some padding on the left side of the image which is ok, but when i open it in IE i don't get this padding.
Is there any way that I have this padding in IE?
thanks
Code:

<div align="justify"><img src="http://www.site.com/default1.gif" style="padding-left:27px;" alt="Cleveland" align="right" width="152" height="136" border="0" />
<p> Ticketchest.com is the Number   One provider of Major League Baseball tickets in the United States.   You came to the right place for great Cleveland Indians tickets -- close   to the field or anywhere you desire.   Ticketchest.com has a huge   supply of great tickets to sold-out or hard-to-get Cleveland Indians   baseball games. <br>
</p>
<p>Whether you need group tickets   for a professional or corporate outing or just a pair of tickets, The   Ticket Chest is your source for the best Cleveland Indians baseball   tickets on demand. Also, check into our other Major League Baseball   teams.  We do the hard work so you can focus on eating peanuts. <br>
</p>
</div>

Hi all --

I'm having a problem. I have a series of 8 images that make up my navigation bar for the website I'm making. Each image has an <a href=" ... > </a> tag around it. I have zeroed out all of the padding/margins/borders on all of the images (in CSS and HTML). The problem I'm having is that a 2-3px padding is showing up to the left of each image, but only in Internet Explorer. Firefox and Chrome do not show the padding. To clarify, I DO NOT want the padding to be displayed.

Here is my CSS:

Code:

<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background-image: url(images/nav/blue/blue.bg.png);
	background-repeat: repeat;
	background-color: #009;
}
.oneColFixCtr #container {
	width: 1000px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding: inherit
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding: 0px;
	border: 0px;
}
.oneColFixCtr #mainContent {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
body, td, th {
	color: #333;
}
a img {
	border:none;
	padding:0;
	margin:0;
	float:left;
}
a:link {
	color: #009;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #000053;
}
a:hover {
	text-decoration: underline;
	color: #009;
}
a:active {
	text-decoration: none;
	color: #009;
}
-->
</style>

and the <img src=" ... "> code:

Code:

	<!-- MAIN NAVIGATION BANNER -->
	<!--HOME-->
	<a href="index.php"><img src="images/nav/blue/home_select.png" alt="home" name="home" width="82" height="30" border="0" id="home" onmouseover="document.images.home.src='images/nav/blue/home_over.png'" onmouseout ="document.images.home.src='images/nav/blue/home_select.png'"/></a>
	<!--PROGRAMS-->
	<a href="programs.php"><img src="images/nav/blue/programs.png" alt="programs" name="programs" width="111" height="30" border="0" id="programs" onmouseover="document.images.programs.src='images/nav/blue/programs_over.png'" onmouseout ="document.images.programs.src='images/nav/blue/programs.png'"/></a>
	<!--SCHEDULE OF EVENTS-->
	<a href="schedule.php"><img src="images/nav/blue/scheduleofevents.png" alt="schedule of events" name="scheduleofevents" width="189" height="30" border="0" id="scheduleofevents" onmouseover="document.images.scheduleofevents.src='images/nav/blue/scheduleofevents_over.png'" onmouseout ="document.images.scheduleofevents.src='images/nav/blue/scheduleofevents.png'"/></a>
	<!--CONTACT US-->
	<a href="contact.php"><img src="images/nav/blue/contactus.png" alt="contact us" name="contactus" width="119" height="30" border="0" id="contactus" onmouseover="document.images.contactus.src='images/nav/blue/contactus_over.png'" onmouseout ="document.images.contactus.src='images/nav/blue/contactus.png'"/></a>
	<!--DOWNLOADS-->
	<a href="downloads.php"><img src="images/nav/blue/downloads.png" alt="downloads" name="downloads" width="267" height="30" border="0" id="downloads" onmouseover="document.images.downloads.src='images/nav/blue/downloads_over.png'" onmouseout ="document.images.downloads.src='images/nav/blue/downloads.png'"/></a>
	<!--FACEBOOK-->
	<a href="javascript:void(0)"
onclick="window.open('http://www.facebook.com/pages/Delhi-NY/Delaware-County-Public-Health-Nursing-Service/247460644781?ref=ts')"><img src="images/nav/blue/facebook.png" alt="facebook" name="facebook" width="90" height="30" border="0" id="facebook" onmouseover="document.images.facebook.src='images/nav/blue/facebook_over.png'" onmouseout ="document.images.facebook.src='images/nav/blue/facebook.png'"/></a>
	<!--TWITTER-->
	<a href="javascript:void(0)"
onclick="window.open('http://www.twitter.com/dcphns')"><img src="images/nav/blue/twitter.png" alt="twitter" name="twitter" width="67" height="30" border="0" id="twitter" onmouseover="document.images.twitter.src='images/nav/blue/twitter_over.png'" onmouseout ="document.images.twitter.src='images/nav/blue/twitter.png'"/></a>
	<!--BLOGGER-->
	<a href="javascript:void(0)"
onclick="window.open('http://dcph.blogspot.com')"><img src="images/nav/blue/blogger.png" alt="blog" name="blogger" width="75" height="30" border="0" id="blogger" onmouseover="document.images.blogger.src='images/nav/blue/blogger_over.png'" onmouseout ="document.images.blogger.src='images/nav/blue/blogger.png'"/></a>

I know it's a bit of a mess.. but regardless, I cannot figure out why this happens.. any ideas?

my problem is ie and its padding, ie has add a 4px padding at the bottom of the of the image but in safari and firefox there is no padding.

here is the url so u understand what i mean

http://nathanoconnor.co.uk/gilbertelectrical/site/

hi people,
i have this code

Code:

	<tr valign=\"top\">
						<td align=\"center\" width=\"1%\"><a href=\"preview.php?id=".$arrayId[$scriptOffset+1]."&ref=browse&offset=".$scriptOffset."\"><img src=\"thumb/".$arrayImage[$scriptOffset+1]."\" STYLE=\"border: none;\"></a></td>
						<td  ><font face=\"verdana\" size=\"2\"><b><i>Nume:<br>Marime:<br>Format:<br>Cat.:</i></b></font></td>
						<td ><font face=\"verdana\" size=\"2\"><i>".$arrayName[$scriptOffset+1]."<br>".$arraySize[$scriptOffset+1]."<br>".$arrayFormat[$scriptOffset+1]."<br>".$arrayCatagory[$scriptOffset+1]."</i></font></td>
						<td ><font face=\"verdana\" size=\"2\"><a border='0' href=\"preview.php?id=".$arrayId[$scriptOffset+1]."&ref=browse&offset=".$scriptOffset."\" ><img src=\"images/descarca.jpg\" STYLE=\"border: none;\"></a></font></td>
					</tr>

and i wanna to add an image here



can somebody tell me how to add the image in the html code?

I'm fairly new to HTML and need help with adding text below the images I have. I am running a white backround with a gray box that has six images side by side. I want to add text below each image in the background. Can anyone hel me?

This is what I have without text so far

<td><table width="100%" border="0" cellspacing="10" cellpadding="25">


<P> &nbsp;
<strong>Padholdr tablet styles</strong><td class="greybox"<td align="middle"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images4med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images4med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images3med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/ipad-web-images2med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/xoom5med.jpg" width="144" height="108"><img src="http://padholdr.com/wp-content/uploads/2011/03/x1med.jpg" width="144" height="108"></td></caption>
</tr>
</table></td>

Hello everyone,

I am trying to partially hide an image in a table cell. In other words, I don't want the part that is supposed to be hidden to show on the adjacent cells. How do I do that

Any help would be greatly appreciated.

I am trying to add an image to a site that my company recently purchased. This will be the only thing on the site and I assumed it would be fairly easy...

The code I have is:

<head>

</head>

<body>

<img src="gg_lightsout_teaser_web.jpg" width="1650" height="1275" alt="none" />

</body>

</html>

Anyone see the issue? I have not done HTML in a long time... Thanks!!

My Headfirst book on page 404 says to add the background-image property to a paragraph so I add the code for that and a few other changes highlighted in bold in last paragraph but it doesn't show the image on the browser and the css validator does not show it as an error, also what I don't understand is why there are THREE classes with the same name [.guarantee] in this stylesheet? The url is:

file:///C:/Headfirst/HFHTML_ch10/lounge/lounge.html

body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

h1, h2 {
color: #007e7e;
}

h1 {
font-size: 150%;
}

h2 {
font-size: 130%;
}

.guarantee {
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman, Times, serif;
font-color: #444444
body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

h1, h2 {
color: #007e7e;
}

h1 {
font-size: 150%;
}

h2 {
font-size: 130%;
}

.guarantee {
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman, Times, serif;
font-color: #444444
body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 1.6em;
}

h1, h2 {
color: #007e7e;
}

h1 {
font-size: 150%;
}

h2 {
font-size: 130%;
}

.guarantee {
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman, Times, serif;
font-color: #444444
background-image: url (images/background.gif) ;
}

So in January 2006 I posted a question about "making two buttons in one"



3 years and 5 months later i am happy to announce that I have found a solution.

Ok, so no I have not spent the last three years looking, but the need for one came around again yesterday so I revisited the project. All I needed was "simple" image toggle. Image 'A' click it once it changes to image 'B' click it again it changes back to image 'A'

All the "image toggle" codes I could find were extremely complex. I thought I had finally found one, it wasn't perfect, but it was the smallest and most basic thing I could find.

HTML Code:

<html>
<head>
<style type="text/css">
.on {background-image:url(playlist_btn.png); background-repeat:no-repeat;}
.off {background-image:url(playlist_btn_x.png); background-repeat:no-repeat;}
</style>

<script language="javascript">
function togglestyle(el){if(el.className == "on") {el.className="off";} else {el.className="on";}}
</script>

</head>

<body>
<div id="onoff" class="playlist_btn"><img src="blank.gif" width="50 height="50" onclick="togglestyle(onoff)"></div>
</body>
</html>

I tested it, it worked, so I considered problem solved. I placed it in my page and nothing. Turns out it wont work with a doc type - so it's useless.

Other problems, I'm not big on using "blank gif's" unless I have to, if you want multiple image toggles you need a new JS function for each one, and two lines of css as well. And, though I rarely use image rollovers anymore, it would certainly not be possible in this method.

So it was back to the drawing board. Well, I had actually already found the solution a few minuets prior to finding out that the above code is so good. I had coded a button that on rollover shows a tooltip, when you click the button, the text in the tool tip, changes, chick again and it reverts. All done with a simple showHide javascript function, that i am finfing out has many uses.

here is the awesome code:
Code:

function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document.getElementById(elementid).style.display = '';
} else {
document.getElementById(elementid).style.display = 'none';
}
}

function hideShow(elementid){
if (document.getElementById(elementid).style.display == ''){
document.getElementById(elementid).style.display = 'none';
} else {
document.getElementById(elementid).style.display = '';
}
}

I wont take credit for the showHide code, but I will take credit for the hideShow portion, obviously a monkey could have coded the revers, but iot does make it that much more universal. As the original code was designed to show something that was hidden, add the revers to hide something that is showing and it's perfect.

Now I will take a moment to say, though I have yet to find a problem with the code, it seems to work in most browsers, firefox, ie, safari, and validates for WC3 - In sure it has it's flaws. Until now, to show and hide divs I had used the MM_showHideLayers JavaScript function, which by default used the visibility style. It is of course a good script, and has many uses, it's not very big, but it is somewhat complex. The other thing to think about is that invisible objects still take up space. That's what is cool about the display:none: style, is that is not only invisible but it doesn't take up space.

So here is how I used the above to JavaScript to make a simple onclick image toggle:

HTML Code:

<img id="on" src="on.png" width="50" height="50" onClick="javascript:hideShow('on'); javascript:showHide('off')" alt="on">
<img id="off" src="off.png" width="50" height="50" onClick="javascript:hideShow('off'); javascript:showHide('plus')" style="display:none;" alt="off">

Cool huh? Now this example does not have a rollover either, but since it uses to individual images and is not replacing one image wioth another you could easily apply a rollover to both images. But, hold on, look at the above code, isn't that essentially a rollover? Change the first onClick to onMouseOver and the second to onMouseOut and look at that a 'brand new' method for mouseovers.

So lets take a look at this for a second, and compare MM_swapImage to this new hideShow method. As far as CSS rollovers I definitely prefer them to the MM_swapImage method, as they use a minimal amount of code. However they actually take a lot of math, construction the buttons is somewhat tedious, because css buttons use 1 image and change it's position, to work well you have to use a "blank.gif" and the the css can really add up if you have a lot of buttons:

Also, you can't go directly to a button in the document, you have to fish through the css to make any adjustments. But they are fast, they don't need to be preloaded and... they are pretty cool. But anyway, swapImage and hideShow...



The left is the MM_swapImage method. Now when you use the swapImage js you also have to use MM_swapImgRestore, MM_findObj, MM_preloadImages. You don't have to use the preload script but it does make thing work faster... supposedly, but that requires a onload script in the body tag, and if you have a lot of rollovers your body tag can get really long really quick. So what are the advantages, well we know for sure it works, and you only need on image in the document, however actualy having the image you are "swapping" too actually in the document can add functionality.

So as you can see, on the right, the showHide method is, in total code, much smaller. True you do need to use two images, so the total code in the body is longer but, it's more than evened out bu the minimal JavaScript, and I think it's worth it. You don't need to use a preloader, you have full control over both images, the up and over state, and unlike the swapImage method, though it's rare you would need to, your up and over images can actually be different sizes, which is kind of cool.

So here's the basic code for a rollover:
HTML Code:

<img id="up" src="up.png" width="50" height="50" onMouseOver="javascript:hideShow('up'); javascript:showHide('over')" alt="up">
<a href="http://google.com"><img id="over" src="over.png" width="50" height="50" onMouseOut="javascript:hideShow('over'); javascript:showHide('up')" style="display:none;" alt="over" border="0"></a>

To add a link the button you just apply it to the "over state" image. And unlike swapImage, though it is overkill, you can also add a "downstate" image quite easily.

So, back to the on/off button here is how you would code it using showHide with rollovers.
HTML Code:

<img id="on" src="on.png" width="50" height="50" onMouseOver="javascript:hideShow('on'); javascript:showHide('onover')" alt="on">
<img id="onover" src="on_over.png" width="50" height="50" onMouseOut="javascript:hideShow('onover'); javascript:showHide('on')" onClick="javascript:hideShow('onover'); javascript:showHide('offover')"  style="display:none;" alt="onover">
<img id="off" src="off.png" width="50" height="50" onMouseOver="javascript:hideShow('off'); javascript:showHide('offover')" style="display:none;" alt="off">
<img id="offover" src="off_over.png" width="50" height="50" style="display:none;" onMouseout="javascript:hideShow('offover'); javascript:showHide('off')" onClick="javascript:hideShow('onover'); javascript:showHide('off')"alt="offover">

So here is what is going on:
you have the upstate on.png image, when you mouse over it on.png is hidden and on_over.png is displayed. When you click on_over.png it is hidden and off_over.png is display, mouse off it and off.png is displayed. Make scene?

Now be aware, when you click, you are also in a scene "mousing off" so some flickering can occur. Firefox handles everything pretty well, IE and Safari not so much. When you click the on_over.png the click tells it to hide on_over.png and show the off_over.png, at the same time the mouseoff tells it to hide on_over.png and show the on.png. So fortunately the toggle with rollovers isn't perfect, but perhaps some more tweaking of the code or maybe, in this case swapImage would work better to do the rollovers...

But all in all I'd say its a solid concept. If you feel compiled to do so, reply with any comments, concerns or flaws you see.

I have the following Web Page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body >
<div style="margin:auto;text-align:center">
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
</div></body>

</html>

If I add another DIV with an image inside it, the images all move to the left by 8 to 10 pixels. This is the second version of the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="en-gb" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>

<body >
<div style="margin:auto;text-align:center">
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
<div><img height="227" src="Images/2010BikeRide_BestTeamRU_360x227.jpg" width="360" /></div>
</div></body>

</html>

I have no idea why the page center moves to the left, but it means that I can't get my page banner to appear the same on every page. (I've stripped out all the extra content and codes to just leave the offending images.)

I primarily use Firefox, but the same is happening in IE and Opera.

Can anybody tell me what's happening?

(I apologise if this is a well known, frequently asked question, but I couldn't find an answer and this is driving me up the wall, so any help is appreciated.)

Hey guys. I need a little help with my HTML image rotator.

Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated.

Code:

<!DOCTYPE html>
<html>
<head>
	<title>...</title>
	<style>
		#sliderwrap {
			height: 403px;
		}
		#sliderleft {
			width: 10px;
			height: 100%;
			float: left;
			background: #efefef;
			border: 1px solid #ccc;
		}
		#sliderleft div {
			height: 100px;
			border-bottom: 1px solid black;
		}
		#slidercontent {
			position: relative;
			width: 650px;
			height: 100%;
			float: left;
			border: 1px solid black;
			overflow: hidden;
		}
		#sliderimages {
			position: absolute;
			-webkit-transition: all .5s ease-in-out;
			-moz-transition:    all .5s ease-in-out;
			-ms-transition:     all .5s ease-in-out;
			-o-transition:      all .5s ease-in-out;
			transition:         all .5s ease-in-out;
		}
		#sliderimages img {
			display: block;
		}
		.s0 #slide0,
		.s1 #slide1,
		.s2 #slide2,
		.s3 #slide3 {
			background: #ccc;
		}
		.s0 #sliderimages {top:     0  }
		.s1 #sliderimages {top:  -500px}
		.s2 #sliderimages {top: -1000px}
		.s3 #sliderimages {top: -1500px}
	</style>
	<script>
		var slide = 0;
		var interval_id = 0;

		function stop_timer() {
			clearInterval(interval_id);
			if (this.getAttribute("data-slide")) {
				slide = parseInt(this.getAttribute("data-slide"));
				document.getElementById("sliderwrap").className = "s" + slide;
			}
		}

		function start_timer() {
                        clearInterval(interval_id);
			interval_id = setInterval(
				function() {
					slide = (slide + 1) % 4;
					document.getElementById("sliderwrap").className = "s" + slide;
				},
				3000
			);
		}

		window.onload = function() {
			start_timer();
			var el = document.getElementById("slidercontent");
			var divs = document.getElementById("sliderleft").getElementsByTagName("div");
			for (var i = 0; i < divs.length; i++) {
				divs[i].onmouseover = stop_timer;
				divs[i].onmouseout = start_timer;
			}
			el.onmouseover = stop_timer;
			el.onmouseout = start_timer;
		}
	</script>
</head>

<body>
	<div id="sliderwrap" class="s0">
		<div id="sliderleft">
			<div id="slide0" data-slide="0"></div>
			<div id="slide1" data-slide="1"></div>
			<div id="slide2" data-slide="2"></div>
			<div id="slide3" data-slide="3"></div>
		</div>
		<div id="slidercontent">
			<div id="sliderimages">
				<img src="http://i.imgur.com/8iWz6.jpg">
				<img src="http://i.imgur.com/1d2U6.jpg">
				<img src="http://i.imgur.com/8iWz6.jpg">
				<img src="http://i.imgur.com/1d2U6.jpg">
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
</body>
</html>

the title makes it sounds really confusing.
Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another.

The code is -

HTML Code:

// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg'
Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg'
Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg'
Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg' 


// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);

Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one)

can anyone help me?

Hi All

This is my first post so i hope I provide all the info you need, to be able to help.

I am working inside Macromedia UltraDev as this is waht I was taught with over a decade ago.

Problem started when I set a fixed background image to the page . . . dropdown menu still displays, but everything else (text & pics) in table seem to be hiddden behind the background image.

here is the code
HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="0">


<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
</style>

<link rel="stylesheet" type="text/css" href="dropdown/dropdown.css" />
<script src="dropdown/btp.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-au">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Barcaldine Tourist Park</title>


</head>



<body>

<div align="center">  <center>
    <table width="1000" border="0" cellpadding="0" height="100%">
      <tr> 
        <td height="54" colspan="2"> 
          <div align="center">
            <h1><font face="Georgia, Times New Roman, Times, serif" size="+7">Barcaldine 
              Tourist Park</font></h1>
          </div>
        </td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td height="146" colspan="2"> <span class="preload1"></span> <span class="preload2"></span> 
          <ul id="nav">
            <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
            <li class="top"><a href="#nogo2" class="top_link"><span>Park Features</span></a></li>
            <li class="top"><a href="#nogo22" class="top_link"><span>Accommodation</span></a></li>
            <li class="top"><a href="#nogo27" class="top_link"><span>Our Tarrifs</span></a></li>
            <li class="top"><a href="#nogo57" class="top_link"><span>Special Offers 
              </span></a></li>
            <li class="top"><a href="#nogo57" class="top_link"><span>Local Photos</span></a></li>
            <li class="top"><a href="#nogo57" class="top_link"><span>Contact Us</span></a></li>
            <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Local 
              Attractions</span></a> 
              <ul class="sub">
                <li><a href="#nogo54">Australian Workers Heritage Centre</a></li>
                <li><a href="#nogo55">Tree of Knowledge</a></li>
                <li><a href="#nogo56">Artesian Country Tours</a></li>
              </ul>
            </li>
          </ul>
        </td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td rowspan="2" width="99">&nbsp;</td>
      </tr>
      <tr> 
        <td rowspan="5" width="895" bgcolor="#FFFFFF"> 
          <div align="center"></div>
        </td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td width="99">&nbsp;</td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td width="99">&nbsp;</td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td width="99">&nbsp;</td>
      </tr>
      <tr bgcolor="#FFFFFF"> 
        <td width="99" height="23">&nbsp;</td>
      </tr>
    </table>
  </center></div>
  
<div id="page-background"><img src="images/bg.jpg" width="100%" height="100%" alt="Smile"></div>
	<div id="content">
	</div>

</body>



</html>