 |
| |
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-06-2000 00:26
Sorry to bug all of you scriptomaniacs out there, but I'm really interested in how I could get this to work.
I have no problem with regular rollovers--they're a snap for me. The problem with this is the diagonal boundaries between buttons...I'm not sure how to approach the problem. Maybe div's could be used to overlap...Help me out please. <img border=0 align=absmiddle src="http://www.ozones.com/forum/smile.gif">
|
Skaarjj
Maniac (V) Mad Scientist
From: :morF
Insane since: May 2000
|
posted 08-06-2000 01:32
You could try going to www.builder.com and using their tute for rollover imagemaps. That's one way you could solve that diagonal slash problem.
What's mine is mine, and what's yours is mine to - First Rule of a Dictatorship
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-06-2000 03:14
which tute? There's like 4...Anyway, I'm trying to make a div visible onMouseOver, but I'm having problems...what's wrong with my code?
<div id="news" style="position: absolute; left: 0px; top: 0px; visibility: hidden"><a href="news.html" onMouseOver="document.all.news.style.visibility='visible';"><img border="0" src="../Photoshop%20Stuff/news_over.gif" width="84" height="13"></a>
[This message has been edited by mbridge (edited 06-08-2000).]
|
Skaarjj
Maniac (V) Mad Scientist
From: :morF
Insane since: May 2000
|
posted 08-06-2000 12:56
It could be those two dots at the start of the img src. It's enough just to do src="/Photoshop%20Stuff/news_over.gif". Also...try doing something like a hyphen between Photoshop and Stuff, rather than a %20 space.
What's mine is mine, and what's yours is mine to - First Rule of a Dictatorship
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-06-2000 15:26
thats cuz the images are still on my hard drive...
|
bitdamaged
Maniac (V) Mad Scientist
From: 100101010011 <-- right about here
Insane since: Mar 2000
|
posted 08-07-2000 04:05
Okay here is one way I have accomplished this kind of effect. You can keep these navs as one layer as they are right now.
then create individual images with the over state for each nav. Make them gifs with everything out side the trapezoid shape transparent.
Then make wholly transparent gifs identical to the over state gifs. (make sense? these images are just transparent images that will overlap the other two.
Then using layers and CSS-P to place these layers overlapping with the default state on the bottom, the over state next with all the visibities set to hidden and the transparent gifs on the top.
Then what you want to do is make the transpaent gifs the links. and when you mouseover them they turn the over states visibility to visible and onMouseout they turn the visibility off.
Make sense? I'll make an example
Now
Walking the Earth like Kane
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-11-2000 03:48
good call on that shit bitdamaged
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-11-2000 04:25
now I need to write the code for the bottom bar to drop down from behind the top one when the user clicks on gallery
|
bitdamaged
Maniac (V) Mad Scientist
From: 100101010011 <-- right about here
Insane since: Mar 2000
|
posted 08-11-2000 05:02
If you need a hand, post a link and I'll check it out
Walking the Earth like Kane
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 08-11-2000 16:57
Transparency won't work. Even if you can see through an image, the image is still there; when it's clicked on, the click won't go to whatever's behind it. I recommend a different course of action.
Split the graphics as though the diagonal borders were not actually diagonal. Have square buttons. That way, the "news" button will have some of the "overview" button on it, and vise-versa. But that overlapping part is so small that your users will never notice it, guaranteed. People don't put their mouse on spaces like that; they go directly to the words themselves.
So, my advice is, use vertical borders between the buttons, but make them graphically appear to have diagonal ones. As for transparency on the edges of the bar, (next to "sites" and "flash") use transparent gifs for that.
Does that help?
|
Wes
Paranoid (IV) Mad Scientist
From: Inside THE BOX
Insane since: May 2000
|
posted 08-11-2000 19:13
But, you don't need the click to go to whatever's behind it. You link the transparent image and click it.
The "off" state image just sits there and does nothing. But, the illusion is that it changes, when in fact, it is just being covered up by a transparent image that has been swapped for an "on" state image.
I had never thought of that before, it's pretty clever... I just did some tabs that I wish I had used this technique on.
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-11-2000 21:13
Ok, I'm using bitdamaged's method, but I'm having some trouble.
http://www.stas.net/liquid/test.htm
<html>
<head>
<title>Liquid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;
if (nn) {
docObj = 'document.'
styleObj = '';
}
if (ie) {
docObj = 'document.all.';
styleObj = '.style';
}
function show(layer){
eval(docObj + layer + styleObj + '.visibility = "visible"');
}
function hide(layer){
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}
</script>
<style type="text/css">
#liquid_int
{position:absolute; top: 0; left: 0; z-index: 10; visibility: visible;}
#news_over
{position:absolute; top: 0; left: 0; z-index: 20; visibility: hidden;}
#blank
{position:absolute; top: 0; left: 0; z-index: 30; visibility: visible;}
</style>
</head>
<body bgcolor="#FFFFFF">
<div id="liquid_int"><img style="position: absolute; top: 0; left: 0; z-index: 10" border="0" src="images/liquidint0.gif" width="727" height="26">
</div>
<div id="news_over"><img style="position: absolute; top: 0; left: 0; z-index: 20" border="0" src="images/news_over.gif" width="84" height="13">
</div>
<div id="blank"><a href="news.htm" onMouseOver="show('news_over')" onMouseOut="hide('news_over')"><img style="position: absolute; top: 0; left: 0; z-index: 30" border="0" src="images/blank.gif" width="84" height="13"></a>
</div>
</html>
IE works flawlessly, but the css positioning is totally messed in NN. Please help!
[This message has been edited by mbridge (edited 11-08-2000).]
|
bitdamaged
Maniac (V) Mad Scientist
From: 100101010011 <-- right about here
Insane since: Mar 2000
|
posted 08-11-2000 21:19
ACtually just to clarify a bit, none of the images are actually changing. There are 3 layers. (OFF STATE)>>(ON STATE)>>(TRANSPARENT BUTTON) the transparent button is what takes care of links, mouseover and mouseoff states. If it is a transparent gif you will not see it, you will see the layer underneath it. Normally that will be the bottom image (the OFF STATE) when you mouseover it however the ON STATE becomes visible.
But remember it is still under that transparent gif.
It is kind of like a picture frame with glass over the image. when you touch the glass the invisible picture between the glass and the painting becomes visible. when you mouseoff it becomes invisible again.
I haven't looked at the code lately but this is (I think) basically how doc's slider menu on his main page works. instead of having images become visible/hidden he has a slider that becomes visible when you mouse over the links and follows the cursor. (It is probably ALWAYS following the cursor but it only becomes visible when you mouseover the link) Anyway I did something similar with the slider and that is where I got this idea for non-square links
But actually thinking about it, Wes your solution of swapping out the transparent image for the over state should work as well I've just not tried it.
Walking the Earth like Kane
|
bitdamaged
Maniac (V) Mad Scientist
From: 100101010011 <-- right about here
Insane since: Mar 2000
|
posted 08-11-2000 21:22
mbridge, sorry I must have been typing that last the same time as you were posting your code so it doesn't apply to the code.:-)
Hmm but the link I don't think is relevant I'm not sure though
Walking the Earth like Kane
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-11-2000 22:11
Bitdamaged-I understand how it works, was the clarification for Slime? Anyway, the link works for me, it was down shortly after I posted the msg because I forgot to upload so try it again please. Thanks!
|
Wes
Paranoid (IV) Mad Scientist
From: Inside THE BOX
Insane since: May 2000
|
posted 08-12-2000 00:56
Ahh, I see what you mean now, bd. You have one layer on that bottom that can be one long image of the "off" states, a layer on top with transparents in a table lining up with the meaty portions of the buttons, then several layers in between, one for each of the buttons that turn visible when you roll over the relative transparent.
The way I was thinking was having one layer on the bottom of the "off" states, then a layer on top of transparents that swap out for the "on" states. Swapping images instead of changing the visibility of layers. Then again, because of the diagonals, you would have to have two layers of transparents, a transparent for every other button. Total of three layers.
Just goes to show that there's always more than one way to do something, I guess.
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-13-2000 00:25
Ok, here's the interface with all of the mouseovers working: http://www.stas.net/liquid/test.htm
It looks great in IE, but the css positioning is *totally* wrong in netscape. Here's the completed code, I'm begging you to help me clean it up for netscape use. Thanks in advance!
<head>
<title>Liquid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;
if (nn) {
docObj = 'document.'
styleObj = '';
}
if (ie) {
docObj = 'document.all.';
styleObj = '.style';
}
function show(layer){
eval(docObj + layer + styleObj + '.visibility = "visible"');
}
function hide(layer){
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}
</script>
<style type="text/css">
#liquid_int
{visibility: visible;}
#news_over
{visibility: hidden;}
#overview_over
{visibility: hidden;}
#gallery_over
{visibility: hidden;}
#services_over
{visibility: hidden;}
#contact_over
{visibility: hidden;}
#blank
{position: absolute; top: 0px; left: 0px; visibility: visible; z-index: 70}
</style>
</head>
<body bgcolor="#FFFFFF">
<div id="liquid_int"><img style="position: absolute; top: 0px; left: 0px; z-index: 10" border="0" src="images/liquidint0.gif" width="727" height="26">
</div>
<div id="news_over"><img style="position: absolute; top: 0px; left: 0px; z-index: 20" border="0" src="images/news_over.gif" width="84" height="13">
</div>
<div id="overview_over"><img style="position: absolute; top: 0px; left: 74px; z-index: 30" border="0" src="images/overview_over.gif" width="89" height="13">
</div>
<div id="gallery_over"><img style="position: absolute; top: 0px; left: 153px; z-index: 40" border="0" src="images/gallery_over.gif" width="89" height="13">
</div>
<div id="services_over"><img style="position: absolute; top: 0px; left: 232px; z-index: 50" border="0" src="images/services_over.gif" width="89" height="13">
</div>
<div id="contact_over"><img style="position: absolute; top: 0px; left: 643px; z-index: 60" border="0" src="images/contact_over.gif" width="84" height="13">
</div>
<div id="blank">
<table width="727" height="13" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="77"><a href="news.htm" onMouseOver="show('news_over')" onMouseOut="hide('news_over')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="overview.htm" onMouseOver="show('overview_over')" onMouseOut="hide('overview_over')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="gallery.htm" onMouseOver="show('gallery_over')" onMouseOut="hide('gallery_over')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="services.htm" onMouseOver="show('services_over')" onMouseOut="hide('services_over')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width-"272"><img src="images/blank.gif" width="332" height="13" border="0"></td>
<td width="77"><a href="contact.htm" onMouseOver="show('contact_over')" onMouseOut="hide('contact_over')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
</tr>
</table>
</div>
</html>
And thanks to bitdamaged for the idea behind the script.
|
bitdamaged
Maniac (V) Mad Scientist
From: 100101010011 <-- right about here
Insane since: Mar 2000
|
posted 08-13-2000 00:27
mbridge,
Okay here is what I did, take the style information out of your "img" tags. I think this was confusing netscape.
Netscape doesn't like style info inside tags. It likes all style info declared at the top of the page (you did this anyway so the second bit of style info is redundant anyway.
The thing is that when I did that Netscape places the "ontop" layers two pixels below the bar but IE is fine.
I have seen this before and I am trying to remember the fix I'll let you know if I whup it.
I coud put a browser detect but I am trying to avoid that.
Walking the Earth like Kane
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-13-2000 00:57
Yea, I was forced to place the style information inside the <img> tags because IE was offsetting the layers 3 pixels down. I hope there's a fix! Thanks for all your help bitdamaged.
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-13-2000 22:41
Ok, I figured out a few netscape "bugs." Netscape doesn't recognize style "id's" with "_" in them. Netscape seems to place layers overlapping layers 2px below each other while IE places them 3px apart. This is obviously a major problem. http://www.stas.net/liquid/test2.htm
It looks fine in IE, but the mouseovers jump one pixel down in netscape. Here's the updated code:
<html>
<head>
<title>Liquid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;
if (nn) {
docObj = 'document.'
styleObj = '';
}
if (ie) {
docObj = 'document.all.';
styleObj = '.style';
}
function show(layer){
eval(docObj + layer + styleObj + '.visibility = "visible"');
}
function hide(layer){
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}
</script>
<style type="text/css">
#liquidint
{position: absolute; top: 0px; left: 0px; z-index: 10; visibility: visible}
#newsover
{position: absolute; top: -3px; left: 0px; z-index: 20; visibility: hidden}
#overviewover
{position: absolute; top: -3px; left: 74px; z-index: 30; visibility: hidden}
#galleryover
{position: absolute; top: -3px; left: 153px; z-index: 40; visibility: hidden}
#servicesover
{position: absolute; top: -3px; left: 232px; z-index: 50; visibility: hidden}
#contactover
{position: absolute; top: -3px; left: 643px; z-index: 60; visibility: hidden}
#blank
{position: absolute; top: 0px; left: 0px; visibility: visible; z-index: 70}
</style>
</head>
<body bgcolor="#FFFFFF">
<div id="liquidint"><img border="0" src="images/liquidint0.gif" width="727" height="26">
</div>
<div id="newsover"><img border="0" src="images/news_over.gif" width="84" height="13">
</div>
<div id="overviewover"><img border="0" src="images/overview_over.gif" width="89" height="13">
</div>
<div id="galleryover"><img border="0" src="images/gallery_over.gif" width="89" height="13">
</div>
<div id="servicesover"><img border="0" src="images/services_over.gif" width="89" height="13">
</div>
<div id="contactover"><img border="0" src="images/contact_over.gif" width="84" height="13">
</div>
<div id="blank">
<table width="727" height="13" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="77"><a href="news.htm" onMouseOver="show('newsover')" onMouseOut="hide('newsover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="overview.htm" onMouseOver="show('overviewover')" onMouseOut="hide('overviewover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="gallery.htm" onMouseOver="show('galleryover')" onMouseOut="hide('galleryover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="services.htm" onMouseOver="show('servicesover')" onMouseOut="hide('servicesover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width-"272"><img src="images/blank.gif" width="332" height="13" border="0"></td>
<td width="77"><a href="contact.htm" onMouseOver="show('contactover')" onMouseOut="hide('contactover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
</tr>
</table>
</div>
</html>
Unless someone knows a fix, I guess I'll be forced to do a netscape and an IE version. <img border=0 align=absmiddle src="http://www.ozones.com/forum/frown.gif">
|
little osh
Bipolar (III) Inmate
From: Wales, UK
Insane since: Jun 2000
|
posted 08-15-2000 13:52
PART 1:
I'm sure that your method of doing this is too complicated.
I may be missing something very obvious here, but what's wrong with using those HTML tags (which I have temporarily forgotten the name of - because I left my book at home again), which you can use to select arbitrary points to define your tag area? (Actually, I think the tag may be <AREA>.)
For each area then, you can put an onMouseOver event, and allow the appropriate menu highlight to appear.
Also, you don't need the top, transparent, layer. You could simply place the onMouseOut event on the hilight image, rather than the transparent one. The onMouseOut and OnMouseOver events don't have to appear in the same <A> tag!
This method (if it works), will only require 2 layers!
PART 2:
There is an entirely diferent method to solving this problem.
Allow each link to be a rectangular shape. When onMouseOver is triggered, it is not only the highlighted link that has to change, but the ones to the left and right of it too.
So for example, in your case, when the user places his mouse over 'Gallery', the 'Overview' and 'Services' images also have to change. The 'Overview' image would be replaced by a similar one, but with its right side hilighted, while the 'Gallery' would change for a similar image, but with its left edge highlighted.
With this method (and it is guaranteed to work) only requires 1 layer; although admitedly, you need to load more images to the browser (4 images per link infact).
osh
PS If you get it figured, don't forget to tell us all.
|
little osh
Bipolar (III) Inmate
From: Wales, UK
Insane since: Jun 2000
|
posted 08-15-2000 15:31
Okay, I stand (slightly) corrected. You do need the 3 layers, because, since all of your highlight images are rectangular, the onMouseOut functions won't work properly.
Here's a solution, similar to what you want:
<HTML>
<HEAD>
<TITLE>Map Practice</TITLE>
<SCRIPT language="javaScript">
var NN = (document.layers) ? 1 : 0;
var IE = (document.all) ? 1 : 0;
if (IE)
doc = document.all;
else
doc = document;
var nextimage = false;
function swap()
{
if (nextimage)
{
doc['two'].document['jim'].src = 'images/services_over.gif';
nextimage=false;
}
else
{
doc['two'].document['jim'].src = 'images/gallery_over.gif';
nextimage=true;
}
}
</SCRIPT>
</HEAD>
<BODY bgcolor=white>
<DIV id='two' style="position:absolute; left:20; top:20;">
<MAP name="map2">
<AREA shape="POLYGON" coords="10,20, 90,20, 90,150, 10,100" href="#" onmouseover="javascript:swap();focus(this);">
<AREA shape="POLYGON" coords="10,100, 90,150, 90,300, 10,300" href="#" onmouseover="javascript:swap();focus(this);">
</MAP>
<img name='jim' ismap usemap="#map2" src="images/services_over.gif" width="100" height="400">
</DIV>
</BODY>
</HTML>
You will need to change the image named 'jim' to be your blank image, and make the 'two' sayer the top one. You'll also need to change the 'swap()' function to make the appropriate highlights appear/disappear.
But I've made it work in both IE and NN, just to prove that it's possible; and I haven't even used any eval() functions, especially to keep Slime happy :-).
Hope this works for you!
osh
|
bitdamaged
Maniac (V) Mad Scientist
From: 100101010011 <-- right about here
Insane since: Mar 2000
|
posted 08-15-2000 18:55
Okay this isn't perfect but it is working for me. What I did was embed the layers into one so that the positioning of all the over states becomes relative to the DIV instead of the page. The menu is still 2 px down on Netscape but the overstates line up. I had to also tweak the NN "docObj" so if you add more scripts to this page it may take some tweaking. Hope this helps.
<html>
<head>
<title>Liquid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;
if (nn) {
docObj = 'document.liquidint.document.'
styleObj = '';
}
if (ie) {
docObj = 'document.all.';
styleObj = '.style';
}
function show(layer){
eval(docObj + layer + styleObj + '.visibility = "visible"');
}
function hide(layer){
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}
</script>
<style type="text/css">
#liquidint
{position: absolute; top: 0px; left: 0px; z-index: 10; visibility: visible}
#newsover
{position: absolute; top: 0px; left: 0px; z-index: 20; visibility: hidden}
#overviewover
{position: absolute; top: 0px; left: 74px; z-index: 30; visibility: hidden}
#galleryover
{position: absolute; top: 0px; left: 153px; z-index: 40; visibility: hidden}
#servicesover
{position: absolute; top: 0px; left: 232px; z-index: 50; visibility: hidden}
#contactover
{position: absolute; top: 0px; left: 643px; z-index: 60; visibility: hidden}
#blank
{position: absolute; top: 0px; left: 0px; visibility: visible; z-index: 70}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin=0 topmargin=0 marginheight=0 marginwidth=0>
<div id="liquidint"><img border="0" src="images/liquidint0.gif" width="727" height="13">
<div id="newsover"><img border="0" src="images/news_over.gif" width="84" height="13">
</div>
<div id="overviewover"><img border="0" src="images/overview_over.gif" width="89" height="13">
</div>
<div id="galleryover"><img border="0" src="images/gallery_over.gif" width="89" height="13">
</div>
<div id="servicesover"><img border="0" src="images/services_over.gif" width="89" height="13">
</div>
<div id="contactover"><img border="0" src="images/contact_over.gif" width="84" height="13">
</div>
<div id="blank">
<table width="727" height="13" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="77"><a href="news.htm" onMouseOver="show('newsover')" onMouseOut="hide('newsover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="overview.htm" onMouseOver="show('overviewover')" onMouseOut="hide('overviewover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="gallery.htm" onMouseOver="show('galleryover')" onMouseOut="hide('galleryover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="services.htm" onMouseOver="show('servicesover')" onMouseOut="hide('servicesover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width-"272"><img src="images/blank.gif" width="332" height="13" border="0"></td>
<td width="77"><a href="contact.htm" onMouseOver="show('contactover')" onMouseOut="hide('contactover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
</tr>
</table>
</div>
</div>
</html>
mike
Walking the Earth like Kane
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-16-2000 00:17
Wow! I thought you guys were never going to respond, I hadnn't checked in a day or two. Osh, that's a good idea, but I don't really think it will save many lines of code, if any. Bitdamaged-I did come up with a work around for netscape by adding
quote:
if (nn) {
eval(docObj + layer + styleObj + '.top = "-3"');
}
to the show() function. Seems to work in all 4+ versions of PC msie and nn. However, I like your idea of embedding the div's, because I hate using little tweaks like this that make the code ugly.
http://www.stas.net/liquid/test3.htm
I'm going to play around with the embedded div's and see if I can't get it to sit in the upperleft corner how I want it. Thanks for your help bitdamaged. I really, really appreciate it. Thanks to you as well, osh.
<html>
<head>
<title>Liquid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;
if (nn) {
docObj = 'document.'
styleObj = '';
}
if (ie) {
docObj = 'document.all.';
styleObj = '.style';
}
function show(layer){
eval(docObj + layer + styleObj + '.visibility = "visible"');
if (nn) {
eval(docObj + layer + styleObj + '.top = "-3"');
}
}
function hide(layer){
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}
function drop(layer) {
var y_pos1 = parseInt(eval(docObj + layer + styleObj + '.top'));
if(y_pos1 < 13) {
eval(docObj + layer + styleObj + '.top = "y_pos1+1"');
setTimeout("drop()", 1);
}
}
</script>
<style type="text/css">
#galleryDrop
{position: absolute; top: -3px; left: 74px; z-index: 2; visibility: visible}
#liquidint
{position: absolute; top: -3px; left: 0px; z-index: 10; visibility: visible}
#newsOver
{position: absolute; top: -3px; left: 0px; z-index: 20; visibility: hidden}
#overviewOver
{position: absolute; top: -3px; left: 74px; z-index: 30; visibility: hidden}
#galleryOver
{position: absolute; top: -3px; left: 153px; z-index: 40; visibility: hidden}
#servicesOver
{position: absolute; top: -3px; left: 232px; z-index: 50; visibility: hidden}
#contactOver
{position: absolute; top: -3px; left: 643px; z-index: 60; visibility: hidden}
#blank
{position: absolute; top: 0px; left: 0px; z-index: 70; visibility: visible}
</style>
</head>
<body bgcolor="#04161B">
<div id="galleryDrop"><img border="0" src="images/gallerydrop.gif" width="326" height="13">
</div>
<div id="liquidint"><img border="0" src="images/liquidint0.gif" width="727" height="13">
</div>
<div id="newsOver"><img border="0" src="images/news_over.gif" width="84" height="13">
</div>
<div id="overviewOver"><img border="0" src="images/overview_over.gif" width="89" height="13">
</div>
<div id="galleryOver"><img border="0" src="images/gallery_over.gif" width="89" height="13">
</div>
<div id="servicesOver"><img border="0" src="images/services_over.gif" width="89" height="13">
</div>
<div id="contactOver"><img border="0" src="images/contact_over.gif" width="84" height="13">
</div>
<div id="blank">
<table width="727" height="13" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="77"><a href="news.htm" onMouseOver="show('newsOver')" onMouseOut="hide('newsOver')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="overview.htm" onMouseOver="show('overviewOver')" onMouseOut="hide('overviewOver')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="javascript:drop('galleryDrop')" onMouseOver="show('galleryOver')" onMouseOut="hide('galleryOver')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="services.htm" onMouseOver="show('servicesOver')" onMouseOut="hide('servicesOver')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width-"272"><img src="images/blank.gif" width="332" height="13" border="0"></td>
<td width="77"><a href="contact.htm" onMouseOver="show('contactOver')" onMouseOut="hide('contactOver')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
</tr>
</table>
</div>
</html>
Here's my updated code, haven't had time to work with the embedded div's yet. I hate to bug the hell out of you guys, but if you could just help me out with one more thing, I would appreciate it. You'll notice I added a drop(). What I'm trying to accomplish with this is the lower level of images dropping down from behind the top ones when the gallery button is clicked. Thanks in advance, you guys are lifesavers!
-editted for mispelling
[This message has been edited by mbridge (edited 16-08-2000).]
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-16-2000 00:33
Bitdamaged- work's as good as my method, except it doesn't have the nasty if statement. Thanks alot! I just changed the top positioning for #liquidint to -3, and it's lined up perfectly in ie, but it's one pixel up to far in nn (My method had this same problem). It's not really even noticeable so I think I'll just leave it alone. Thanks again and nice idea!
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-17-2000 17:22
Ok, here's the updated code, the drop down works in netscape, but not in ie. Anyone know why?
<html>
<head>
<title>Liquid</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
nn = (document.layers) ? 1:0;
ie = (document.all) ? 1:0;
if (nn) {
docObj = 'document.liquidint.document.'
styleObj = '';
}
if (ie) {
docObj = 'document.all.';
styleObj = '.style';
}
function show(layer){
eval(docObj + layer + styleObj + '.visibility = "visible"');
}
function hide(layer){
eval(docObj + layer + styleObj + '.visibility = "hidden"');
}
function init(){
if (nn) gallery = document.galleryDrop
if (ie) gallery = galleryDrop.style
gallery.ypos = parseInt(gallery.top)
}
function slide() {
if (gallery.ypos < 9) {
gallery.ypos += 1
gallery.top = gallery.ypos
setTimeout("slide()",30)
}
}
</script>
<style type="text/css">
#galleryDrop
{position: absolute; top: -3px; left: 74px; z-index: 1; visibility: visible}
#liquidint
{position: absolute; top: -3px; left: 0px; z-index: 10; visibility: visible}
#newsover
{position: absolute; top: 0px; left: 0px; z-index: 20; visibility: hidden}
#overviewover
{position: absolute; top: 0px; left: 74px; z-index: 30; visibility: hidden}
#galleryover
{position: absolute; top: 0px; left: 153px; z-index: 40; visibility: hidden}
#servicesover
{position: absolute; top: 0px; left: 232px; z-index: 50; visibility: hidden}
#contactover
{position: absolute; top: 0px; left: 643px; z-index: 60; visibility: hidden}
#blank
{position: absolute; top: 0px; left: 0px; visibility: visible; z-index: 70}
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin=0 topmargin=0 marginheight=0 marginwidth=0 onLoad="init()">
<div id="galleryDrop"><img border="0" src="images/gallerydrop.gif" width="326" height="13">
</div>
<div id="liquidint"><img border="0" src="images/liquidint0.gif" width="727" height="13">
<div id="newsover"><img border="0" src="images/news_over.gif" width="84" height="13">
</div>
<div id="overviewover"><img border="0" src="images/overview_over.gif" width="89" height="13">
</div>
<div id="galleryover"><img border="0" src="images/gallery_over.gif" width="89" height="13">
</div>
<div id="servicesover"><img border="0" src="images/services_over.gif" width="89" height="13">
</div>
<div id="contactover"><img border="0" src="images/contact_over.gif" width="84" height="13">
</div>
<div id="blank">
<table width="727" height="13" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="77"><a href="news.htm" onMouseOver="show('newsover')" onMouseOut="hide('newsover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="overview.htm" onMouseOver="show('overviewover')" onMouseOut="hide('overviewover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="javascript:slide()" onMouseOver="show('galleryover')" onMouseOut="hide('galleryover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width="78"><a href="services.htm" onMouseOver="show('servicesover')" onMouseOut="hide('servicesover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
<td width-"272"><img src="images/blank.gif" width="332" height="13" border="0"></td>
<td width="77"><a href="contact.htm" onMouseOver="show('contactover')" onMouseOut="hide('contactover')"><img src="images/blank.gif" width="77" height="13" border="0"></a></td>
</tr>
</table>
</div>
</div>
</html>
|
mbridge
Paranoid (IV) Mad Scientist
From:
Insane since: Jun 2000
|
posted 08-19-2000 02:54
|
