Solved

Simple question - onmouseover affecting other elements

Posted on 2003-10-29
31
465 Views
Last Modified: 2008-02-01
Hi this is a simple question I just do not know the JS syntax.  I want a mouseover image to activate a mouseover on another element.

As an example visit http://www.greenteadesign.com/test.html

Now look at the mouseover on the thumbnail in the left panel.  It currently borders the thumb in green as well as showing a transparent gif on the main image (right panel).

What I want to do is have the mouseover on the transparent gif (right panel), border the corresponding thumbnail (left panel)

Here is the JS for the thumbnails:

<script language="JavaScript1.2">
/*
Highlight Image Script II-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
      
function borderit(which,color){
//if IE 4+ or NS 6+
if (document.all||document.getElementById){
which.style.borderColor=color
}
}
</script>

And here is the code on the thumb referencing the JS for the thumbnail:

<a href="stereostep.html" class="small" onMouseOut="toggle('item1')" onmouseover="toggle('item1')"><img src="images/steptansu/stereostep-2tone-thumb.jpg" width=65 height=55 alt="" border=0 class="borderimage" onMouseover="borderit(this,'#647F5B')" onMouseout="borderit(this,'white')"><br></a>

Finally here is the code for one of the transparent gifs:

<div id="Stepper" style="position:absolute; width:165px; height:167px; z-index:9; left: 524px; top: 296px" onMouseOver="toggle('item1')" onMouseOut="toggle('item1')"><a href="#"><img src="spacer.gif" width="165" height="167" border="0"></a></div>

Thanks in advance,
Hayden

(P.S. Additionally I would like the red text links to the right of the thumbnails to hover when the thumb is onmouseover, I'm not sure if that deserves another thread)


                                                 
0
Comment
Question by:Quarfelburg
  • 13
  • 12
  • 6
31 Comments
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
Hi,

  I'm somewhat confused by the terminology 'bordering' ...
do you want the transparent image when hovered over some object in the center image to be reflected in the thumbnails?  that is, if I move my mouse over the table in the large foto, the green borders should appear around the thumbnail table

Vinny
0
 

Author Comment

by:Quarfelburg
Comment Utility
Right so if you move your mouse over the steochest on the main photo, the stepchest thumbnail to the left will be bordered (js supplied above)
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
doing this is not a problem.

first we need to look at the layout.

right now when you mouse over them they are NOT positioned correctly.

You need to move you div style left and top over so that each bracket actually placed where it should be.

Making a element border is not the problem. I think you should get your position fixed first.
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
BTW

you can slice the image up in an editor, but it may or may not be trouble
0
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
Hi hayden,

  Actually, if you wish to do what I think you want to do, you need to make the center image an imagemap  So that you can reference portions of it when moused over and send info to the bracket divs when hovering over the thumbnails.

Vinny
0
 

Author Comment

by:Quarfelburg
Comment Utility
Jay I'm a bit confused.  What is not positioned correctly?  

"Right so if you move your mouse over the stepchest on the main photo, the stepchest thumbnail to the left will be bordered (js supplied above)"

If you mean the borders are not positioned correctly that relates to my other question about resolution changes.  On 1280x968 they are correct.  Any other resolution and they are all over the place.   When we first made the test page in one table a switch in resolution made no difference.

0
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
>>... the borders are not positioned correctly...
If they are invisible, there is no need for initial posiitoning (which means you don't care what the resolution is).
You only need to be concerned about positioning when they are visible -- that is, when you mouse over the 'big' picture.  You can track the document's cursor movements easily, but you do not know which 'item' the mouse is over -- unless the image is a map (sliced in jay's post)

Vinny
0
 

Author Comment

by:Quarfelburg
Comment Utility
I tried image mapping but it flickers and is not the solution I would like to use.  In one of the test pages Jay made (http://www.greenteadesign.com/jay.html) the resolution did not matter.  I am wondering why that is, and how I can fashion my current layout (test.html) in the same way.

0
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
I only checked it out in 8x6.
because he absolutely positioned everything to fit that page.  If you move the 'items' tds to the top of the page (so they appear on the left like yours), you will see that it falls apart.

I'm sure he'll come by and tell you how he determined where the positioning was.

Vinny
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
i am working on a new layout.

Using only div and spans.

I will post when i am done
0
 

Author Comment

by:Quarfelburg
Comment Utility
Hi Jay, any update?

I'm curious, why does a non table layout fix the resolution problem?
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
Q

try this link tell me what you think.

I am on a t1 connection so it loads almost instantly, but it may take little bit longer for dial up

I preload the images with javascript, but i also put them in a hidden DIV. that away they are already loaded.

Also it may be slower on the test server i use.

It will probaly be faster on your on server.

View the source and you can copy all the images
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
sorry it took me so long. I have been busy today
0
 

Author Comment

by:Quarfelburg
Comment Utility
Jay, so sorry, what link?
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 

Author Comment

by:Quarfelburg
Comment Utility
I see so you've made mouseovers of the entire image.  Though that means the page will take 56kers a while to load.

Why divs and spans?  Can this be done with mouseovers of the border?  How does potterybarn do it?

So many questions... =)

0
 

Author Comment

by:Quarfelburg
Comment Utility
In an unrelated questions do you suggest coding in divs instead of tables?  I feel I may still be stuck in the past.
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
Yes tables are for Tabular Data.


Give me a minute or two.

What i am fixiing to do is make a zoom

Mouseover the pic and then it will show it off to the side
0
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
hate to say it jay, but at 28,800 bps it is ssssssssllllllooow -- so I killed it.

quarfelburg:
where is the potterybarn url?

divs/spans are the 'in' thing for web design; tables are passe -- like me :)  I still try to use the most expedient, crossBrowser friendly code whenever possible.  A lot of the new design techniques throw the old browsers to the dogs; some even ignore IE because it isn't 'standards compliant'  -- while the 'standards compliant browsers' getting the most attention are only in their -2 versions and being used perhaps by as many people as use NN4.  But they are a vocal group.

Vinny
0
 

Author Comment

by:Quarfelburg
Comment Utility
Vinny,

Ah well I have pretty much given up on ns4.  So div layouts only work on stardards compliant browsers such as Opera?  Are any versions of IE standard compliant?

Potterybarn bordering example:

http://ww2.potterybarn.com//cat/roomindex.cfm?cid=romlivcab&cmsrc=&src=rmscromliv%7Crrooms%2Frmscrom%7Crrooms%2Fhme

I just don't get why it works in all resolutions, as it uses absolute positioning.

Jay,

Cheers.
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
try the link now.

I have to go for now but will check back tonight
0
 
LVL 15

Expert Comment

by:VincentPuglia
Comment Utility
Compliance is still a very 'touchie' subject, especially among some of the 'experts' here (as I'm finding out in another thread'.
Dependent upon whom you speak to IE5+ is compliant, and then again  it isn't.  Mozilla Firebird ver .6 is compliant, except for those things it hasn't implemented yet.  The same is probably true for Safari.  Of them all, Opera probably is the most compliant.  The funniest thing about compliance is that it is a moving target -- by the time the browsers become compliant, the standards will have changed and everything begins anew -- same ole, same hole.

re divs & standards: the newer browsers (even non-standard) allow a lot more flexibility in manipulating the page's layout with a minimal of effort (sort of like giving a grade school kid a calculator for addition/subtraction problems).  So yes, if you can, design around divs/spans -- they will be here for a while.  If you have problems, fall back on what you know.  Each step and fall will be a gain.

I'll take a look at pottery barn and let you know.

Vinny
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
Nice artical Vinny

Vinny coding with spans and div are really easy once u get the hang of it. Also when you do you will see that maintanec is easier. and load times are faster. (Not in this case since i have 40 11 thousand images) ;)

Take care of him vinny while im gone ;)

You never know i may have a bonus for you in another thread

lol
0
 

Author Comment

by:Quarfelburg
Comment Utility
Jay:
The zoom rollover and thumb images work but the main pic doesnt load.  I understand the idea but cannot see the images =(

Vincent:
I'll try recoding in div/spans - it has a potential SEO advantage as file sizes are lower, and content can be at the top of the page.  Worth a try at least.

I'll be gone for the weekend (Happy Hallowe'en EE) but I'll be back to check on this never-ending post on Monday!

Thanks so much both of you for your help thus far.  I've increased the points to 750 as this thread has gone on a bit of a tangent.  



0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
it loaded 4 me on AOL at my house (Dial Up)

Did not take to long either
0
 

Author Comment

by:Quarfelburg
Comment Utility
I'm back.  Jay I had a look at test2.html and must say that I prefer the bordering instead of the image popping up to the left.  

Is it the JS in Potterybarn that lets them do this in any resolution?  They are coding in tables as well, with no image maps, and using only the border mouseovers.

And as per the original question *read original question*...

Thanks, I will post extra points to both of you guys no matter what - you've been an invaluable aid.
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
Qu..

Let me go back and reread the source at potterybarn
0
 
LVL 16

Expert Comment

by:jaysolomon
Comment Utility
I am going to go back and tack the code that i initially submitted and just use transparent image and hidden div.

I think that is what they are doing.

What makes this kinda difficult with your image is the stepper, part of it is behind the table so therefore we have to get it where the div is not overlapping others. If that makes since

Be back with results Hopefully
0
 

Author Comment

by:Quarfelburg
Comment Utility
I see - yes it makes sense.

Will be waiting patiently =)
0
 

Author Comment

by:Quarfelburg
Comment Utility
Any update?  
0
 
LVL 16

Accepted Solution

by:
jaysolomon earned 500 total points
Comment Utility
Ok here you go i think. i have tested in different resolutions, and you may want to play with the left and top just a lil but not much.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
      
      <link rel="stylesheet" type="text/css" href="http://www.greenteadesign.com/style.css">
            


      <script>
            function contact(){
            var popurl="contact.html"
            winpops=window.open(popurl,"","width=318,height=453,resizable,")
            }
      </script>

<script>
            /*
            CSS Menu highlight- By Marc Boussard (marc.boussard@syntegra.fr)
            Modified by DD for NS4 compatibility
            Visit http://www.dynamicdrive.com for this script
            */
            
            var ns4class=''
      </script>

<!--OPAQUE THUMBS-->
      <script language="JavaScript1.2">
            //Highlight image script- By Dynamic Drive
            //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
            //This credit MUST stay intact for use
            
            function makevisible(cur,which){
            strength=(which==0)? 1 : 0.6
            
            if (cur.style.MozOpacity)
            cur.style.MozOpacity=strength
            else if (cur.filters)
            cur.filters.alpha.opacity=strength*100
            }
</script>


<!--BORDER THUMBS-->
      
      <script language="JavaScript1.2">
            /*
            Highlight Image Script II-
            © Dynamic Drive (www.dynamicdrive.com)
            For full source code, usage terms, and 100's more DHTML scripts, visit http://dynamicdrive.com
            */
            
            function borderit(which,color){
            //if IE 4+ or NS 6+
            if (document.all||document.getElementById){
            which.style.borderColor=color
            }
            }
      </script>

      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <meta name="Keywords" content="tansu, dansu, japanese furniture, step chest, stepchest, step tansu, tansu chest, japanese antiques, korean furniture, korean antiques, asian furniture, shoji,tatami, hibachi,mizuya, staircase chest, japanese chest,korean chest, screens, japanese tansu">
      <title>Showroom #1</title>

<script type="text/javascript">
<!--
function toggle(theDiv){
     var elem = document.getElementById(theDiv);
     elem.style.display = (elem.style.display == "none")? "" : "none";
}
// -->
</script>
</head>

<script>
            function contact(){
            var popurl="contact.html"
            winpops=window.open(popurl,"","width=318,height=453,resizable,")
            }


function adjustfooter()
{
  outer.style.top = inner.style.top + 90;
  outer.style.left = inner.style.left;
 
}
</script>


<body onresize="adjustfooter()" onload="adjustfooter();" BGCOLOR=#FFFFFF TEXT=#000000 LINK=#647F5B ALINK=#647F5B VLINK=#647F5B>

      <center>
<!--table that vertically centers the page in NS-->            
      <table width=642 height=100% border=0 cellspacing=0 cellpadding=0>
            <td width=642 align=left valign=middle>
<!--main table-->
            <center>
                  <table width=642 border=0 cellpadding=0 cellspacing=0>
<!--banner row-->                          
                         <tr>
                               <td width=161 align=left valign=top>
                                     <img src="http://www.greenteadesign.com/images/categorylogo.gif" width=161 height=51 alt="greentea design" border=0><br>
                               </td>
                               
                               <td width=481 align=left valign=top rowspan=2>
                                     <table width=481 border=0 cellspacing=0 cellpadding=0>
                                           <tr>
                                                 <td width=44 align=left valign=top>
                                                       <img src="http://www.greenteadesign.com/images/categorygreen.gif" width=44 height=51 alt=""><br>
                                                 </td>
                                                 <td width="437" align=left valign=top>
                                                       <img src="http://www.greenteadesign.com/images/categorygreen.gif" width="437" height=51 alt=""><br>
                                                 </td>
                                                 
                                           </tr>
                                           
                                           <tr>
                                                 <td width=44 align=left valign=top>
                                                       <img src="http://www.greenteadesign.com/images/blank.gif" width=44 alt=""><br>
                                                 </td>

                        
                                                <td width=393 align=left valign=top>
                                                                                                 
                                                <img src="http://www.greenteadesign.com/images/blank.gif" width=1 height=25><br>
                                                                                                
                                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                  <tr>
                                                    <td width="100%"><div id="inner"><img src="http://www.greenteadesign.com/test/roomsborder/stereosteproom.jpg" width="393" height="351" border="0" alt="temp"></div>


<div id="outer" style="position:absolute;width:393; height:351: z-index:9;">

<div id="Stepper" style="position:absolute;width:165px; height:167px; z-index:9; left: 10px; top: 129px" onMouseOver="toggle('item1')" onMouseOut="toggle('item1')"><a href="#"><img src="spacer.gif" width="165" height="167" border="0"></a></div>
<div id="Table" style="position:absolute;width:243px; height:156px; z-index:5; left: 97px; top: 190px" onMouseOver="toggle('item2')" onMouseOut="toggle('item2')"><a href="#"><img src="spacer.gif" width="243" height="156" border="0"></a></div>
<div id="Chair" style="position:absolute; width:96px; height:142px; z-index:8; left: 155px; top: 170px" onMouseOver="toggle('item3')" onMouseOut="toggle('item3')"><a href="#"><img src="spacer.gif" width="89" height="137" border="0"></a></div>
<div id="Lamp" style="position:absolute;width:35px; height:48px; z-index:6; left: 240px; top: 140px" onMouseOver="toggle('item4')" onMouseOut="toggle('item4')"><a href="#"><img src="spacer.gif" width=35" height="48" border="0"></a></div>
<div id="Compass" style="position:absolute;width:55px; height:62px; z-index:7; left: 320px; top: 140px" onMouseOver="toggle('item5')" onMouseOut="toggle('item5')"><a href="#"><img src="spacer.gif" width="55" height="62" border="0"></a></div>



<!--BEGIN BRACKETS -->


     
                                                <!--STEREOSTEP-->
                                                      <div id="item1" style="position:absolute; left:10px; top:129px; width:165px; height:167px; z-index:1; display: none;">
                                                        <table border="0" cellpadding="0" cellspacing="0" width="165" height="167">
                                                          <tr>
                                                            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                          </tr>
                                                          <tr>
                                                            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                          </tr>
                                                        </table>
                                                      </div>
                                                     
                                                     
                                                <!--MARU TABLE-->
                                                      <div id="item2" style="position:absolute; left:97px; top:190px; width:243px; height:156px; z-index:2;display: none;">
                                                        <table border="0" cellpadding="0" cellspacing="0" width="243" height="156">
                                                          <tr>
                                                            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                          </tr>
                                                          <tr>
                                                            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                          </tr>
                                                        </table>
                                                      </div>
                                                
                                                
                                                
                                                <!--HORSE SHOE CHAIR-->
                                                      <div id="item3" style="position:absolute; left:160px; top:170px; width:96px; height:142px; z-index:3;display: none;">
                                                        <table border="0" cellpadding="0" cellspacing="0" width="96" height="142">
                                                          <tr>
                                                            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                          </tr>
                                                          <tr>
                                                            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                          </tr>
                                                        </table>
                                                      </div>
                                                
                                                
                                                
                                                <!-- CHARACTER LAMP-->
                                                      <div id="item4" style="position:absolute; left:230px; top:130px; width:35px; height:48px; z-index:4;display: none;">
                                                        <table border="0" cellpadding="0" cellspacing="0" width="35" height="48">
                                                          <tr>
                                                            <td width="50%" height="50%" valign="top" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                            <td width="50%" height="50%" valign="top" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                          </tr>
                                                          <tr>
                                                            <td width="50%" height="50%" valign="bottom" align="left"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                            <td width="50%" height="50%" valign="bottom" align="right"> <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                                                            </td>
                                                          </tr>
                                                        </table>
                                                      </div>
                                                
                                                
                                                
                                                <!-- FENG SHUI COMPASSES-->
                                                     <div id="item5" style="position:absolute; left:315px; top:130px; width:55px; height:62px; z-index:4;display: none;">
                                                     <table border="0" cellpadding="0" cellspacing="0" width="55" height="62">
                                                          <tr>
                                                               <td width="50%" height="50%" valign="top" align="left">
                                                                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topleft.gif" width="30" height="30" alt="" border="0">
                                                               </td>
                                                               
                                                               <td width="50%" height="50%" valign="top" align="right">
                                                                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_topright.gif" width="30" height="30" alt="" border="0">
                                                               </td>
                                                          </tr>
                                                         
                                                          <tr>
                                                               <td width="50%" height="50%" valign="bottom" align="left">
                                                                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomleft.gif" width="30" height="30" alt="" border="0">
                                                               </td>
                                                               
                                                               <td width="50%" height="50%" valign="bottom" align="right">
                                                                    <img src="http://www.greenteadesign.com/test/roomsborder/img_bracket_bottomright.gif" width="30" height="30" alt="" border="0">
                                                               </td>
                                                          </tr>
                                                     </table>
                                                     </div>
    </div></div></td>
   
  </tr>
</table>
                                                
                                                <img src="http://www.greenteadesign.com/images/blank.gif" width="393" height="2"><br>
                                                
                                                <table width=393 border=0 cellspacing=0 cellpadding=0>
                                                      
                                                      <td width="131" bgcolor="#647F5B" align="center" valign="middle">
                                                            <img src="http://www.greenteadesign.com/images/darkgreen.gif" width="131" height="13"><br>
                                                      </td>
                                                      
                                                      <td width=2>
                                                            <img src="http://www.greenteadesign.com/images/blank.gif" width="2" height="1"><br>
                                                      </td>
                                                      
                                                      <td align="center" valign="middle">
                                                            <a href="japanese-decorating.html" class="roomsgreenbar">all rooms</a>
                                                      </td>
                                                      
                                                      <td width=2>
                                                            <img src="http://www.greenteadesign.com/images/blank.gif" width="2" height="1"><br>
                                                      </td>
                                                      
                                                      <td align="center" valign="middle">
                                                            <a href="tvmizuyaroom.html" class="roomsgreenbar">next room ></a>
                                                      </td>
                                                </table>                                                
                                                
                                          
                                          <img src="http://www.greenteadesign.com/images/blank.gif" width=1 height=5><br>
                                          </td>
                                          
                              
                                     </tr>
                               </table>
                        </td>
                   </tr>

<!--begin thumbs cell-->                          
                    
                    
                    <tr>
                          <td align=center valign=top width=161>
                                                                        
                                    <img src="http://www.greenteadesign.com/images/blank.gif" width="1" height="18"><br>
                                    <table width=161 border=0 cellpadding=0 cellspacing=0>
                                                                                                  
                                           
                                          <tr>
                                                
                  <td style="padding: 0px 15px 5px 0px" width=65 align=center valign=middle>
                    <a href="stereostep.html" class="small" onMouseOut="toggle('item1')" onmouseover="toggle('item1')"><img src="http://www.greenteadesign.com/images/steptansu/stereostep-2tone-thumb.jpg" width=65 height=55 alt="" border=0 class="borderimage" onMouseOver="borderit(this,'#647F5B')" onMouseOut="borderit(this,'white')"><br>
                    </a> </td>
                                                                                      
                                                  <td width=1 align=left valign=top>
                                                      <img src="http://www.greenteadesign.com/images/verticalgreenline.gif" width=1 height=70><br>
                                                </td>
                                                
                                                <td style="padding: 10px 0px 5px 15px" width=65 align=left valign=middle>
                                                      <a href="stereostep.html" class="smallbrown" onMouseOut="toggle('item1')" onmouseover="toggle('item1')">Stereo Step for office storage</a>
                                                 </td>
                                          </tr>
                                          
                                          <tr>
                                                                                            
                                                 <td style="padding: 0px 15px 5px 0px" width=65 align=center valign=middle>
                                                       <a href="5footmaru.html" class="small" onMouseOut="toggle('item2')" onmouseover="toggle('item2')"><img src="http://www.greenteadesign.com/images/tables/5footmaru-thumb.jpg" width=65 height=55 alt="" border=0 class="borderimage" onMouseover="borderit(this,'#647F5B')" onMouseout="borderit(this,'white')"><br></a>
                                                  </td>
                                                
                                                <td width=1 align=center valign=middle>
                                                      <img src="http://www.greenteadesign.com/images/verticalgreenline.gif" width=1 height=70><br>
                                                </td>      
                                                              
                                                <td style="padding: 0px 0px 5px 15px" width=65 align=left valign=middle>
                                                      <a href="5footmaru.html" class="smallbrown" onMouseOut="toggle('item2')" onmouseover="toggle('item2')">Maru Table used as a desk.</a>
                                                 </td>
                                           </tr>
                                           
                                           <tr>
                                                <td style="padding: 0px 15px 5px 0px" width=65 align=center valign=middle>
                                                       <a href="horseshoe.html" class="small" onMouseOut="toggle('item3')" onmouseover="toggle('item3')"><img src="http://www.greenteadesign.com/images/antiques/chairs/horseshoechair-thumb.jpg" width=65 height=55 alt="" border=0 class="borderimage" onMouseover="borderit(this,'#647F5B')" onMouseout="borderit(this,'white')"><br></a>
                                                  </td>
                                                                                      
                                                  <td width=1 align=left valign=top>
                                                      <img src="http://www.greenteadesign.com/images/verticalgreenline.gif" width=1 height=70><br>
                                                </td>
                                                
                                                <td style="padding: 0px 0px 5px 15px" width=65 align=left valign=middle>
                                                      <a href="horseshoe.html" class="smallbrown" onMouseOut="toggle('item3')" onmouseover="toggle('item3')">Chinese Horse Shoe Chair<br></a>
                                                 </td>
                                          </tr>
                                          
                                           <tr>
                                                <td style="padding: 0px 15px 5px 0px" width=65 align=center valign=middle>
                                                       <a href="kyotolamps.html" class="small" onMouseOut="toggle('item4')" onmouseover="toggle('item4')"><img src="http://www.greenteadesign.com/images/smalls/redkyotolarge-thumb.jpg" width=65 height=55 alt="" border=0 class="borderimage" onMouseover="borderit(this,'#647F5B')" onMouseout="borderit(this,'white')"><br></a>
                                                  </td>
                                                                                      
                                                  <td width=1 align=left valign=top>
                                                      <img src="http://www.greenteadesign.com/images/verticalgreenline.gif" width=1 height=70><br>
                                                </td>
                                                
                                                <td style="padding: 0px 0px 5px 15px" width=65 align=left valign=middle>
                                                      <a href="kyotolamps.html" class="smallbrown" onMouseOut="toggle('item4')" onmouseover="toggle('item4')">Decorative Kyoto Lamp in large<br></a>
                                                 </td>
                                          </tr>
                                          
                                          <tr>
                                                <td style="padding: 0px 15px 5px 0px" width=65 align=center valign=middle>
                                                       <a href="compasses.html" class="small" onMouseOut="toggle('item5')" onmouseover="toggle('item5')"><img src="http://www.greenteadesign.com/images/smalls/compasses-thumb.jpg" width=65 height=55 alt="" border=0 class="borderimage" onMouseover="borderit(this,'#647F5B')" onMouseout="borderit(this,'white')"><br></a>
                                                  </td>
                                                                                      
                                                  <td width=1 align=left valign=top>
                                                      <img src="http://www.greenteadesign.com/images/verticalgreenline.gif" width=1 height=70><br>
                                                </td>
                                                
                                                <td style="padding: 0px 0px 5px 15px" width=65 align=left valign=middle>
                                                      <a href="compasses.html" class="smallbrown" onMouseOut="toggle('item5')" onmouseover="toggle('item5')">Feng Shui Compasses in two sizes<br></a>
                                                 </td>
                                          </tr>
                                    </table>
                              </td>
                        </tr>
<tr>
                              <td width=642 align=left valign=top colspan=2>
                                    <table width="642">
                                          <td width="201">
                                                <img src="http://www.greenteadesign.com/images/blank.gif" width="201" height="1"><br>
                                          </td>
                                          
                                          <td class="rooms">
                                                This home office was designed to keep the space open and uncluttered. The clean lines of our <a href="5footmaru.html" class="roomsbrown"><b>Maru Table</b></a> offer a great alternative to a heavy, boxy desk while still giving you lots of surface space. The <a href="5footmaru.html" class="roomsbrown"><b>Stereo Step</b></a> doubles as a funky cabinet with varied storage possibilities. Since it is reversible and modular it can be set up in different configurations. The table is available in different sizes; our step chests are available in different styles, stains and hardware.<br><br>
                                          </td>
                                    </table>
                                          
                                    <table width=642 border=0 cellspacing=0 cellpadding=0>
                                          <td width=8 align=left valign=top bgcolor="#ffffff">
                                            
                                            <img src="http://www.greenteadesign.com/images/blank.gif" width=8 height=1 alt=""><br>
                                      </td>
                                                      
                                          <td width=642 colspan=2 align=right valign=top>
                                                <table width=642 border=0 cellspacing=0 cellpadding=0>
                                                      <tr>
                                                            <td width=642 align=left valign=top colspan=3>
                                                                  <img src="http://www.greenteadesign.com/images/greenline.gif" width=651 height=1 alt=""><br>
                                                            </td>
                                                      </tr>
                                                      <tr>
                                                            <td width=642 align=left valign=top>                              
                                                                  <table width=642 border=0 cellspacing=0 cellpadding=0>
                                                                        <td width=1 align=left valign=top>
                                                                              <img src="http://www.greenteadesign.com/images/verticalgreenline.gif" width=1 height=14 alt=""><br>
                                                                        </td>                                                            
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="index.html" class="catmenulink"><center>home</center></a>
                                                                        </td>
                                                            
                                                                        <td align=center valign=top>
                                                                              <a href="step-tansu.html" class="catmenulink"><center>steps</center></a>
                                                                        </td>
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="japanese-design-tables.html" class="catmenulink"><center>tables</center></a>
                                                                        </td>
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="storage-cabinets.html" class="catmenulink"><center>cabinets</center></a>
                                                                        </td>
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="japanese-decorating.html" class="catmenulink"><center>rooms</center></a>
                                                                        </td>

                                                                        <td align=center valign=top>
                                                                              <a href="japanese-furniture.html" class="catmenulink"><center>antiques</center></a>
                                                                        </td>
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="room-divider-screens.html" class="catmenulink"><center>screens</center></a>
                                                                        </td>
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="japanese-lanterns.html" class="catmenulink"><center>smalls</center></a>
                                                                        </td>
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="graincooler.html" class="catmenulink"><center>customize</center></a>
                                                                        </td>
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="oriental-furniture.html" class="catmenulink"><center>articles</center></a>
                                                                        </td>
                                                                        
                                                                        <td align=center valign=top>
                                                                              <a href="javascript:contact()" class="catmenulink"><center>contact</center></a>
                                                                        </td>
                                                                        
                                                                        <td width=1 align=right valign=top>
                                                                              <img src="http://www.greenteadesign.com/images/verticalgreenline.gif" width=1 height=14 alt=""><br>
                                                                        </td>
                                                                  </table>
                                                            </td>
                                                      </tr>
                                                      
                                                      <tr>
                                                            <td width=642 align=left valign=top colspan=3>
                                                                  <img src="http://www.greenteadesign.com/images/greenline.gif" width=651 height=1 alt=""><br>
                                                            </td>
                                                                                                                                    
                                                      </tr>
                                                </table>
                                          </td>
                                    </table>
                              </td>
                        </tr>
                  </table>
            </td>
      </table>
      </center>
      </body>
</html>
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now