DHTML in Netscape

Dev Shed Forums Sponsor:

July 10th, 2001, 04:46 AM

noodles1100

Corporate Stooge

Join Date: Jun 2001

Location: Aberdeen, Scotland

Posts: 134

Time spent in forums: < 1 sec
Reputation Power: 12

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>

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

July 10th, 2001, 07:07 AM

Jonathon

T-Shirt Tragic

Join Date: Mar 2001

Location: Melbourne, Australia

Posts: 886

Time spent in forums: 1 Week 4 Days 6 h 53 m 39 sec
Reputation Power: 320

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.

July 10th, 2001, 07:22 AM

noodles1100

Corporate Stooge

Join Date: Jun 2001

Location: Aberdeen, Scotland

Posts: 134

Time spent in forums: < 1 sec
Reputation Power: 12

Thanks for the help......I'll give it a try...

Dave

July 10th, 2001, 08:46 AM

Jay Edgar

The one who gets it done

Join Date: Jun 2001

Location: Madison, WI

Posts: 395

Time spent in forums: 5 h 32 m 22 sec
Reputation Power: 12

What about putting the whole page in a <span> and changing the .innerText to nothing?

July 10th, 2001, 10:35 PM

adios

Senior Citizen

Join Date: Jan 2001

Location: leftcoast

Posts: 2,019

Time spent in forums: < 1 sec
Reputation Power: 15

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

July 11th, 2001, 02:51 AM

noodles1100

Corporate Stooge

Join Date: Jun 2001

Location: Aberdeen, Scotland

Posts: 134

Time spent in forums: < 1 sec
Reputation Power: 12

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

DHTML in Netscape

Developer Shed Advertisers and Affiliates