SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    dude, this site has a ton of errors.

    first, you need a valid doctype:
    http://www.alistapart.com/articles/doctype/

    add the doctype, and fix the errors. this will help a lot.

    PS - with XHTML, you need to close image tags:
    <img src="pic1.jpg" alt="" />

    and if you're using a ampersand ( & ), you need to code it with &amp; - otherwise you'll get errors.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Sometimes that's so, and sometimes not. I think you're right this time.

    I didn't look at the page, but I've done the same technique several times. You want that no matter what the mouse is hovering over (or where it is on the page), the new image or text always shows in the same spot, like here or here?

    You'll want "position: relative" on the thing the images/etc reference their positions from -- NOT the part you're hovering over.

    Okay, now I've looked. No clue why you're using JS for this instead of CSS, since you're not doing anything special like fade-ins or timers, but since I can't look at the images each on their own, are they all exACTly the same height and width? It's difficult for me to tell because hovering on the td (just a little above or a little below the actual <a>) shows the default image, so I can't with the mouse go exactly from link 1 to link2 and so on. Second, it looks like the pinkish box is actually growing (the bottom seems to stay in the same place, but the top part seems to extend... as if some padding is being added to the top of the image?).

    I guess I can't go any further with this, since I have zero JS skills... looks like the JS is doing everything.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I think all your positioning is with the Javascript, which is why I can't figure it out.
    Is it calculating the position somehow?

    You asked where the images were in Eric's demo. They're inside the links themselves : )

    The CSS one is nice, it just can't do some things JS can (fade, timing) though I don't see you using them... you could seriously reduce some page size if you switch to the CSS version if you want.

    In the CSS version, an image or a span is a child of the link (or whatever's being hovered). A span is nice if you were also wrapping text and an image together but I think you can do it just with the image (I always have text showing up so I always use a span). Whatever it is, it needs to be a valid child of <a> so it's gotta always be inline. No <p>s or anything here.

    <a href="#">textitty text stuff<img src="foo.gif"></a>

    In the CSS you would take the container of the a's (yours is all in tables, so it's a little harder) and set it to position: relative (because that will tell absolutely positioned children where they're supposed to be using as a reference). The span or image is hidden until the a is hovered:

    CSS
    a img {
    position: absolute;
    left: -999em; <--- this could also be margin-left: -999em... same effect, though some browser somewhere wants you to also set the top margin very high as well--
    In fact, in this case you should also set a top or bottom coord, otherwise the images will still try to line up with the a's
    top: 0; or something
    }

    When the a is hovered, the image or span appears!
    a:hover img {
    left: -1em; <-- this number is determined by where its relatively positioned parent is... so you could start with a small number and see where it sits, and change the number until it works
    top: 1em; (or whatever)
    }

    Anyway, the idea is something like that. You'd want to add :focus to wherever you have :hover so people tabbing through the links get the image too.

    It seems really simple to me, but that's cause I've been doing it several times and I can't read or write Javascript. The nice thing about the CSS one is that it's fast and works even when Javascript is off.

    Do you want to try this?

    *Edit, okay, I think you've got the whole group wrapped in a nested table. Is that right? That table (we should give it an id for easier CSS-ing) will be the parent with the position: relative, because this parent needs to be both a parent of the part with the image (a td in your case) AND also parent of the links. An absolutely positioned thing looks for the nearest positioned PARENT so we couldn't reference the other td that only holds the pink part where the images appear.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Hi,
    luckily this is an easy one for me : ) Paul first told me about it.

    IE has this thing where it doesn't like to either change display states, or change big positions, without a little extra push. It's not Haslayout apparently, just some IE thing. What you do is you tell it something extra or special for the hover. You now have this:
    Code:
    a img {
    position: absolute;
    left: -999em; 
    }
    a:hover img {
    left: 10em; 
    top: 2em; 
    }
    So you have the img listed, and then the image on :hover of the a. Great for all browsers except IE. Here's the extra push for IE:
    Code:
    a img {
    position: absolute;
    left: -999em; 
    }
    a:hover {
      visibility: visible;
    }
    a:hover img {
    left: 10em; 
    top: 2em; 
    }
    You don't have to use visibility:visible but since that doesn't change how anything looks for any browsers it's a nice one to use. Other things that will help would be for instance changing the background colour, or setting the text to bold or something like that. But then your thing looks different : )

    One thing you might want to add to such code for accessibility reasons is :focus and :active. :focus for the people keyboarding through your page, and :active for IE6 because it thinks :active means :focus (and doesn't have a clue what :focus is).

    So something like:
    a:hover, a:active {
    visibility: visible;
    }
    a:focus img, a:hover img, a:active img {
    left: 10em;
    top: 2em;
    }

    A nice extra for people, even if it is more code.

  5. #5
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I'm surprised it's working in IE because that visibility:visible generally needs to be a declaration of its own (and not added with the other :hover declarations).

    You would need to add position: relative to that nested table (so you'd have to give that table a name, like table id="imagemenu" or something). For the background I'd just have that always there, set a background colour or background image on that td.

    Since the image should be positioned in relation to that nested table, and since the image itself is position: absolute, it can sit over anything.

    You'd also want the first (default) image to just always be sitting in that td. The other images can just sit on top of it and cover it up.

    I can't really go much further unfortunately because I really suck at layout tables and I'm not really wholly sure how to impliment this technique on a tabled page. I think it can be done fine, I'm just not real sure how you'd do that with the tables.

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Eh, I was sick and laying awake in bed last night and thought about your tables. I'll give it a try.

    Add the bolded part to your HTML:

    Code:
    <td valign="top"><table id="imgmenu" width="100%" border="0" cellspacing="0" cellpadding="0">
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25"  class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Chemical Process Industry<img src="images/img_industry_1.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Paper &amp; Pulp Industry<img src="images/img_industry_2.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Agriculture &amp; Irrigation Industry<img src="images/img_industry_3.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Nuclear Power Industry<img src="images/img_industry_4.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Pharmaceutical Industry<img src="images/img_industry_5.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Automotive Industry<img src="images/img_industry_6.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Lining/other Applications<img src="images/img_industry_7.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Waste Water Management<img src="images/img_industry_8.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">Metallurgy Industry<img src="images/img_industry_9.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                      <tr>
                                                        <td height="25" class="pro_links_highlight"><img src="images/img_arrow_bullet.gif" width="3" height="5" hspace="5" /><a href="index.html" class="pro_links_highlight">High Purity Applications<img src="images/img_industry_10.jpg" width="182" height="126"></a></td>
                                                      </tr>
                                                      <tr>
                                                        <td width="100%" height="1" background="images/img_greyline_bg1.gif"><img name="" src="" width="1" height="1" alt="" /></td>
                                                      </tr>
                                                    </table></td>
    Code:
    #imgmenu {
      position: relative;
    }
    #imgmenu td a img {
      position: absolute; <--this also makes it a block, so you know
      left: -9999em; <--you could also have margin-left... might matter for keyboarders
      top: -999em; <--you'll need 2 coordinates to get the image to line up vertically
    }
    #imgmenu td a:hover {
      visibility: visible; /*IE*/
    }
    
    #imgmenu td a:hover img {
      left: -200px; <--this number, start low so you can see where it goes... and change the amount until it sits to the left of your table with menu (#imgmenu)
      top: 100px; <--also a guess, but it should mean 100px from the top of the table called "imgmenu" and not the a's.... these amounts could also be margin-left and margin-top... I've heard margins work on :focus better than left and top
    }
    That's out of my head, but I think the general idea is okay, because that menu thing is in that nested table... and where the image is (or was, in your javascripted version) was in the parent table's td. So, where you have the pink part, just have that in that td as a permanent background image, and you could even have a copy of the first image sitting there as a background too (the chemical) so there's an image when people aren't hovering.

    The images should all be in relation to the table, and not the menu items.

    I will look at the result of that.

  7. #7
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Ah, if you wanted a normal menu, I can write that but I have no clue how to stick that in a tabled page. I think it'll be more work than it's worth, unless you plan on rewriting the whole page out of tables (not a bad idea)...

    I'd make it a ul with a width (in CSS) of 17em's. The reason is so that the menu can grow in width if people text-enlarge. 17em is almost the width of your menu now.

    Code:
    <ul id="imgmenu" >
      <li><a href="index.html">Chemical Process Industry<img src="images/img_industry_1.jpg" width="182" height="126" alt="Chemical Process"></a></li>
      <li><a href="index.html">Paper &amp; Pulp Industry<img src="images/img_industry_2.jpg" width="182" height="126" alt="Pulp Industry"></a></li>
      <li><a href="index.html">Agriculture &amp; Irrigation Industry<img src="images/img_industry_3.jpg" width="182" height="126" alt="Agriculture and Irrigation"></a></li>
      <li><a href="index.html">Nuclear Power Industry<img src="images/img_industry_4.jpg" width="182" height="126" alt="Nuclear Power"></a></li>
      <li><a href="index.html">Pharmaceutical Industry<img src="images/img_industry_5.jpg" width="182" height="126" alt="Pharmaceuticals"></a></li>
      <li><a href="index.html">Automotive Industry<img src="images/img_industry_6.jpg" width="182" height="126" alt="Automotive"></a></li>
      <li><a href="index.html">Lining/other Applications<img src="images/img_industry_7.jpg" width="182" height="126" alt="Lining and other Applications"></a></li>
      <li><a href="index.html">Waste Water Management<img src="images/img_industry_8.jpg" width="182" height="126" alt="Wastewater Management"></a></li>
      <li><a href="index.html">Metallurgy Industry<img src="images/img_industry_9.jpg" width="182" height="126" alt="Metallurgy"></a></li>
      <li><a href="index.html">High Purity Applications<img src="images/img_industry_10.jpg" width="182" height="126" alt="High Purity Applications"></a></li>
    </ul>
    (you should have alt text in HTML images)
    You'd set a width on the UL, and could either set a 1px dotted grey border on the bottom of the whole list OR you could set a class on the last li and tell it to have a bottom border.

    The li's would be set to display: block and if Haslayout is needed, width: 100%, and give the li's a dotted top border
    Code:
    #imgmenu {
      position: relative; (for the images)
      width: 17em;
      margin: 0;
      padding: 0;
      text-decoration: none;
      list-style: none;
      maybe add border-bottom: 1px dotted #c7c7c7; or something...
    other stuff...
    }
    #imgmenu li {
      display: block;
      width: 100%; (if needed, this should be the default anyway)
      border-top: 1px dotted #c7c7c7; (IE will turn dotted into dashed, sorry)
      set your left padding for the bullet image and
      set background image of bullet here, position 0 50% or left center....
    }
    #imgmenu a {
      or set padding here.  You could also set this to block if you want... your choice
      set font size and line height here.  This will set the top-bottom space between the borders and text... also, try to set your font in either em or % so your menu can grow)
    anything else
    }
    These are all out of my head and not tested but it's a pretty typical list. Again, I'm not sure you won't find more problems trying to stick such a list in a tabled page.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    welcome.

    I also just thought of something, and didn't see it as I was typing, but since all the images are the same size, you could take that out of the HTML as well and stick it in the css
    #imgmenu li a img {
    width: blah;
    height: blah;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •