#1
  1. Corporate Stooge
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Aberdeen, Scotland
    Posts
    134
    Rep Power
    14

    DHTML in Netscape


    Hi,

    I'm trying to develop a simple piece of code for an ASP page. I'm trying to grey out the text and make the image dissapear when the image is clicked. The code below works perfectly in IE, but not in Netscape......can you imagine that! ;-)

    The include file is just a tarted up window.open

    Anyone got any ideas how it'll work in Netscape?

    Cheers in advance!

    <%@ Language=VBScript %>
    <html>
    <head>
    <!--#INCLUDE FILE="include/popup.inc"-->
    <meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    </head>
    <body>
    <script Language="JavaScript">
    function greyOut() {
    document.all.link1.style.color='#AAAAAA';
    document.all.image1.style.visibility='hidden';


    }
    </script>

    <p id="link1">Click Me&nbsp;&nbsp;
    <a onClick="greyOut()" href="javascript:new_window('thisnthat.asp','target1')"><img src="images/access.gif" id="image1" WIDTH="16" HEIGHT="16"></a></p>


    </body>
    </html>
  2. #2
  3. T-Shirt Tragic
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2001
    Location
    Melbourne, Australia
    Posts
    886
    Rep Power
    321
    Your problem is the "document.all" stuff .. that's IE stuff only.
    Also NS won't treat an image like a layer (make it visible and invisible) .. but you could swap it with a clear pixel gif to give the impression it's being made invisible.
    Try re-writing your greyOut() function like this:-
    Code:
    var blankImg = new Image();
    blankImg.src = "clear.gif"; // the url to the clear pixel gif.
    
    function greyOut() {
    // for Netscape 4.x
    if (document.layers) document.link1.document.color='#aaaaaa';
    
    // for Netscape 6 , Mozilla, IE5+
    else if (document.getElementById) document.getElementById('link1').style.color='#aaaaaa';
    
    // for IE4
    else document.all.link1.style.color='#AAAAAA';
    
    // this line swaps the image for a blank img.
    document.images['image1'].src = blankImg.src;
    }
    and then your HTML would be the same except the image would use the NAME attribute instead of the ID attribute... also remember to have that clear pixel gif ready to swap.
  4. #3
  5. Corporate Stooge
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Aberdeen, Scotland
    Posts
    134
    Rep Power
    14
    Thanks for the help......I'll give it a try...

    Dave
  6. #4
  7. No Profile Picture
    The one who gets it done
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Madison, WI
    Posts
    395
    Rep Power
    14
    What about putting the whole page in a <span> and changing the .innerText to nothing?
  8. #5
  9. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    See if you can follow this...the extra 'placeholder' <span> is for Netscape:

    <html>
    <head>
    <title>untitled</title>

    <style type="text/css">

    .norm {
    width:150;
    font: normal 22px Helvetica;
    color: #000000;
    }
    .gray {
    font: normal 22px Helvetica;
    color: #aaaaaa;
    }

    </style>
    <script language="Javascript" type="text/javascript">

    function new_window(url,name) {
    window.open(url,name,'width=135,height=135,left=200,top=200,scrollbars=no');
    }

    function whatever(id,content,classname) {
    var el = document.layers ? document[id] :
    document.all ? document.all[id] :
    document.getElementById ? document.getElementById(id) : null;
    if (document.layers) {
    el.document.write('<span class="'+classname+'">'+content+'</span>');
    el.document.close();
    document.image1.visibility = 'hide';
    } else {
    el.className = classname;
    document.all.image1.style.visibility = 'hidden';
    }
    }

    </script>
    </head>
    <body>

    <div class="norm">
    <span id="link1" style="position:absolute;">Click Me</span>
    <span id="link1Place" style="position:relative;visibility:hidden;">Click Me</span>
    <a href="javascript&#58;new_window('http://thumb-1.image.altavista.com/image/137735','target1')"
    onclick="whatever('link1','Click Me','gray')">
    <span id="image1" style="position:relative;">
    <img border="0" width="50" height="50"
    src="http://thumb-1.image.altavista.com/image/1956086"></a></span>
    </div>

    </body>
    </html>
  10. #6
  11. Corporate Stooge
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2001
    Location
    Aberdeen, Scotland
    Posts
    134
    Rep Power
    14
    Thanks...that certainly seems to work.

    The code has to be placed inside a much larger ASP page with other code in it so I will have to see how the <SPAN> tags behave with the other code!

    Cheers for the assistance.....

IMN logo majestic logo threadwatch logo seochat tools logo