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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Dynamically positioned DIV + watermark image

    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!

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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)?

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Accessibility

    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".
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!!

  • #6
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    113
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!


  •  

    Posting Permissions

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