HTML - Broken Image

I just uploaded my site to a new host (my onld one closed down) and I'm having a problem with on of the internal links. It works fine on with the files on my computer, but when it got uploaded, it stoped working.... Ive deleted and re-uploaded both the target page and the one with the link and i cant figure it out.... any help would be much appresheated (sp?)

http://dragons-lair.ifastnet.com/ the "cool links" on the navigation bar is the one im having trouble with. Also If anyone has time, could you check thre whoel site for broken links..... im one dial-up (crappy dial-up at that) and the pages load VERY slowly

This is the webpage I'm updating for someone:
http://savannahrhythms.ca/events.html

In Firefox it looks perfect but in IE, two random images on the left side cannot show and the big poster on the right isn't flush with the top...
WHAT DO I DO TO FIX THIS PLEASE??

Hey, i want to have a button which when pressed notifies me, it is to tell me if a link is broken. I dont want it to open a new page though.

Thanks in advance.

Help. I made this page for a client but he tells me it is misaligned when he browses the page on his mac(both firefox and safari)

http://www.freewebs.com/fernandosdesign/detox.html

It looks perfectly fine on a pc (firefox and ie) any idea whats happening and how I can correct this issue?

Thanks guys

http://www.freewebs.com/fernandosdesign/detox.html

On our website, when it switches to HTTPS, some images are broken... but it is at random. The next page load, the broken images are just fine... but others that were fine are now broken.

Any idea how this happens?

Everything works fine on FireFox, this is only on IE. I am using IE6.0 on WinXP. Perhaps it is just my browser settings causing this issue?

To see it, you can access our website:

www.frpgames.com

add any product to your shopping cart, click on the checkout cart, then click the checkout button, then click "Checkout without account". That should be the first secure page.

Any help would be great! This issue is driving me crazy.

I finished building my roll-out menus for firefox, but they're not working in IE. Moreover they get stacked on top of eachother instead of next to eachother.

http://www.problem-solving.be/dir0

Can anyone help me how to solve it? Here's the related CSS:

Code:

/* Drop-down menu */
.nav2 {}
.nav2 ul {
	list-style-type:none;
}
.nav2 ul li {
	float:left;
	position:relative; 
	z-index:auto !important /*Non-IE6*/; 
	z-index:1000 /*IE6*/;
 	background: #C7D0D7; /*url(images/css/css_cat_light.jpg) repeat-x;*/
	left:-20;
}
.nav2 ul li a {
	float:none !important /*Non-IE6*/; 
	float:left /*IE-6*/; 
	display:block; 
	height:28px; 
	width:90px;
	line-height:28px; 
	padding:0 20px 0 20px;
	text-decoration:none; 
	font-weight:bold; 
	color: #006699;
}
.nav2 ul li ul {
	display:none; 
	border:none;
}

/* Non-IE6 hovering */
.nav2 ul li:hover a {
	text-decoration: none;
}
.nav2 ul li:hover ul {
	display:block; 
	position:absolute; 
	z-index:999; 
	top:3.0em-6; 
	left:-20;
}
.nav2 ul li:hover ul li a {
	display:block; 
	width:88px; 
	height:auto; 
	line-height:1em; 
	/*margin-left:50px;*/ 
	padding:2px 20px 2px 20px; 
	border-left:solid 1px rgb(175,175,175); 
	border-right:solid 1px rgb(175,175,175); 
	border-bottom: solid 1px rgb(175,175,175);
	background-color:#EFEFEF; 
	font-weight:normal; 
	color:rgb(50,50,50);
}
.nav2 ul li:hover ul li a:hover {
	background-color:#FFFFFF;
}
.nav2 ul li a:hover {
	/*background: #DFDFEF;*/ /*#006699;*/ /*url(images/css/css_cat.jpg) repeat-x; */
	/*color:#DEEEF3;*/
}

.nav2 table {position:absolute; top:0; left:0; border-collapse:collapse;}
.nav2 ul li a:hover ul {display:block; position:absolute; z-index:999; top:3.1em; t\op:3.0em; left:0; marg\in-top:0.1em;}
.nav2 ul li a:hover ul li a {display:block; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px rgb(175,175,175); border-bottom: solid 1px rgb(175,175,175); background-color:rgb(237,237,237); font-weight:normal; color:rgb(50,50,50);} /*Color subcells normal mode*/
.nav2 ul li a:hover ul li a:hover {background-color:rgb(210,210,210); text-decoration:none;} /*Color subcells hovering mode*/

Thanks!

Hello webMasters!! I had a problem with my website the other day and someone helped me fix it almost immediately! THANK YOU! I came across another problem, this one is particularly tricky because I cannot find where the code is broken. . . under my website on this link. .. http://www.rentxotic.com/?page=exotic-car-fleet you will see some pictures of cars. Originally if you were to mouse over the cars, some specs would pop up. Now for some reason I do not know why the specs dont pop up when you mouse over. I saw all the code, I am a novice but nothing pops out at me that looks wrong. Would appreciate any help!!!!

- Ryan

Hi Im new on here but am posting because my webmaster bailed on me and Im trying to fix a problem on my website. . .

On my homepage I have a footer that is not appearing in the bottom of the page, it's in the middle and is very annoying because my HOME page looks unprofessional. . . Can anyone help me on how to fix this. My home page is www.rentxotic.com when you go there you will see what I mean. . . Thanks for any help.

Hello everyone, I've been racing to learn html/css in the past couple weeks to throw up a website, and so far so good.
But: I've searched the internet and I cannot find an answer to my questions.

The page in question is:
http://www.andrew.cmu.edu/user/jonmille/projects.html
style sheet (relevant section is in the "Programming: List Settings" section)
http://www.andrew.cmu.edu/user/jonmille/style.css

You can see that the gray borders under the text/images have a small break in them. I assume it has something to do with the fact that I'm using two columns. How do I fix this and make a solid border (in a non hackish way)?
Note: if you say "use css/divs," I wrestled with those for about two hours before I gave up and made a table.

Secondly, in IE7, all the images/text are completely flushed left, ignoring the table padding. How can I fix this?
Note, I've never checked this site in IE6 or below, and never will, so if it looks wrong in IE6, then the user doesn't deserve to see my site anyway.

Thanks for your time!
Jon

Hello there,

My index page validates completely since I tidied it up using html tidy, but when i run it through browsershots it is still completely broken in firefox, opera, etc. basically anything other than MSIE it displays incorrectly.

If anyone could shed any potential light on the situation it would be greatly appreciated. As you can no doubt tell, I'm no expert on creating web pages using html and css and if a page validates but still doesn't work I can't even begin to try and work out what is going on

I did run my css through a validator and it came up with 30 or so instances of the same error, I hadn't ended a dimension value with px, i had just left the number, could this be the culprit? I have since corrected my style sheet so that it validates completely but I cannot upload from my FTP on the PC i'm currently using to see if it affects the browsershots results.

I just wanted to put it out there and see what the ideas were of people who know a lot more about website building than I do.

Bottom line: if i have an html page and a css page that validate 100% using the w3c standard is it guaranteed to work in all browsers, or are there quirky little things I need to be aware of when wanting my site to display correctly in less popular browsers such as safari etc.?

Any feedback is greatly appreciated. :-)

Sincere thanks in advance,



Alex


Browser screenshots - http://browsershots.org/http://www.alexhaines.co.uk/

HTML Validity results - http://validator.w3.org/check?uri=http%3A%2F%2Fwww.alexhaines.co.uk%2Findex.html&charset=%28detect+automatically%29&doctype= Inline&group=0

CSS Validity results - http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.alexhaines.co.uk%2Fstyle.css&profile=css21&usermedium=all&warning=1&l ang=en

My site - http://www.alexhaines.co.uk

Can someone please tell me why only the /features.html page of my site in IE shows up broken like the picture I have provided below along with the source code? All the other pages in IE show up fine. And ALL the pages show up fine in Chrome and Fox. Again all the pages show fine in IE except http://www.richandbalanced.com/features.html
I checked the html and the layout is the same for everypage I think? Please help, and thanks.




Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<html>

<head><title>Rich and Balanced&trade;</title>

<meta name="description" content="Start Creating the Life of Your Dreams Today!" >
<meta name="keywords" content="Rich, Balanced, Life, Money, Health" >
<meta name="author" content="Samuel Sweis" >

</head>

<link rel="shortcut icon" href="image-files/"> 

<link rel="stylesheet" type="text/css" href="support-files/style.css"> 
 
<body> 

<a href="http://www.richandbalanced.com"><img class="displayed" src="image-files/richandbalanced.jpg" width="498" height="108" alt="Rich and Balanced logo" border="0"><a/>
 <div class="reight">


<div id="rbleft_sidebar">
<br /><br /><br />
<p class="welcometab"><a class="lb" href="index.html">Welcome</a> &nbsp &nbsp</p>
<p class="exploretab"><a class="lb" href="rich.html">Overview</a> &nbsp &nbsp</p>
<p class="estore"><a class="lb" href="rich.html">eStore</a> &nbsp &nbsp</p>
</div> 


<div id="rbcontent"> 
<h1>Rich and Balanced</h1>
<p>
Have you ever asked yourself:  Am I eating healthy?  Am I in shape?  Am I making enough money?  Am I getting what I'm worth?  Am I amongst loving family and friends?  Am I doing a good job as a parent?  Am I surrounding myself with positive music?  Am I reading enough?  Am I reading the right types of books?  Am I taking care of myself?  Am I worried about what others think?  Am I seeing the big picture?
</p>

<p>
The features available to you through Rich and Balanced&trade; answer them all.  Click on any of the exclusive and custom content links listed below to experience a preview:
</p>

<h1>Exclusive & Custom</h1>
<p>
&middot; <a href="nutrition.html">Healthy Premium Recipes for your Nutrtion</a> [Updated Monthly]<br />
&middot; <a href="features.html">Workouts for your Fitness</a> [Updated Monthly] <br />
&middot; <a href="features.html">Money plans for your Financial Growth</a> [Updated Monthly] <br />
&middot; <a href="features.html">Growing Love Filled Relationships</a> [Updated Monthly] <br />
&middot; <a href="features.html">Inspiring with Parenting</a> [Updated Monthly] <br />
&middot; <a href="features.html">Audio for your Listening</a> [Updated Monthly] <br />
&middot; <a href="features.html">Music for your Enjoyment</a> [Updated Monthly] <br />
&middot; <a href="features.html">Literature for your Reading</a> [Updated Monthly] <br />
&middot; <a href="features.html">Message Board Forums for your Interaction</a> [Updated Monthly] <br />
&middot; <a href="features.html">Questions Archived with Answers</a> [Updated Monthly] <br />
&middot; <a href="features.html">How to Guides covering The Rich and Balanced Areas&trade;</a> [Updated Monthly] <br />
</p>

<p>
Have any questions?  Comments?  Suggestions?  Feel free to use the "Send Me A Message" tab located in the upper right hand side of this page.  For information on obtaining full access to Rich and Balanced&trade; <a href="fullaccess.html">click here</a>.
</p>

</div>
 
<div id="rbright_sidebar">
<br /><br /><br />
<p class="messageme"><a class="lb" href="message.html">&nbsp &nbsp Send Me A Message</a></p>
<p class="features"><a class="lb" href="features.html">&nbsp &nbsp Features</a></p>


</div> 

<div id="rbfooter">

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=205838536125629&amp;xfbml=1"></script><fb:like href="facebook.com/richandbalanced" send="true" layout="button_count" width="15" show_faces="true" font=""></fb:like></div>
</div> 

</div>

<iframe src="balanced.html" width="100%" height="100" frameborder="0"></iframe>

</body>
</html>

Hi all --

I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.

I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.

I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.

Help! How do I get rid of this white space but still keep the link on the image??

[I posted this question on the Adobe forum to no avail, below is a screencap I took of the issue I'm having]

Thanks in advance!
//kl

PS - I am using both IE8 and Chrome to view this webpage. I've set all the margins/padding/borders to 0px. Here is my CSS and the part of the code that pertains to the navigation banner.

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/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 */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.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;
}
#main_banner2 {
margin: 0px;
padding: 0px;
height: auto;
width: 1000px;
}
-->
</style>
 
</head>

Nav Banner:
NOTE:: below HAS to be all one paragraph because if i insert a carriage return in between images, it also adds the white space...
Code:

<body class="oneColFixCtr">
 
<!-- MAIN NAVIGATION BANNER -->  
<!--HOME--><img src="images/nav/home.png" alt="home" name="home" width="82" height="30" border="0" onMouseOver="document.images.home.src='images/nav/home_over.png'" onMouseOut ="document.images.home.src='images/nav/home.png'"/><!--PROGRAMS--><img src="images/nav/programs.png" width="111" height="30" border="0" name="programs" onMouseOver="document.images.programs.src='images/nav/programs_over.png'" onMouseOut ="document.images.programs.src='images/nav/programs.png'"/><!--SCHEDULE OF EVENTS--><img src="images/nav/scheduleofevents.png" width="189" height="30" border="0" name="scheduleofevents" onMouseOver="document.images.scheduleofevents.src='images/nav/scheduleofevents_ over.png'" onMouseOut ="document.images.scheduleofevents.src='images/nav/scheduleofevents.png'"/><!-- CONTACT US--><img src="images/nav/contactus.png" width="119" height="30" border="0" name="contactus" onMouseOver="document.images.contactus.src='images/nav/contactus_over.png'" onMouseOut ="document.images.contactus.src='images/nav/contactus.png'"/><!--DOWNLOADS--><i mg src="images/nav/downloads.png" width="267" height="30" border="0" name="downloads" onMouseOver="document.images.downloads.src='images/nav/downloads_over.png'" onMouseOut ="document.images.downloads.src='images/nav/downloads.png'"/><!--FACEBOOK--><im g src="images/nav/facebook.png" width="90" height="30" border="0" name="facebook" onMouseOver="document.images.facebook.src='images/nav/facebook_over.png'" onMouseOut ="document.images.facebook.src='images/nav/facebook.png'"/><!--TWITTER--><img src="images/nav/twitter.png" width="67" height="30" border="0" name="twitter" onMouseOver="document.images.twitter.src='images/nav/twitter_over.png'" onMouseOut ="document.images.twitter.src='images/nav/twitter.png'"/><!--BLOGGER--><img src="images/nav/blogger.png" width="75" height="30" border="0" name="blogger" onMouseOver="document.images.blogger.src='images/nav/blogger_over.png'" onMouseOut ="document.images.blogger.src='images/nav/blogger.png'"/><img src="images/home_banner.png" alt="home_border" width="1000" height="7" /><br />

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.

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?