473,395 Members | 2,795 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 software developers and data experts.

Image rollover not working in a table

I used Adobe Imageready to build a simple rollover navigation bar,
where the text will change color on a mouse over.

The working example can be found at:
http://www.akujunkan.com/test/NavBar.html

However, when I try to incorporate the javascript and code into another
table, the rollover stops working:
http://www.akujunkan.com/test/index.html

I'm pulling my hair out over this. Why isn't the rollover working
correctly in the second example? What did I miss in the code? Any
advice would be greatly appreciated. Thanks in advance.

Jul 23 '05 #1
5 5165
Gazing into my crystal ball I observed je****@gmail.com writing in
news:11**********************@l41g2000cwc.googlegr oups.com:
I used Adobe Imageready to build a simple rollover navigation bar,
where the text will change color on a mouse over.

The working example can be found at:
http://www.akujunkan.com/test/NavBar.html

However, when I try to incorporate the javascript and code into another
table, the rollover stops working:
http://www.akujunkan.com/test/index.html

I'm pulling my hair out over this. Why isn't the rollover working
correctly in the second example? What did I miss in the code? Any
advice would be greatly appreciated. Thanks in advance.


You mean like this:
<http://www.cavalcade-of-coding.info/usenet/horlist.html>

Notice, no need for images or javascript. Degrades nicely in older
browsers.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jul 23 '05 #2
me
<je****@gmail.com> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...
I used Adobe Imageready to build a simple rollover navigation bar,
where the text will change color on a mouse over.

The working example can be found at:
http://www.akujunkan.com/test/NavBar.html

However, when I try to incorporate the javascript and code into another
table, the rollover stops working:
http://www.akujunkan.com/test/index.html

I'm pulling my hair out over this. Why isn't the rollover working
correctly in the second example? What did I miss in the code? Any
advice would be greatly appreciated. Thanks in advance.


I suppose the point is moot since you're using css now instead of rollovers.
I see no reason to give up on using rollovers though. With css your text
options will be restricted to the visitors installed fonts. Rollovers offer
considerably more opportunity for creative expression.

I'd still like to know how you originally incorporated navbar.html with
index.html? The only difference I could see between the two pages is that
you deleted a couple of tags, IIRC one was something like "table id". Since
the table and the tags weren't completely identical between the two pages
this may have broken the rollover script. I'm no JavaScript expert so I
could be wrong and this wouldn't be the first time.

If I had wanted to combine those two pages I would have taken navbar.html
and added the graphics (with or without a separate table) above the existing
table and then saved that file with a new name. I would not have added the
graphic to the table containing the rollovers. Or I would have used
Imageready to add the graphic to navbar.html (with or without a separate
table) above the existing table and then saved that file with a new name.
Again I would not have added the graphic to the table containing the
rollovers.

When I use tables I only make them large enough to contain those items I
want to control the placement of in the horizontal plane.

Designing with tables is much simpler if don't restrict yourself to using a
single table and then using colspan or rowspan to arrange everything within
that table. Requiring everything on a page to fit inside a single table can
lead to some nightmarish problems!

Another way to say this is that I try to use colspan and row span only as
required to achive the design goal within a given table. I then start a new
table above or below the previous table a soon as the design goal will
permit.

I find it much simpler and more logical when designing a page to stack
smaller tables one on top of the other. Then if I need to I will place all
the tables inside a single table that encompasses the entire contents of the
page. Nesting tables inside each other works well for me.

Let me know how you fare with all of this.
Good Luck,
me
Jul 23 '05 #3
I really appreciate the input from both of you. I have tentatively
reworked the site from both perspectives, and I can see benefits in
both. However, I'm still having a few minor issues.

The version with tables is at
http://www.akujunkan.com/test/index_3.html
Aesthetically, this is how I want the site to look. It gives me the
exact control over the navigation fonts, and there is a 2px space
between the navbar and the banner. However, I used an invalid attribute
to achieve this workaround--I sandwiched a blank, black table of
height="2" in between the other two tables, which won't validate. Is
there another way to achieve this effect (maybe with CSS, which I'm
very imperfect with)?

The CSS version is at http://www.akujunkan.com/test/index.html
The CSS version is smaller and simpler in terms of code design, which I
also like. However, when I preview it in Firefox, it's broken...the
Home and Contact buttons overlap. Ignore the colors in the CSS for the
time being...I'm going to change them to look like the table version
soon enough.

So yeah...this looks like a question of validation now that I've
achieved the aesthetic look I want. And nudges in the right direction?
Thanks in advance

Jul 23 '05 #4
me
<je****@gmail.com> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...
I really appreciate the input from both of you. I have tentatively
reworked the site from both perspectives, and I can see benefits in
both. However, I'm still having a few minor issues.

The version with tables is at
http://www.akujunkan.com/test/index_3.html
Aesthetically, this is how I want the site to look. It gives me the
exact control over the navigation fonts, and there is a 2px space
between the navbar and the banner. However, I used an invalid attribute
to achieve this workaround--I sandwiched a blank, black table of
height="2" in between the other two tables, which won't validate. Is
there another way to achieve this effect (maybe with CSS, which I'm
very imperfect with)?

The CSS version is at http://www.akujunkan.com/test/index.html
The CSS version is smaller and simpler in terms of code design, which I
also like. However, when I preview it in Firefox, it's broken...the
Home and Contact buttons overlap. Ignore the colors in the CSS for the
time being...I'm going to change them to look like the table version
soon enough.

So yeah...this looks like a question of validation now that I've
achieved the aesthetic look I want. And nudges in the right direction?
Thanks in advance


Just add 2px of black area to the banner then you won't need the 2px high
table. You also need to fix the head tags and the body tag, they aren't in
the right place. Congratulations on getting the rollovers working.
Good Luck,
me
Jul 23 '05 #5
Gazing into my crystal ball I observed je****@gmail.com writing in
news:11**********************@l41g2000cwc.googlegr oups.com:
The CSS version is at http://www.akujunkan.com/test/index.html
The CSS version is smaller and simpler in terms of code design, which I
also like. However, when I preview it in Firefox, it's broken...the
Home and Contact buttons overlap. Ignore the colors in the CSS for the
time being...I'm going to change them to look like the table version
soon enough.


Adjust the width of (#nav li ) to 120px, or use an appropriate percentage.
Be aware you may still have issues with users who increase the font size.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share
Jul 23 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Richard | last post by:
I'm beginning to undertake php for the fun of it. Working on a problem I hope can be solved in php. Basically what I have is this: <body> <img name="main" src="image1.jpg"> <a href="#"...
1
by: mrb | last post by:
Is it possible to rollover an image in one table and create an effect in another table? I've looked all over for an answer to this but seem to be unable to find an answer. I want to be able...
9
by: Karl Burrows | last post by:
I am working on a Website for a non-profit group and for some reason I have one link that doesn't want to cooperate. All the image links work fine with the onmouseover and onmouseout script except...
2
by: Cynthia | last post by:
I'm looking for javascript code that when I mouse over a menu item will display a picture elsewhere on the page. I know it exists, but the ones I've found so far just swap out the menu item in...
4
by: lindsey.crocker | last post by:
I have this links list with background images set on them which changes when they roll over. The <td> is set valign="middle" however as soon as you apply the rollover to the link, the text jumps...
2
by: mix2plix | last post by:
ok.. been bangin by brains the past few days with this one and decided to seek you'z help. so here ya go. based on the code below and this concept.. how should i proceed? I have a table of 4...
2
by: smokeyd | last post by:
i am trying to create a simple image button rollover.. i have searched this forum and found a number of solutions but none seem to work. i am just trying to get the onmouseover to swap the image...
4
by: Dan | last post by:
Hi, I know how to make a rollover image in java, but I have trouble when my photo is a php document like: photo_resize.php? id=2&amp;resize_width=600&amp;resize_height=466 Does anyone know how to...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.