Website HTML

Status
Not open for further replies.
L

Lo_Poly

Unidentified bogie
Hello. I am trying to build my trainz site (urbantrainz).

First, sincerest apologies if this is in the wrong forum or off-topic. :(

But, I am trying to get an image to change when moused-ouver (like if you move your cursor over it). Also, I have seen on several sites where if you put your mouse over an image, an extra menu will pop up over it (Just for example, newegg).

However, all the source code I have attempted to use from various sites on the web, or build my own code from examples, has either been non-functional or breaks my webpage.

This is my current page HTML:
HTML: 
<html>
<head><center>
<title>UrbanTrainz - Main page</title>
<style type="text/css">
body
  {
  background-color:#ffffff;
  background-image:url(header.png); background-repeat: repeat-x;
  }
</style>
<br><br><p></p><p></p><p></p>
<img src="logoonly.png">
</center>
</head>
<body>
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
</body
</html>
If you don't know what I mean, this is the image normal:
home1.png


This is the image when the mouse cursor is over it:
home2.png
 
Ahahaha, I asked my coding instructor the same thing...here's a copy of the page I made with his help. You can use the code however you please, you don't even have to mention me if you don't want to:

Click here!

Note: it is a full script, so when you open it you'll have some pop-up boxes to contend with. Just cancel them all (or, for fun, put values in) and you'll see a button. Roll yer mouse over the button and it'll "invert." I used two different images just like you want to. Don't click on the button; instead, right click on a blank area of the page and find "View Source." Snatch the code from there and you're good to go!
 
Spawn_of_Chaos97 said:
Ahahaha, I asked my coding instructor the same thing...here's a copy of the page I made with his help. You can use the code however you please, you don't even have to mention me if you don't want to:

Click here!

Note: it is a full script, so when you open it you'll have some pop-up boxes to contend with. Just cancel them all (or, for fun, put values in) and you'll see a button. Roll yer mouse over the button and it'll "invert." I used two different images just like you want to. Don't click on the button; instead, right click on a blank area of the page and find "View Source." Snatch the code from there and you're good to go!
Click to expand...

Thanks, but the main problem is that I don't know how to mesh it into the current layout I have (last time I tried I broke everything).
 
Use the code at the bottom (where it says "this part was created by mr. offenback") as it is and just put into whatever link:

Code: 
onMouseOver="invert(); return true;" onMouseOut="revert(); return true;"

Put that inside the <a> tag.

Edit:

Just took another look at it. Change the value of the "id" attribute in the <img> tag to whatever you want it to be in each image's tag, then add in one set of that same code for each image and change:

Code: 
document.getElementById( "image" ).src=

to:

Code: 
document.getElementById( "your value of the id attribute here" ).src=

Simple really, due to the fact that the actual invert/revert is already done.
 
Last edited:
Spawn_of_Chaos97 said:
Use the code at the bottom (where it says "this part was created by mr. offenback") as it is and just put into whatever link:

Code: 
onMouseOver="invert(); return true;" onMouseOut="revert(); return true;"
Put that inside the <a> tag.

Edit:

Just took another look at it. Change the value of the "id" attribute in the <img> tag to whatever you want it to be in each image's tag, then add in one set of that same code for each image and change:

Code: 
document.getElementById( "image" ).src=
to:

Code: 
document.getElementById( "your value of the id attribute here" ).src=
Simple really, due to the fact that the actual invert/revert is already done.
Click to expand...

I don't have an <a> tag. Where do I put it in my page? :(
 
Hi,

If I understand correctly, you want a image to change when you place the mouse over which is also a link to send them somewhere, correct?

You would need to use javascript, i'll have a dig through my HTML code and see what I can find, give me a few minutes.
 
Lo_Poly,

Here it is working for you:

Code: 
<html>
	<head>
		<title>Testing Image Over Function.</title>

<SCRIPT language="JavaScript">
<!-- Begin
var preload=new Image();
preload.src="http://www.freewebs.com/urbantrainz/home2.png";
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>
	</head>
	<body>

		<div align="center">
		<h1>This is a test to see if a mouse over images work.</h1>
<br><br>
<A HREF="http://www.google.com.au" 
onmouseover="movepic('button','http://www.freewebs.com/urbantrainz/home1.png')" 
onmouseout="movepic('button','http://www.freewebs.com/urbantrainz/home2.png')">
<IMG NAME="button" SRC="http://www.freewebs.com/urbantrainz/home2.png" ALT="Image Off" BORDER=0 WIDTH=120 HEIGHT=52></A>
<br><br>
		</div>
Hope this works, and it does after testing... :)
<br>
	</body>
</html>

Just hope the forum displays it correctly... :)
 
Last edited:
AussieNightcrawler said:
Lo_Poly,

Here it is working for you:

Code: 
<html>
    <head>
        <title>Testing Image Over Function.</title>

<SCRIPT language="JavaScript">
<!-- Begin
var preload=new Image();
preload.src="http://www.freewebs.com/urbantrainz/home2.png";
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>
    </head>
    <body>

        <div align="center">
        <h1>This is a test to see if a mouse over images work.</h1>
<br><br>
<A HREF="http://www.google.com.au" 
onmouseover="movepic('button','http://www.freewebs.com/urbantrainz/home1.png')" 
onmouseout="movepic('button','http://www.freewebs.com/urbantrainz/home2.png')">
<IMG NAME="button" SRC="http://www.freewebs.com/urbantrainz/home2.png" ALT="Image Off" BORDER=0 WIDTH=120 HEIGHT=52></A>
<br><br>
        </div>
Hope this works, and it does after testing... :)
<br>
    </body>
</html>
Just hope the forum displays it correctly... :)
Click to expand...

Sweet, thanks! What about multiple images? :cool:

Also, how do I get the home button above the "UrbanTrainz" logo? (see here)

And sorry to keep asking questions, but how do set up a link so that when a person click it, it makes the click-er go back to the page they visited before it? And how do you set up an favicon?
 
Last edited:
Sweet, thanks! What about multiple images?
Click to expand...

Like a menu type setup? Example you have one already that takes the user 'home', and now you want to do another one to take the user 'somewhere' else?

Also, how do I get the home button above the "UrbanTrainz" logo?
Click to expand...

That would be hard as the way you have it setup, it will always below your logo, but I will have a look into it.

but how do set up a link so that when a person click it, it makes the click-er go back to the page they visited before it?
Click to expand...

Like this:
Code: 
<a href="#" onClick="history.go(-1)">Back One Step</a>

And how do you set up an favicon?
Click to expand...

Do a 'add to favorites' type link, I have one somewhere, will find it for you and post later.
 
AussieNightcrawler said:
Like a menu type setup? Example you have one already that takes the user 'home', and now you want to do another one to take the user 'somewhere' else?
Click to expand...

Thanks again. And by that, I meant more than one image link on the page that changes when you hover your cursor over it. :wave:

Also, how do you get a site search to go to the right of the logo there?

EDIT: Ok I think I am getting close, but two problems... 1. They don't change anymore when I mouse over them 2. How do I get rid of that space between the buttons?
HTML: 
<html>
<head><center>
<title>UrbanTrainz - Main page</title>
<SCRIPT language="JavaScript">
<!-- Begin
var preload=new Image();
preload.src="http://www.freewebs.com/urbantrainz/home1.png";
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>
<SCRIPT language="JavaScript">
<!-- Begin
var preload=new Image();
preload.src="http://www.freewebs.com/urbantrainz/projects1.png";
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>


<style type="text/css">
body
  {
  background-color:#ffffff;
  background-image:url(header.png); background-repeat: repeat-x;
  }
</style>
<br><br><p></p><p></p><p></p>
<img src="logoonly.png">
</center>
</head>
<body>
<font face="Verdana">
<A HREF="http://www.freewebs.com/urbantrainz/home.html" 
onmouseover="movepic('button','http://www.freewebs.com/urbantrainz/home2.png')" 
onmouseout="movepic('button','http://www.freewebs.com/urbantrainz/home1.png')">
<IMG NAME="button" SRC="http://www.freewebs.com/urbantrainz/home1.png" ALT="Image Off" BORDER=0 WIDTH=120 HEIGHT=52></A>
<A HREF="http://www.freewebs.com/urbantrainz/projects.html" 
onmouseover="movepic('button','http://www.freewebs.com/urbantrainz/projects2.png')" 
onmouseout="movepic('button','http://www.freewebs.com/urbantrainz/projects1.png')">
<IMG NAME="button" SRC="http://www.freewebs.com/urbantrainz/projects1.png" ALT="Image Off" BORDER=0 WIDTH=193 HEIGHT=52></A>
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
</font>
</body>
</html>
 
Last edited:
I believe that you can do favicons by simply saving favicon.ico in the main directory of the site. At least, that's what I've done in the past both on my server and on others...
 
robbiehanson said:
I believe that you can do favicons by simply saving favicon.ico in the main directory of the site. At least, that's what I've done in the past both on my server and on others...
Click to expand...

This is sadly a hosting site. Might be a year or two before I can get the money to get a server, and be able to afford the bandwidth costs. :o
 
Wow, nice one Aussie. One small thing, the "script" tag no longer uses the attribute "language." It's been replaced with "type." The proper value is "text/javascript." Other than that, it all looks good!

I just finished a class on this crap lol...

Edit:

Lo_Poly, the mouse over thing HAS to be capitalized as follows: onMouseOver onMouseOut onClick etc.
 
Spawn_of_Chaos97 said:
Wow, nice one Aussie. One small thing, the "script" tag no longer uses the attribute "language." It's been replaced with "type." The proper value is "text/javascript." Other than that, it all looks good!

I just finished a class on this crap lol...

Edit:

Lo_Poly, the mouse over thing HAS to be capitalized as follows: onMouseOver onMouseOut onClick etc.
Click to expand...

The images still won't change om mouseover (look). :(

HTML: 
<html>
<head><center>
<title>UrbanTrainz - Main page</title>
<SCRIPT type="text/javascript">
<!-- Begin
var preload=new Image();
preload.src="http://www.freewebs.com/urbantrainz/home1.png";
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>
<SCRIPT type="text/javascript">
<!-- Begin
var preload=new Image();
preload.src="http://www.freewebs.com/urbantrainz/projects1.png";
function movepic(img_name,img_src) {
document[img_name].src=img_src;
}
// End -->
</SCRIPT>


<style type="text/css">
body
  {
  background-color:#ffffff;
  background-image:url(header.png); background-repeat: repeat-x;
  }
</style>
<br><br><p></p><p></p><p></p>
<img src="logoonly.png">
</center>
</head>
<body>
<font face="Verdana">
<A HREF="http://www.freewebs.com/urbantrainz/home.html" 
onMouseOver="movepic('button','http://www.freewebs.com/urbantrainz/home2.png')" 
onMouseOut="movepic('button','http://www.freewebs.com/urbantrainz/home1.png')">
<IMG NAME="button" SRC="http://www.freewebs.com/urbantrainz/home1.png" ALT="Image Off" BORDER=0 WIDTH=120 HEIGHT=52></A>
<A HREF="http://www.freewebs.com/urbantrainz/projects.html" 
onMouseOver="movepic('button','http://www.freewebs.com/urbantrainz/projects2.png')" 
onMouseOut="movepic('button','http://www.freewebs.com/urbantrainz/projects1.png')">
<IMG NAME="button" SRC="http://www.freewebs.com/urbantrainz/projects1.png" ALT="Image Off" BORDER=0 WIDTH=193 HEIGHT=52></A>
<br><br>
Sorry, this page is unavailable at the current time.<br><br>Reason: "maintenance"
</font>
</body>
</html>
 
Lo_Poly said:
This is sadly a hosting site. Might be a year or two before I can get the money to get a server, and be able to afford the bandwidth costs. :o
Click to expand...

As I recall this shouldn't be an issue. just go to your main directory and put the icon there.

peter
 
You may need something like this inbetween your HEAD tags:

Code: 
<LINK REL="SHORTCUT ICON" HREF="http://www.freewebs.com/urbantrainz/favicon.ico">

Also, its not that simple as copy and paste, if it was it would have been too easy... ;)

You will find that there is a conflict within the code if there is more then 1 button because of the way it works. If I get some free time over the day I will have another look at it for you.
 
Status
Not open for further replies.

Similar threads

S
A Sad End to an Epic Run for Me with Trainz.
2
Replies
38
Views
1K
ricomon35
R
J
electric locomotives; electric rail transportation
Replies
3
Views
603
JonMyrlennBailey
J
C
The Canadian Pacific Railway's Mountain Subdivision in the Late 1880s
Replies
1
Views
201
Cayden
C
A
TRS22PE upgrader "dabbling toes" user report for DEVS
Replies
10
Views
1K
anathoth71
A
C
  • Locked
Trainz Objects in HTML Mini Browser
Replies
12
Views
4K
PerRock
P
Back
Top