Spawn_of_Chaos97
Trainz for Everyone!
Umm...it appears that you have commented out the two bits of code at the top that actually set up the buttons to begin with...fix that and you should be fine lol...
Website HTML
- Thread starter Lo_Poly
- Start date
- Status
What? I've left all the necessary code there for it to work. Why can't I have more than one image change on rollover?
Not exactly the best way to do things but this will work as you want.
Add this in the head tag:
And this where you want the links:
Simply put, to add more images just do the following. In the first section between the <style type="text/css"> and </style> add this as such:
And in the links area <div class="nav-links"> etc, after </a> you add the hyperlink to the page, so:
Substitute LINK_NAME with the name you want to use and IMAGE_NAME and IMAGE_HIGHLIGHT_NAME upload the images and it'll all load and change when you scroll over.
Works in FireFox 2 and Internet Explorer 7, as I said, not really a good solution but it should do...
Add this in the head tag:
HTML:
<style type="text/css">
body
{
background-color:#ffffff;
background-image:url(header.png); background-repeat: repeat-x;
}
div.nav-links a {
float: left;
margin-right: 2px;
text-decoration: none;
}
a.nav-home {
background-image: url('http://www.freewebs.com/urbantrainz/home1.png');
height: 52px;
width: 120px;
display: block;
border: 0px solid;
}
a.nav-home:hover {
background-image: url('http://www.freewebs.com/urbantrainz/home2.png');
border: 0px solid;
}
a.nav-projects {
background-image: url('http://www.freewebs.com/urbantrainz/projects1.png');
height: 52px;
width: 193px;
display: block;
border: 0px solid;
}
a.nav-projects:hover {
background-image: url('http://www.freewebs.com/urbantrainz/projects2.png');
border: 0px solid;
}
</style>
HTML:
<div class="nav-links">
<a class="nav-home" href="http://www.freewebs.com/urbantrainz/home.html"> </a>
<a class="nav-projects" href="http://www.freewebs.com/urbantrainz/projects.html"> </a>
</div>
<br style="clear: left;" />
HTML:
a.nav-LINK_NAME {
background-image: url('http://www.freewebs.com/urbantrainz/IMAGE_NAME.png');
height: 52px;
width: 193px;
display: block;
border: 0px solid;
}
a.nav-LINK_NAME:hover {
background-image: url('http://www.freewebs.com/urbantrainz/IMAGE_HIGHLIGHT_NAME.png');
border: 0px solid;
}
HTML:
<a class="nav-LINK_NAME" href="http://www.freewebs.com/urbantrainz/PAGE_NAME.html"> </a>Works in FireFox 2 and Internet Explorer 7, as I said, not really a good solution but it should do...
It works... omg thanks. :udrool::udrool::udrool:
Also, how do I get arid of that small space between the two buttons?
Remove "margin-right: 2px;" from "div.nav-links a".
Wow! Thank you AGAIN! :udrool:
Is it possible you might know how to move those buttons to above the "UrbanTrainz" logo (to the top of the page, originating from left)?
Edit: Also, I just noticed that when I roll my cursor over the image for the first time (since the page is loaded) instead of changing to what I want it to it disappears. Can I fix this?
Last edited:
Wow! Thank you AGAIN! :udrool:
Is it possible you might know how to move those buttons to above the "UrbanTrainz" logo (to the top of the page, originating from left)?
Edit: Also, I just noticed that when I roll my cursor over the image for the first time (since the page is loaded) instead of changing to what I want it to it disappears. Can I fix this?
Remove <center> and </center> from the source code and it'll start from the left. The reason the images do that when you scroll over is because it has to load them first (each and every time, lol). Look into/google javascript and preloading of images, that might be able to fix the problem for you.
Google keeps bringing back irrelevant results. I swear, they've broke their algorithm or something.
How do make an image preload?
Also, Deadly, that's not what I meant...
^ That is what I was aiming for.
AussieNightcrawler
Trainz Everywhere...
Hi,
To preload an image you could use a simular code to waht I gave to you previously, to preload multiple images you could use womething like this:
Naturally, change image1.gif & image2.gif to your images, copy this section:
And alter as needed.
To preload an image you could use a simular code to waht I gave to you previously, to preload multiple images you could use womething like this:
Code:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "image1.gif";
image2 = new Image();
image2.src = "image2.gif";
// End -->
</script>Naturally, change image1.gif & image2.gif to your images, copy this section:
Code:
image2 = new Image();
image2.src = "image2.gif";And alter as needed.
Thanks again, it fixed it.
Still what about that thing with the buttons above the UrbanTrainz logo?
Edit: Malfunction! The last 3 images are messed up, why??
http://www.freewebs.com/urbantrainz/home.html
HTML:
<html>
<head><center>
<LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico">
<title>UrbanTrainz - Main page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "http://www.freewebs.com/urbantrainz/home2.png";
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/projects2.png";'
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/downloads2.png";
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/forum2.png";
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/chat2.png";
// End -->
</script>
<style type="text/css"> body { background-color:#ffffff; background-image:url(header.png); background-repeat: repeat-x; } div.nav-links a { float: left; text-decoration: none; } a.nav-home { background-image: url('http://www.freewebs.com/urbantrainz/home1.png'); height: 52px; width: 120px; display: block; border: 0px solid; } a.nav-home:hover { background-image: url('http://www.freewebs.com/urbantrainz/home2.png'); border: 0px solid; } a.nav-projects { background-image: url('http://www.freewebs.com/urbantrainz/projects1.png'); height: 52px; width: 193px; display: block; border: 0px solid; } a.nav-projects:hover { background-image: url('http://www.freewebs.com/urbantrainz/projects2.png'); border: 0px solid; } a.nav-LINK_NAME {
background-image: url('http://www.freewebs.com/urbantrainz/downloads1.png');
height: 52px;
width: 235px;
display: block;
border: 0px solid;
}
a.nav-LINK_NAME:hover {
background-image: url('http://www.freewebs.com/urbantrainz/downloads2.png');
border: 0px solid;
}
a.nav-LINK_NAME {
background-image: url('http://www.freewebs.com/urbantrainz/forum1.png');
height: 52px;
width: 139px;
display: block;
border: 0px solid;
}
a.nav-LINK_NAME:hover {
background-image: url('http://www.freewebs.com/urbantrainz/forum2.png');
border: 0px solid;
}
a.nav-LINK_NAME {
background-image: url('http://www.freewebs.com/urbantrainz/chat1.png');
height: 52px;
width: 101px;
display: block;
border: 0px solid;
}
a.nav-LINK_NAME:hover {
background-image: url('http://www.freewebs.com/urbantrainz/chat2.png');
border: 0px solid;
}</style>
<br><br><p></p><p></p><p></p>
<img src="logoonly.png">
</center>
</head>
<body>
<font face="Verdana">
<div class="nav-links"> <a class="nav-home" href="http://www.freewebs.com/urbantrainz/home.html"> </a> <a class="nav-projects" href="http://www.freewebs.com/urbantrainz/projects.html"> </a> </div> <br style="clear: left;" /> <a class="nav-downloads" href="http://www.freewebs.com/urbantrainz/downloads.html"> </a> <a class="nav-forum" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a> <a class="nav-chat" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a>
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_angleblue.js">
</script>
</font>
</body>
</html>
Last edited:
AussieNightcrawler
Trainz Everywhere...
You need to change the image2 line as well, look at your code, you have image2 listed 4 times:
image2 = new Image();
this needs to change also, to:
image1 = new Image();
image2 = new Image();
image3 = new Image();
image4 = new Image();
image5 = new Image();
image6 = new Image();
And so on for each image, so your HTML should be:
That should work...
image2 = new Image();
this needs to change also, to:
image1 = new Image();
image2 = new Image();
image3 = new Image();
image4 = new Image();
image5 = new Image();
image6 = new Image();
And so on for each image, so your HTML should be:
Code:
<html>
<head><center>
<LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico">
<title>UrbanTrainz - Main page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "http://www.freewebs.com/urbantrainz/home2.png";
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/projects2.png";'
image3 = new Image();
image3.src = "http://www.freewebs.com/urbantrainz/downloads2.png";
image4 = new Image();
image4.src = "http://www.freewebs.com/urbantrainz/forum2.png";
image5 = new Image();
image5.src = "http://www.freewebs.com/urbantrainz/chat2.png";
// End -->
</script>
<style type="text/css"> body { background-color:#ffffff; background-image:url(header.png); background-repeat: repeat-x; } div.nav-links a { float: left; text-decoration: none; } a.nav-home { background-image: url('http://www.freewebs.com/urbantrainz/home1.png'); height: 52px; width: 120px; display: block; border: 0px solid; } a.nav-home:hover { background-image: url('http://www.freewebs.com/urbantrainz/home2.png'); border: 0px solid; } a.nav-projects { background-image: url('http://www.freewebs.com/urbantrainz/projects1.png'); height: 52px; width: 193px; display: block; border: 0px solid; } a.nav-projects:hover { background-image: url('http://www.freewebs.com/urbantrainz/projects2.png'); border: 0px solid; } a.nav-LINK_NAME {
background-image: url('http://www.freewebs.com/urbantrainz/downloads1.png');
height: 52px;
width: 235px;
display: block;
border: 0px solid;
}
a.nav-LINK_NAME:hover {
background-image: url('http://www.freewebs.com/urbantrainz/downloads2.png');
border: 0px solid;
}
a.nav-LINK_NAME {
background-image: url('http://www.freewebs.com/urbantrainz/forum1.png');
height: 52px;
width: 139px;
display: block;
border: 0px solid;
}
a.nav-LINK_NAME:hover {
background-image: url('http://www.freewebs.com/urbantrainz/forum2.png');
border: 0px solid;
}
a.nav-LINK_NAME {
background-image: url('http://www.freewebs.com/urbantrainz/chat1.png');
height: 52px;
width: 101px;
display: block;
border: 0px solid;
}
a.nav-LINK_NAME:hover {
background-image: url('http://www.freewebs.com/urbantrainz/chat2.png');
border: 0px solid;
}</style>
<br><br><p></p><p></p><p></p>
<img src="logoonly.png">
</center>
</head>
<body>
<font face="Verdana">
<div class="nav-links"> <a class="nav-home" href="http://www.freewebs.com/urbantrainz/home.html"> </a> <a class="nav-projects" href="http://www.freewebs.com/urbantrainz/projects.html"> </a> </div> <br style="clear: left;" /> <a class="nav-downloads" href="http://www.freewebs.com/urbantrainz/downloads.html"> </a> <a class="nav-forum" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a> <a class="nav-chat" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a>
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_angleblue.js">
</script>
</font>
</body>
</html>That should work...
You need to change the image2 line as well, look at your code, you have image2 listed 4 times:
image2 = new Image();
this needs to change also, to:
image1 = new Image();
image2 = new Image();
image3 = new Image();
image4 = new Image();
image5 = new Image();
image6 = new Image();
And so on for each image, so your HTML should be:
That should work...Code:<html> <head><center> <LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico"> <title>UrbanTrainz - Main page</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin image1 = new Image(); image1.src = "http://www.freewebs.com/urbantrainz/home2.png"; image2 = new Image(); image2.src = "http://www.freewebs.com/urbantrainz/projects2.png";' image3 = new Image(); image3.src = "http://www.freewebs.com/urbantrainz/downloads2.png"; image4 = new Image(); image4.src = "http://www.freewebs.com/urbantrainz/forum2.png"; image5 = new Image(); image5.src = "http://www.freewebs.com/urbantrainz/chat2.png"; // End --> </script> <style type="text/css"> body { background-color:#ffffff; background-image:url(header.png); background-repeat: repeat-x; } div.nav-links a { float: left; text-decoration: none; } a.nav-home { background-image: url('http://www.freewebs.com/urbantrainz/home1.png'); height: 52px; width: 120px; display: block; border: 0px solid; } a.nav-home:hover { background-image: url('http://www.freewebs.com/urbantrainz/home2.png'); border: 0px solid; } a.nav-projects { background-image: url('http://www.freewebs.com/urbantrainz/projects1.png'); height: 52px; width: 193px; display: block; border: 0px solid; } a.nav-projects:hover { background-image: url('http://www.freewebs.com/urbantrainz/projects2.png'); border: 0px solid; } a.nav-LINK_NAME { background-image: url('http://www.freewebs.com/urbantrainz/downloads1.png'); height: 52px; width: 235px; display: block; border: 0px solid; } a.nav-LINK_NAME:hover { background-image: url('http://www.freewebs.com/urbantrainz/downloads2.png'); border: 0px solid; } a.nav-LINK_NAME { background-image: url('http://www.freewebs.com/urbantrainz/forum1.png'); height: 52px; width: 139px; display: block; border: 0px solid; } a.nav-LINK_NAME:hover { background-image: url('http://www.freewebs.com/urbantrainz/forum2.png'); border: 0px solid; } a.nav-LINK_NAME { background-image: url('http://www.freewebs.com/urbantrainz/chat1.png'); height: 52px; width: 101px; display: block; border: 0px solid; } a.nav-LINK_NAME:hover { background-image: url('http://www.freewebs.com/urbantrainz/chat2.png'); border: 0px solid; }</style> <br><br><p></p><p></p><p></p> <img src="logoonly.png"> </center> </head> <body> <font face="Verdana"> <div class="nav-links"> <a class="nav-home" href="http://www.freewebs.com/urbantrainz/home.html"> </a> <a class="nav-projects" href="http://www.freewebs.com/urbantrainz/projects.html"> </a> </div> <br style="clear: left;" /> <a class="nav-downloads" href="http://www.freewebs.com/urbantrainz/downloads.html"> </a> <a class="nav-forum" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a> <a class="nav-chat" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a> <br><br> Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance" <!-- Freewebs Sticker --> <script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_angleblue.js"> </script> </font> </body> </html>
All the images are stacked wierd...
?? And why is the download button broken?!
HTML:
<html>
<head><center>
<LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico">
<title>UrbanTrainz - Main page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "http://www.freewebs.com/urbantrainz/home2.png";
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/projects2.png";'
image3 = new Image();
image3.src = "http://www.freewebs.com/urbantrainz/downloads2.png";
image4 = new Image();
image4.src = "http://www.freewebs.com/urbantrainz/forum2.png";
image5 = new Image();
image5.src = "http://www.freewebs.com/urbantrainz/chat2.png";
// End -->
</script>
<style type="text/css"> body { background-color:#ffffff; background-image:url(header.png); background-repeat: repeat-x; } div.nav-links a { float: left; text-decoration: none; }
a.nav-home {
background-image: url('http://www.freewebs.com/urbantrainz/home1.png');
height: 52px;
width: 120px;
display: block;
border: 0px solid;
}
a.nav-home:hover {
background-image: url('http://www.freewebs.com/urbantrainz/home2.png');
border: 0px solid;
}
a.nav-projects {
background-image: url('http://www.freewebs.com/urbantrainz/projects1.png');
height: 52px;
width: 193px;
display: block;
border: 0px solid;
}
a.nav-projects:hover
background-image: url('http://www.freewebs.com/urbantrainz/projects2.png');
border: 0px solid; }
a.nav-downloads {
background-image: url('http://www.freewebs.com/urbantrainz/downloads1.png');
height: 52px;
width: 235px;
display: block;
border: 0px solid;
}
a.nav-downloads:hover {
background-image: url('http://www.freewebs.com/urbantrainz/downloads2.png');
border: 0px solid;
}
a.nav-forum {
background-image: url('http://www.freewebs.com/urbantrainz/forum1.png');
height: 52px;
width: 139px;
display: block;
border: 0px solid;
}
a.nav-forum:hover {
background-image: url('http://www.freewebs.com/urbantrainz/forum2.png');
border: 0px solid;
}
a.nav-chat {
background-image: url('http://www.freewebs.com/urbantrainz/chat1.png');
height: 52px;
width: 101px;
display: block;
border: 0px solid;
}
a.nav-chat:hover {
background-image: url('http://www.freewebs.com/urbantrainz/chat2.png');
border: 0px solid;
}</style>
<br><br><p></p><p></p><p></p>
<img src="logoonly.png">
</center>
</head>
<body>
<font face="Verdana">
<div class="nav-links"> <a class="nav-home" href="http://www.freewebs.com/urbantrainz/home.html"> </a> <a class="nav-projects" href="http://www.freewebs.com/urbantrainz/projects.html"> </a> </div> <br style="clear: left;" /> <a class="nav-downloads" href="http://www.freewebs.com/urbantrainz/downloads.html"> </a> <a class="nav-forum" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a> <a class="nav-chat" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a>
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_angleblue.js">
</script>
</font>
</body>
</html>
Last edited:
Spawn_of_Chaos97
Trainz for Everyone!
The projects button was broken because you forgot the { at the beginning of its "hover" code.
The rest...I'm still working on it lol...
Edit:
Well, I managed to get two rows instead of four...
Edit 2:
And now I'm stuck too lol...they're on 2 lines instead of 4, the projects button works, but I can't for the LIFE of me figure out how to make them all be on one line.
Code:
The rest...I'm still working on it lol...
Edit:
Well, I managed to get two rows instead of four...
Edit 2:
And now I'm stuck too lol...they're on 2 lines instead of 4, the projects button works, but I can't for the LIFE of me figure out how to make them all be on one line.
Code:
HTML:
<html>
<head><center>
<LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico">
<title>UrbanTrainz - Main page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "http://www.freewebs.com/urbantrainz/home2.png";
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/projects2.png";'
image3 = new Image();
image3.src = "http://www.freewebs.com/urbantrainz/downloads2.png";
image4 = new Image();
image4.src = "http://www.freewebs.com/urbantrainz/forum2.png";
image5 = new Image();
image5.src = "http://www.freewebs.com/urbantrainz/chat2.png";
// End -->
</script>
<style type="text/css"> body { background-color:#ffffff; background-image:url(http://www.freewebs.com/urbantrainz/header.png); background-repeat: repeat-x; } div.nav-links a { float: left; text-decoration: none; }
a.nav-home {
background-image: url('http://www.freewebs.com/urbantrainz/home1.png');
height: 52px;
width: 120px;
display: linear;
border: 0px;
}
a.nav-home:hover {
background-image: url('http://www.freewebs.com/urbantrainz/home2.png');
display: linear;
}
a.nav-projects {
background-image: url('http://www.freewebs.com/urbantrainz/projects1.png');
height: 52px;
width: 193px;
display: linear;
border: 0px;
}
a.nav-projects:hover {
background-image: url('http://www.freewebs.com/urbantrainz/projects2.png');
display: linear;
}
a.nav-downloads {
background-image: url('http://www.freewebs.com/urbantrainz/downloads1.png');
height: 52px;
width: 235px;
display: linear;
border: 0px;
}
a.nav-downloads:hover {
background-image: url('http://www.freewebs.com/urbantrainz/downloads2.png');
display: linear;
}
a.nav-forum {
background-image: url('http://www.freewebs.com/urbantrainz/forum1.png');
height: 52px;
width: 139px;
display: linear;
border: 0px;
}
a.nav-forum:hover {
background-image: url('http://www.freewebs.com/urbantrainz/forum2.png');
display: linear;
}
a.nav-chat {
background-image: url('http://www.freewebs.com/urbantrainz/chat1.png');
height: 52px;
width: 101px;
display: linear;
border: 0px;
}
a.nav-chat:hover {
background-image: url('http://www.freewebs.com/urbantrainz/chat2.png');
display: linear;
}</style>
<br><br><p></p><p></p><p></p>
<img src="http://www.freewebs.com/urbantrainz/logoonly.png">
</center>
</head>
<body>
<font face="Verdana">
<div class="nav-links"> <a class="nav-home" href="<A href="http://www.freewebs.com/urbantrainz/home.html"> </a">http://www.freewebs.com/urbantrainz/home.html"> </a> <a class="nav-projects" href="<A href="http://www.freewebs.com/urbantrainz/projects.html"> </a">http://www.freewebs.com/urbantrainz/projects.html"> </a> </div> <br style="clear: left;" /> <a class="nav-downloads" href="<A href="http://www.freewebs.com/urbantrainz/downloads.html"> </a">http://www.freewebs.com/urbantrainz/downloads.html"> </a> <a class="nav-forum" href="<A href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a">http://www.freewebs.com/urbantrainz/404notfound.html"> </a> <a class="nav-chat" href="<A href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a">http://www.freewebs.com/urbantrainz/404notfound.html"> </a>
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_angleblue.js">
</script>
</font>
</body>
</html>
Last edited:
AussieNightcrawler
Trainz Everywhere...
There were a few things that did not make any sense when I first read through your HTML, so I copied what Spawn_of_Chaos97 had posted into a text file and had a good slow read through it again.
Few things jumped out at me, like why have do got double links, for example:
I have only posted one section of the nav links line, but can you see where you have doubled up? You have your href link 2 times, hence the reason why it was showing directly after your button.
I also seen some " in wrong places.
Anyway, I have made some changes below, I have removed the center tags and your logoonly.png from the head tags and move them to the body, have a look, tweak if you want too, but its working.
Unless you want the buttons in the center also.
Edit: Changed the HTML a little, added some br tags to move the logo down and the buttons a little bit more, seen that the links on the buttons are not actually working, will look further into it...
Edit again: Found the problem, you had a "<A href= that was confusing it, remove that and it work as it should, the HTML code above as been changed again, now it works fine...
Few things jumped out at me, like why have do got double links, for example:
Code:
<div class="nav-links"> <a class="nav-home" href="<A href="http://www.freewebs.com/urbantrainz/home.html"> </a">http://www.freewebs.com/urbantrainz/home.html"> </a>I have only posted one section of the nav links line, but can you see where you have doubled up? You have your href link 2 times, hence the reason why it was showing directly after your button.
I also seen some " in wrong places.
Anyway, I have made some changes below, I have removed the center tags and your logoonly.png from the head tags and move them to the body, have a look, tweak if you want too, but its working.
Code:
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico">
<title>UrbanTrainz - Main page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "http://www.freewebs.com/urbantrainz/home2.png";
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/projects2.png";'
image3 = new Image();
image3.src = "http://www.freewebs.com/urbantrainz/downloads2.png";
image4 = new Image();
image4.src = "http://www.freewebs.com/urbantrainz/forum2.png";
image5 = new Image();
image5.src = "http://www.freewebs.com/urbantrainz/chat2.png";
// End -->
</script>
<style type="text/css"> body { background-color:#ffffff; background-image:url(http://www.freewebs.com/urbantrainz/header.png); background-repeat: repeat-x; } div.nav-links a { float: left;
text-decoration: none; }
a.nav-home {
background-image: url('http://www.freewebs.com/urbantrainz/home1.png');
height: 52px;
width: 120px;
display: linear;
border: 0px;
}
a.nav-home:hover {
background-image: url('http://www.freewebs.com/urbantrainz/home2.png');
display: linear;
}
a.nav-projects {
background-image: url('http://www.freewebs.com/urbantrainz/projects1.png');
height: 52px;
width: 193px;
display: linear;
border: 0px;
}
a.nav-projects:hover {
background-image: url('http://www.freewebs.com/urbantrainz/projects2.png');
display: linear;
}
a.nav-downloads {
background-image: url('http://www.freewebs.com/urbantrainz/downloads1.png');
height: 52px;
width: 235px;
display: linear;
border: 0px;
}
a.nav-downloads:hover {
background-image: url('http://www.freewebs.com/urbantrainz/downloads2.png');
display: linear;
}
a.nav-forum {
background-image: url('http://www.freewebs.com/urbantrainz/forum1.png');
height: 52px;
width: 139px;
display: linear;
border: 0px;
}
a.nav-forum:hover {
background-image: url('http://www.freewebs.com/urbantrainz/forum2.png');
display: linear;
}
a.nav-chat {
background-image: url('http://www.freewebs.com/urbantrainz/chat1.png');
height: 52px;
width: 101px;
display: linear;
border: 0px;
}
a.nav-chat:hover {
background-image: url('http://www.freewebs.com/urbantrainz/chat2.png');
display: linear;
}
</style>
</head>
<body>
<font face="Verdana"><br><br>
<div align="center">
<img src="http://www.freewebs.com/urbantrainz/logoonly.png">
</div><br><br><br><br>
<div class="nav-links">
<a class="nav-home" href="http://www.freewebs.com/urbantrainz/home.html"> </a>
<a class="nav-projects" href="http://www.freewebs.com/urbantrainz/projects.html"> </a>
<a class="nav-downloads" href="http://www.freewebs.com/urbantrainz/downloads.html"> </a>
<a class="nav-forum" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a>
<a class="nav-chat" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a>
</div><br style="clear: left;" />
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_angleblue.js">
</script>
</font>
</body>
</html>Unless you want the buttons in the center also.
Edit: Changed the HTML a little, added some br tags to move the logo down and the buttons a little bit more, seen that the links on the buttons are not actually working, will look further into it...
Edit again: Found the problem, you had a "<A href= that was confusing it, remove that and it work as it should, the HTML code above as been changed again, now it works fine...
Last edited:
AussieNightcrawler
Trainz Everywhere...
You will have to do some tweaking with the HTML, but this is as close as I can get to what you would like without going further in depth, will have a look further into it later tonight.
See what you think and tweak as needed...
Code:
<html>
<head>
<LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico">
<title>UrbanTrainz - Main page</title>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "http://www.freewebs.com/urbantrainz/home2.png";
image2 = new Image();
image2.src = "http://www.freewebs.com/urbantrainz/projects2.png";'
image3 = new Image();
image3.src = "http://www.freewebs.com/urbantrainz/downloads2.png";
image4 = new Image();
image4.src = "http://www.freewebs.com/urbantrainz/forum2.png";
image5 = new Image();
image5.src = "http://www.freewebs.com/urbantrainz/chat2.png";
// End -->
</script>
<style type="text/css"> body { background-color:#ffffff; background-image:url(http://www.freewebs.com/urbantrainz/header.png); background-repeat: repeat-x; } div.nav-links a {
float: left; text-decoration: none; }
a.nav-home {
background-image: url('http://www.freewebs.com/urbantrainz/home1.png');
height: 52px;
width: 120px;
display: linear;
border: 0px;
}
a.nav-home:hover {
background-image: url('http://www.freewebs.com/urbantrainz/home2.png');
display: linear;
}
a.nav-projects {
background-image: url('http://www.freewebs.com/urbantrainz/projects1.png');
height: 52px;
width: 193px;
display: linear;
border: 0px;
}
a.nav-projects:hover {
background-image: url('http://www.freewebs.com/urbantrainz/projects2.png');
display: linear;
}
a.nav-downloads {
background-image: url('http://www.freewebs.com/urbantrainz/downloads1.png');
height: 52px;
width: 235px;
display: linear;
border: 0px;
}
a.nav-downloads:hover {
background-image: url('http://www.freewebs.com/urbantrainz/downloads2.png');
display: linear;
}
a.nav-forum {
background-image: url('http://www.freewebs.com/urbantrainz/forum1.png');
height: 52px;
width: 139px;
display: linear;
border: 0px;
}
a.nav-forum:hover {
background-image: url('http://www.freewebs.com/urbantrainz/forum2.png');
display: linear;
}
a.nav-chat {
background-image: url('http://www.freewebs.com/urbantrainz/chat1.png');
height: 52px;
width: 101px;
display: linear;
border: 0px;
}
a.nav-chat:hover {
background-image: url('http://www.freewebs.com/urbantrainz/chat2.png');
display: linear;
}
</style>
</head>
<body>
<font face="Verdana">
<div class="nav-links">
<a class="nav-home" href="http://www.freewebs.com/urbantrainz/home.html"> </a>
<a class="nav-projects" href="http://www.freewebs.com/urbantrainz/projects.html"> </a>
<a class="nav-downloads" href="http://www.freewebs.com/urbantrainz/downloads.html"> </a>
<a class="nav-forum" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a>
<a class="nav-chat" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a>
</div>
<br><br><br><br>
<div align=center>
<img src="http://www.freewebs.com/urbantrainz/logoonly.png">
</div>
<br style="clear: left;" />
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
<!-- Freewebs Sticker -->
<script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_angleblue.js">
</script>
</font>
</body>
</html>See what you think and tweak as needed...
You will have to do some tweaking with the HTML, but this is as close as I can get to what you would like without going further in depth, will have a look further into it later tonight.
See what you think and tweak as needed...Code:<html> <head> <LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico"> <title>UrbanTrainz - Main page</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin image1 = new Image(); image1.src = "http://www.freewebs.com/urbantrainz/home2.png"; image2 = new Image(); image2.src = "http://www.freewebs.com/urbantrainz/projects2.png";' image3 = new Image(); image3.src = "http://www.freewebs.com/urbantrainz/downloads2.png"; image4 = new Image(); image4.src = "http://www.freewebs.com/urbantrainz/forum2.png"; image5 = new Image(); image5.src = "http://www.freewebs.com/urbantrainz/chat2.png"; // End --> </script> <style type="text/css"> body { background-color:#ffffff; background-image:url(http://www.freewebs.com/urbantrainz/header.png); background-repeat: repeat-x; } div.nav-links a { float: left; text-decoration: none; } a.nav-home { background-image: url('http://www.freewebs.com/urbantrainz/home1.png'); height: 52px; width: 120px; display: linear; border: 0px; } a.nav-home:hover { background-image: url('http://www.freewebs.com/urbantrainz/home2.png'); display: linear; } a.nav-projects { background-image: url('http://www.freewebs.com/urbantrainz/projects1.png'); height: 52px; width: 193px; display: linear; border: 0px; } a.nav-projects:hover { background-image: url('http://www.freewebs.com/urbantrainz/projects2.png'); display: linear; } a.nav-downloads { background-image: url('http://www.freewebs.com/urbantrainz/downloads1.png'); height: 52px; width: 235px; display: linear; border: 0px; } a.nav-downloads:hover { background-image: url('http://www.freewebs.com/urbantrainz/downloads2.png'); display: linear; } a.nav-forum { background-image: url('http://www.freewebs.com/urbantrainz/forum1.png'); height: 52px; width: 139px; display: linear; border: 0px; } a.nav-forum:hover { background-image: url('http://www.freewebs.com/urbantrainz/forum2.png'); display: linear; } a.nav-chat { background-image: url('http://www.freewebs.com/urbantrainz/chat1.png'); height: 52px; width: 101px; display: linear; border: 0px; } a.nav-chat:hover { background-image: url('http://www.freewebs.com/urbantrainz/chat2.png'); display: linear; } </style> </head> <body> <font face="Verdana"> <div class="nav-links"> <a class="nav-home" href="http://www.freewebs.com/urbantrainz/home.html"> </a> <a class="nav-projects" href="http://www.freewebs.com/urbantrainz/projects.html"> </a> <a class="nav-downloads" href="http://www.freewebs.com/urbantrainz/downloads.html"> </a> <a class="nav-forum" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a> <a class="nav-chat" href="http://www.freewebs.com/urbantrainz/404notfound.html"> </a> </div> <br><br><br><br> <div align=center> <img src="http://www.freewebs.com/urbantrainz/logoonly.png"> </div> <br style="clear: left;" /> <br><br> Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance" <!-- Freewebs Sticker --> <script language="JavaScript" src="http://images.freewebs.com/JS/Freebar/btn_angleblue.js"> </script> </font> </body> </html>
Thanks again! Although, the UrbanTrainz logo has been pushed too far down, and I think the buttons could go up and to the left a few pixels more.
Also, how do I get the dumb freewebs sticker over to the opposite right of the buttons?
Cheers.
EDIT: The images no longer preload. Why??
AussieNightcrawler
Trainz Everywhere...
Yes I know, it will have to be tweaked a little to get the UrbanTrainz logo to sit right.
Not sure about the freewebs sticker, will have to have a look.
I found that sometimes the images did not preload when using IE but they do all the time for me when I use Opera or Firefox.
Not sure about the freewebs sticker, will have to have a look.
I found that sometimes the images did not preload when using IE but they do all the time for me when I use Opera or Firefox.
- Status