repeat image for border

Discussion in 'Javascript' started by Jon Slaughter, Mar 11, 2007.

  1. Can someone point me to some resources on how to tile an image to create a
    border?

    <td>
    <img src="images/MTile.png" width="1" height="30" alt=""></td>

    I have something like that where I need to repeat x times where x depends on
    the width of the browser. (Not sure if its a good idea to use a bitmap of
    width 1 but I could use one that is larger and then use both(e.g., maybe one
    that is 10 pixels wide and repeat that as needed and let the 1 pixel wide
    one get the rest(I have some "ends" on the border that I need to display too
    so it sorta needs to be exact))

    Not sure how to do this with js(just learning it) but obviously I just need
    to get the width of the border and then figure out how many times I need to
    repeat the code.

    I have several issues I am wondering about though. First off is that I have
    used photoshop imageready to create a roll over menu bar but in firefox when
    I use the down state it leaves a selection rectangle around the image but in
    IE it does not do this. It does not look nice in firefox and I'm sure there
    is some way to prevent it. (for some reason it selects it when you click the
    menu item and this probably can be turned off using css?)

    Another issue, which isn't a big deal, is that I'm using symmetric bitmaps
    to "cap" the border. I was wondering if it is possible to flip the image
    using html or js so that I don't have to have a seperate image for it?

    Thanks,
    Jon
    Jon Slaughter, Mar 11, 2007
    #1
    1. Advertising

  2. Jon Slaughter

    OmegaJunior Guest

    On Sun, 11 Mar 2007 08:59:29 +0100, Randy Webb <>
    wrote:

    > Jon Slaughter said the following on 3/11/2007 3:02 AM:
    >> Can someone point me to some resources on how to tile an image to
    >> create a border?

    >
    > news:comp.infosystems.www.authoring.stylesheets
    >
    >> <td>
    >> <img src="images/MTile.png" width="1" height="30" alt=""></td>
    >> I have something like that where I need to repeat x times where x
    >> depends on the width of the browser. (Not sure if its a good idea to
    >> use a bitmap of width 1 but I could use one that is larger and then use
    >> both(e.g., maybe one that is 10 pixels wide and repeat that as needed
    >> and let the 1 pixel wide one get the rest(I have some "ends" on the
    >> border that I need to display too so it sorta needs to be exact))
    >> Not sure how to do this with js(just learning it) but obviously I just
    >> need to get the width of the border and then figure out how many times
    >> I need to repeat the code.

    >
    > CSS is your friend.


    Yes. Isn't it possible to set it using html only? Although you wouldn't be
    able to set the direction of repetition. I know this works for the body
    element. Maybe this works for a td element as well?

    Something like <td background="myimage.png"> &nbsp; </td>

    (The non-breaking space is added because some browsers ( *cough* Microfost
    Internet Exploder *cough* ) refuse to show empty table cells even when
    specifically instructed to show them. )

    --
    Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
    OmegaJunior, Mar 11, 2007
    #2
    1. Advertising

  3. Jon Slaughter

    OmegaJunior Guest

    On Sun, 11 Mar 2007 20:02:21 +0100, Randy Webb <>
    wrote:
    >
    > Like I said, I stopped using HTML 3.2 almost 10 years ago.
    >


    Never burn ships that sail! With all the browser incompatibilities knowing
    good ol' html does come in handy.


    --
    Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
    OmegaJunior, Mar 12, 2007
    #3
  4. Jon Slaughter

    OmegaJunior Guest

    On Mon, 12 Mar 2007 02:22:18 +0100, Jim Land <RrrrFfffTttt hotmail.com>
    wrote:

    > "Jon Slaughter" <> wrote in news:LPNIh.9212
    > $:
    >
    >> I was wondering if it is possible to flip the image
    >> using html or js

    >
    > Using CSS, actually, using "filter:flipv;".
    >
    > http://www.google.com/search?q=css filter flipv
    >
    > Or fliph if you prefer. Or both.


    Yay for MS-only solutions! We all know the internet was invented and owned
    by Bill Gates, right?

    --
    Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
    OmegaJunior, Mar 16, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tshad
    Replies:
    0
    Views:
    2,257
    tshad
    Jan 31, 2005
  2. phl
    Replies:
    1
    Views:
    4,345
    Martin Jay
    Jun 8, 2006
  3. Coder
    Replies:
    1
    Views:
    696
    Cowboy \(Gregory A. Beamer\)
    Jun 24, 2006
  4. =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=

    border-color: #003366; border-width: 2px;

    =?UTF-8?B?TWFydGluIFDDtnBwaW5n?=, Jul 17, 2006, in forum: HTML
    Replies:
    64
    Views:
    3,528
    Adrienne Boswell
    Jul 30, 2006
  5. jc
    Replies:
    1
    Views:
    945
    Bergamot
    Mar 19, 2008
Loading...

Share This Page