chrometweaks.org

I've started my own iPage web hosting company and...?

Click Here To View All Answers...


First question I have is I've started my own iPage web hosting company and...? Thanks for any answer or 2. Another question I got... As you can probably tell by my name, I'm new at this, so heres my question. I've been trying forever to get mouse over to work on my menu, I've searched on here, found links on how to do it, saw the coding, but I still cant get it to work. All I want is for the image to change when the mouse goes over it, heres part of the code for the menu....

<a class="menu" href="/images/"><img src="/images/1.GIF" border=0></.

</a>.

Can anyone help me? Thanks..

Comments (41)

I'm stumped. I'm not so sure what is the answer to that question. I'll do some research in Google and get back to you if I find an decent answer. You should email the people at iPage as they probably could give you an answer..

Comment #1

Yep css is dead easy, but I also think javascript is easy, what's hard about pasting a piece of code into the head, then another into the body and changing the image name, here's.

Some.

Javascripts..

Comment #2

Thanks for the help everyone, but I downloaded First Page and did it with no problem, but now I cant get it on the side so it's a menu, it just stays at the top, bottom, or right side, which I dont want. Can anyone help me?..

Comment #3

Or put them in a left hand column of a.

Table..

Comment #4

Sorry, but I dont really get how to do any of your replies, I tried the table but it still wouldnt go to the left.....

Comment #5

Use the css position:absolute to input the exact x and y coordinates..

Comment #6

Ok..... an editor does not create a site, it is just a tool..

So you have to understand the html tags.....

... and the tables..

Go here:.

Http://www.weballey.net.

And a nice editor is Arachnophilia V4.

How to create a iPage site with Arachno:.

Http://members.lycos.nl/vazed.

And ....upload your page or iPage site so we can see the code...

Comment #7

I didnt do everything on the editor, just the mouseover buttons, so I know how to use tags. And I cant post the iPage site because it isnt up yet and the codes too long.....

Comment #8

I must have missed something. what editor are you using?..

Comment #9

O yeah firstpage?.

It wont let me d/l it..

Comment #10

I dont think I need it unless it's better than frontpage or dreamweaver..

Comment #11

If you inserted something into the table then by default it goes left. post this part of the code so we can see it. we don't need the whole page, just the part that is troubling you...

Comment #12

Ok, but it has a lot of mouseover coding so it's still a little long, but here it is....

<! Rollover Image Script - Place within <head> tag >.

<script language="JavaScript" type="text/javascript">.

<! Hide from older browsers.

Function SwitchImg().

{ //start.

Var rem, keep=0, store, obj, switcher=new Array, history=document.Data;.

For (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {.

Store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];.

If ((store.indexOf('document.layers[')==0 && document.layers==null) ||.

(store.indexOf('document.all[')==0 && document.all==null)).

Store = 'document'+store.substring(store.lastIndexOf('.'),store.length);.

Obj = eval(store);.

If (obj != null) {.

Switcher[keep++] = obj;.

Switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];.

Obj.src = SwitchImg.arguments[rem+2];.

} }.

Document.Data = switcher;.

} //end.

Function RestoreImg().

{ //start.

If (document.Data != null).

For (var rem=0; rem<(document.Data.length-1); rem+=2).

Document.Data[rem].src=document.Data[rem+1];.

} //end.

// end hiding contents >.

</script>.

<BR>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.a','document.a','WebSite Stuff/Main Stuff/Graphics/Menu/h5.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/h.GIF" name="a" width="87" height="25" alt="" border="0"></a>.

<br>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.b','document.b','WebSite Stuff/Main Stuff/Graphics/Menu/a2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/a.GIF" name="b" width="99" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.c','document.c','WebSite Stuff/Main Stuff/Graphics/Menu/m2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/m.GIF" name="c" width="122" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.d','document.d','WebSite Stuff/Main Stuff/Graphics/Menu/p2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/p.GIF" name="d" width="99" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.e','document.e','WebSite Stuff/Main Stuff/Graphics/Menu/s2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/s.GIF" name="e" width="101" height="28" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.f','document.f','WebSite Stuff/Main Stuff/Graphics/Menu/mh2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/mh.GIF" name="f" width="139" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.g','document.g','WebSite Stuff/Main Stuff/Graphics/Menu/g2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/g.GIF" name="g" width="125" height="26" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.h','document.h','WebSite Stuff/Main Stuff/Graphics/Menu/c2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/c.GIF" name="h" width="106" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.i','document.i','WebSite Stuff/Main Stuff/Graphics/Menu/l2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/l.GIF" name="i" width="87" height="25" alt="" border="0"></a>.

<table cellpadding="4" cellspacing="0".

<tr>.

<td class="menubar">..

Comment #13

I think you need to post the table structure you're trying to use, for a simple structure with a header, a lefthand menu and a body you could use something like.

<table border=0 cellpading=0 cellspacing=0>.

<tr><td colspan="2">header</td></tr>.

<tr><td width=150>lefthand menu</td>.

<td>main body</td></tr></table>.

In which you would remove "lefthand menu" and replace it with your rollovers, and change the width to what you want...

Comment #14

Actually put your whole page up here. yuou can upload the whole page at once as an attachment. I think by looking at the code you posted that you have your mouseovers in your head tag, which is not good...

Comment #15

It does look like that because he has the "place in the head sction" followed straight on by the rollovers..

Comment #16

The rollover isnt in the head tag, it may be on there because I just got that from the file I used to make the mouseover buttons in the first place. All I really want to do is get those images to the left of the page and use them for the menu, I thought that was simple but I guess it just proves how much of a newb I am. And about posting the whole page coding, there isnt much of it anymore [comp didnt save so I lost some.

] besides the menu, so I dont think that could really help...

Comment #17

Again you don't have anything in the table as the table is on the bottom, and the mouseovers on the top. post your page as an attachement so we can see the page...

Comment #18

I dont have a table, thats what Im trying to do, and the only thing on the page right now is the menu, because the whole page didnt save right...

Comment #19

Then jus tadd a table to it. geesh.

<table cellpadding="4" cellspacing="0".

<tr>.

<td>.

Mouse over stuff here.

</td>.

</tr>.

</table>..

Comment #20

Thank you so much, thats all I needed to know and put very simply. Sorry if I was annoying you all, I just wasnt for sure of what to do. But unfortuantly I have another problem now, actually I had the same problem before when I didnt have the mouseover menu, so I checked to see if it was still a problem. The problem is the menu moves down if I add enough stuff to the center of the page, is there anyway to lock the table in place or something?..

Comment #21

Have you used what scoutt gave you and have just one table cell? (one set of <td> </td> in other words)..

Comment #22

I suggest you read tutorials on making tables. all you need is the algin attribute in teh table.

<table align="left">..

Comment #23

Yep tutorials are a must to get the basic principal of table layout, w3schools has a quite simple tutorial on it, go.

Here.

For those..

What scoutt gave you was a single cell table, to layout your page you need more than one cell, like in the example I gave, there was a cell for the header (at the top where people put their logo, banner etc), another cell at the left where the menu goes and then a main cell where all the content goes..

A table is made up of rows <tr></tr>.

Which have cells in them <td></td>.

So in my example in my first tabel row there was the header.

<table border=0 cellpading=0 cellspacing=0>.

<tr><td colspan="2">header</td></tr>.

Thats all I wanted to put in that row, so I closed the tags </td></tr>.

And then started a new row.

<tr><td width=150>lefthand menu</td>.

<td>main body</td></tr></table>.

But in this one you see it has two cells (i opened <td> and then closed it </td>).

And opened a new one, so this row has two cells in it..

So in this layout there is one cell at the top(in the first row), and there is two cells in the next row, note I put 'colspan="2", this means that that particular cell will span the same width as the next two cells (in the next row).

Hope this helps a bit, if you're still having problems post again, good luck..

Comment #24

Thanks for the tutorial and table info, I now know a little more about tables. But I still couldnt find how to keep the menu table at the top, any help?..

Comment #25

Hmmm di dyou try valign="top" in the table right next to align="left" ??..

Comment #26

Yes, this is what I have....

Is that right?..

Comment #27

Why not just try it, you'll soon see if it works or not!.

When experimenting, I often make a temporary copy of a page. I mess around with that, without risk of losing any of the original work...

Comment #28

I tried it and it didnt work. I also tried a test page like you, but I couldnt find anything to fix it...

Comment #29

You're really having a tough time with these tables aren't you!, here throw this into your favourite editor, see if it's what you want:.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">.

<html>.

<head>.

<title>Untitled</title>.

<style type="text/css">.

Table.size {height:100%; width:100%}.

Td.width {width:15%;}.

</style>.

<! Rollover Image Script - Place within <head> tag >.

<script language="JavaScript" type="text/javascript">.

<! Hide from older browsers.

Function SwitchImg().

{ //start.

Var rem, keep=0, store, obj, switcher=new Array, history=document.Data;.

For (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {.

Store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];.

If ((store.indexOf('document.layers[')==0 && document.layers==null) ||.

(store.indexOf('document.all[')==0 && document.all==null)).

Store = 'document'+store.substring(store.lastIndexOf('.'),store.length);.

Obj = eval(store);.

If (obj != null) {.

Switcher[keep++] = obj;.

Switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];.

Obj.src = SwitchImg.arguments[rem+2];.

} }.

Document.Data = switcher;.

} //end.

Function RestoreImg().

{ //start.

If (document.Data != null).

For (var rem=0; rem<(document.Data.length-1); rem+=2).

Document.Data[rem].src=document.Data[rem+1];.

} //end.

// end hiding contents >.

</script>.

</head>.

<body>.

<table border=1 cellpading=0 cellspacing=0 class="size">.

<tr><td colspan="2" align="center"><h1> header/banner</h1></td></tr>.

<tr><td valign="top" class="width">.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.a','document.a','WebSite Stuff/Main Stuff/Graphics/Menu/h5.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/h.GIF" name="a" width="87" height="25" alt="" border="0"></a>.

<br>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.b','document.b','WebSite Stuff/Main Stuff/Graphics/Menu/a2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/a.GIF" name="b" width="99" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.c','document.c','WebSite Stuff/Main Stuff/Graphics/Menu/m2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/m.GIF" name="c" width="122" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.d','document.d','WebSite Stuff/Main Stuff/Graphics/Menu/p2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/p.GIF" name="d" width="99" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.e','document.e','WebSite Stuff/Main Stuff/Graphics/Menu/s2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/s.GIF" name="e" width="101" height="28" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.f','document.f','WebSite Stuff/Main Stuff/Graphics/Menu/mh2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/mh.GIF" name="f" width="139" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.g','document.g','WebSite Stuff/Main Stuff/Graphics/Menu/g2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/g.GIF" name="g" width="125" height="26" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.h','document.h','WebSite Stuff/Main Stuff/Graphics/Menu/c2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/c.GIF" name="h" width="106" height="25" alt="" border="0"></a>.

<BR>.

<a class="menu" href="http://" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.i','document.i','WebSite Stuff/Main Stuff/Graphics/Menu/l2.GIF')"><img src="WebSite Stuff/Main Stuff/Graphics/Menu/l.GIF" name="i" width="87" height="25" alt="" border="0"></a>.

</td>.

<td align="center">.

<h1> main body here</h1>.

</td></tr></table>.

</body>.

</html>..

Comment #30

Acraully you haven't even have it right. for one you forgot to close the table also you need valign="top" in the table not the cell. anytime you put the aligns in the cell it is for the data in the cell, not the table as a whole...

Comment #31

Well, that didnt change anything, but ok, also I think I did close the table, of course I could be wrong....

Anyway, to leoo, my iPage site isnt all one table but I think I can get it to work right with what you gave me, if not I just wont put much on each page so it wont mess up the menu that much...

Comment #32

>>.

Well, that didnt change anything, but ok, also I think I did close the table, of course I could be wrong....

<<.

>>.

<table border="0" cellpadding="4" cellspacing="0".

<<.

Hmm. You.

Did not.

Close the table tag. The.

>.

Is missing from the end..

Compare the line below with your code:.

<table border="0" cellpadding="4" cellspacing="0".

>.

Yes that really does make a.

Big.

Difference..

However, as.

Scoutt.

Said, you need to add the two new attributes to the.

<table>.

Tag, not to the.

<td>.

Tag...

Comment #33

Wow thanx! now I might actually try to make a table w/o using a table editor heh...

Comment #34

If none of this don't work then upload your page here. we need to see it has a whole...

Comment #35

Scoutt.

I don't think he has actually tried any of the things that you have suggested, yet..

The code above still had the ending.

>.

Missing from the.

<table>.

Tag, and no sign of the extra two alignment attributes either...

Comment #36

I think he's got himself really confused about it all..

Comment #37

Actually I just added the > and nothing changed, and as I said before, I added alignments to the table tag, nothing changed again. Anyway, heres what I have of the site, but I'll warn you, it's a mess so you can point out all my newb mistakes...

Comment #38

It is easier for me, if you upload it somewhere, maybe just a temporary folder on your web site, then post the URL here...

Comment #39

Ok..... n00b here we go.....

In a table you can put another table.

Align your table center and width=100%.

Never use 145% in a table or td tag.

And use the " in this parts: width="100%" of your code.

I have redone your page to a normal layout:.

One table -logo-.

One table -menu and content-.

Footer part.

Play with it..

Comment #40

Thank you so much, Peter. With some editing I got everything to fit in only the second table almost exactly how I wanted it to, and no more moving menu. The only other thing I could want is for the menu section to move up beside the logo some, but this works just as well. Thanks again...

Comment #41

You'r welcome..

A good html info site:.

Www.weballey.net.

And learn to use <!-comment -> in your page, so you can see what is what...

Comment #42


This question was taken from a support group/message board and re-posted here so others can learn from it.