...

View Full Version : Please Help : Change menu to image Boarder



camarosource
01-13-2007, 10:13 AM
Appreciated some help with this example JS script I found. It's a pull down meny.

http://www.camarosource.ca/IM_MENU/example_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.

TripperTreats
01-13-2007, 01:42 PM
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.

camarosource
01-13-2007, 08:33 PM
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! :-)

TripperTreats
01-14-2007, 12:40 AM
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:


<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum