Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2002
    Location
    Vancouver, BC
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please Help : Change menu to image Boarder

    Appreciated some help with this example JS script I found. It's a pull down meny.

    http://www.camarosource.ca/IM_MENU/e..._IM_MENU_2.htm is the script. I am trying to figure out how to change the menu that opens up (has red bars on top and bottom) to be an IMAGE border such as http://www.camarosource.ca/IM_MENU/sample_border.gif The script for the javascript is all here http://www.camarosource.ca/IM_MENU/ Please help if you can. Thanks so much! :-)

    basically so when you rollover rather than the red bars showing, it's the checker border.

    Please help.Thanks.

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't tell which class is the one with the border, imsc or imsubc. Whichever it is, you could just make your image border a background (but you would need to make all the popup menus the same size.

    If you don't want to do this, then place the image inside each menu popup div. Then, have a div that contains the text of each popup, for example, "about us". To get these divs to hover over the image, you will need to use CSS. Give these textual divs a float property, and set their top margins to a negative number to push them up on top of the backgrounds.

    Or, you could use absolute positioning and z-indices.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    New Coder
    Join Date
    Aug 2002
    Location
    Vancouver, BC
    Posts
    67
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That sounds like it could work (background). But I am thinking the other example of "If you don't want to do this, then place the image inside each menu popup div. Then, have a div that contains the text of each popup, for example, "about us". To get these divs to hover over the image, you will need to use CSS. Give these textual divs a float property, and set their top margins to a negative number to push them up on top of the backgrounds." could be better.

    But i'm not sure how exactly to do that, could you please give me an example? Thanks so very much! :-)

  • #4
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure, no problem. One approach is to first decide the dimensions of the menu popup section. Let's say we want it 100px x 75px. The the actual popup div would be coded as follows:

    Code:
    <div id="popup" style="width:100px; height:75px">
      <img src= 'http://www.camarosource.ca/IM_MENU/sample_border.gif' style="width:100px; height:75px" />
      <div style="width:100px; height:75px; position: absolute; top:-75px; z-index:2">
        <span id="text1" style="margin:auto">blahblahblah</span>
      </div>
    </div>
    Now, what you have is the main popup with the background image nestled snugly inside it. The, you have the div containing the text right above, and the top setting slides it back up 75px (it starts just below the image because that's where it finds it in the code). I put an extra span tag inside the div so that you can style just the text as opposed to the whole div, although this isn't totally necessary. At any rate, this should work. If not, just play around with the numbers a little bit. The theory is right. Let me know what you think. By the way, the margin:auto should center that text horizontally and vertically.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."


  •  

    Posting Permissions

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