Dynamically positioned DIV + watermark image

kargrafx · 09-30-2004, 01:58 AM

I have been using the following code (from Dynamic Drive) to insert a watermark effect in a website:

Code:

<script language="JavaScript1.2">

/*
Watermark Backgound Image Script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS,
visit dynamicdrive.com
*/

if (document.all||document.getElementById)
document.body.style.background="url('notebook.jpg') white center no-repeat fixed"

</script>

It works fine in the browsers it is supposed to work in, and seems to degrade well in others. I would now like to use a similar approach to create a static image at the top of the browser window, which is not a background image, but instead a foreground image (with image mapped links) - this will be a very simple menu system, I do not need any submenus, and I would like it to appear similar to a framed window, as far as all other content scrolling out of view with the top bar remaining static. How would I modify this script to do that?

I know there are many menu systems that will be static at the top of the window, but I want to do this with a single image, with image maps - and I want it to never move; much like the watermark image never moves... with the menus I have seen, they will all bounce or wiggle a little as the window is scrolled.

TIA!

hemebond · 09-30-2004, 05:56 AM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>45377</title>
		<style type="text/css">
			#img	{
				position:fixed;
				top:0;
				left:0;
			}
		</style>
	</head>
	<body>
		<img id="img" src="/images/1.jpeg">
	</body>
</html>

And for the record, image maps used for basic navigation suck.

kargrafx · 09-30-2004, 10:26 AM

Okay, first thanks so much for your response.

I tried the code you gave and it works; but not int the primary browsers that will be used - IE5 and IE6. I searched around and found out why, but found no way to fix it for IE. Do you have any suggestions on how to do it in IE?

Also, You say image maps used for basic navigation suck; why do you feel that way? I am going to use a graphical menu, whether it be several images with embedded links, or a single image with an image map . . . I find that the single image with an image map is much better, as I do not then have to play with aligning multiple images. Do you have another suggestion, aside from eliminating a graphical menu (that is not an option for this site)?

ronaldb66 · 09-30-2004, 10:58 AM

Every part of a web page that relies on some form of graphical representation has a serious potential of having accessibility issues; image maps are notorious in this respect. They can be used, but some care has to be taken to make them accessible to non-graphical user agents via appropriate alt texts.
Some consider image maps to be an old technique; this ALA article describes an alternative technique: "Night of the Image Map".

kargrafx · 09-30-2004, 11:34 AM

Thanks so much for that link! I will be trying that technique out, most assuredly!!

As to the other issue I am facing at the moment, can you reccomend a way to simulate a frames experience, without using frames, in IE? Basically, having a static top image or DIV which all other content will scroll behind, similar to the top frame and main body frame...

I appreciate your responses!!

hemebond · 09-30-2004, 10:47 PM

Internet Explorer does not support the fixed CSS command. There are ways to fake it, but I'd sooner gouge my eyes out than use it in my own code, so I won't encourage you to.

kargrafx · 10-06-2004, 03:04 AM

What is the simplest way to simulate what I would like to do in IE? Will I have to resort to javascript and have a jumpy / jerky motion as the browser is scrolled?

TIA!