Explorer & Netscape to accept attributes onclick and ...

K

Kim Me

I did a brower compatibility report and found that onclick and mouseover
attributes are not supported. How do I formate my pages to get Netscape &
Explorer to accept them?
 
M

Murray

Where have you PLACED those attributes? And what doctype are you validating
for?

The on<mouse> attributes are supported in all browsers when placed on <a>
tags, but you will encounter flaky support when they are placed on other
tags like <font>, <p>, <img>, etc....
 
K

Kim Me

Okay I'm new at this so pls bear with me. I used the onclick in order to swap
images elsewhere in the page from the thumbs and it works in explorer once I
allow active content, I doesn't work in Netscape at all (can't find a way to
release active content). But ultimately I would like it to work in both with
out having to do anything to release active content. This is what is in my
page?
href="#img">
<area name="image"

onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc1.JPG')"
href="#image" coords="0, 0, 10000, 10000"
shape="rect">
</map>
<a
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/sculpture/Warrior/2_1.jpg')">
<img border="0"
src="../../../images/sculpture/Warrior/T/2_1.jpg"
width="100" height="100" usemap="#FPMap4"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td nowrap bgcolor="#FFFFFF" height="46" width="100%">
<!-- MSCellFormattingType="footer" -->
<table border="0" width="100%" height="100%"
cellpadding="5" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="middle">
<strong>Mettleus, 2003 </strong><br>
7â€w x 3â€d x 9â€ht <br>
<a href="../more.htm" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image20','','../graphics/more1.png',1)"><br>
</a></td>
 
M

Murray

Here's what you are doing there. You are creating an image map to apply a
behavior to the hotspot over the image, when you could in fact, apply that
behavior directly to an <a> tag around that image. Unfortunately, FP 2003
doesn't give you a good way (that I could find) to do this, as it wants to
always apply the event handers (the mouse events) directly into the <img>
tag (which is the wrong way to do it).

Nevertheless, you have this -

<map name="FPMap4">
<area coords="8, 6, 111, 92" shape="rect"
href="#img">
</map>
<a
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc1.JPG')">
<img border="0"
src="../../../images/painting/3-Razor/T/t-Roc1.JPG"
width="134" height="100" usemap="#FPMap4"></a>

(note the redundant use of a hotspot that matches the image's dimensions)

and you could (and should) have this -

<a
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc1.JPG')"
href="#img">
<img border="0" src="../../../images/painting/3-Razor/T/t-Roc1.JPG"
width="134" height="100"></a>

In other words, there is no need at all to use an image map there.

Worse, yet, you have this later on -

<map name="FPMap5">
<area href="#img" shape="rect"
coords="7, 7, 114, 85">
</map><img
src="../../../images/painting/3-Razor/T/t-Roc2.JPG"
width="136" height="100" border="0" usemap="#FPMap5"
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc2.JPG')">

(note the onclick applied directly within the <img> tag)

and this should be as follows -

<a href="#img"
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc2.JPG')"><img
src="../../../images/painting/3-Razor/T/t-Roc2.JPG" width="136" height="100"
border="0">

The same is true on your other image maps.

FP has done you no favor writing the markup like this. Unfortunately you
will have to read this post carefully, and understand what I am describing
before you make the changes directly to the HTML yourself.
 
K

Kim Me

Hi Murrary
Thanks I did as you said - looks like I made alot of unessary work for my
self from the get go. The one page that I changed works in Explorer but still
doesn't work in Netscape. Any ideas?
Thanks kim
 
M

Murray

Show me that page, please.

Event handlers applied to anchor tags will work in all browsers.
 
M

Murray

Yes, well this reminds me that I had several other suggestions for you -

1. Change this -

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

to this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

(your doctype, while valid, is not complete, thus it has no effect on the
browser's rendering mode)

2. Change the order of your pseudo-classes from this -

a:visited {
color: #666666;
}
a:hover {
color: #666666;
}
a:active {
color: #666666;
}
a:link {
color: #000000;
}

to this -

a:link {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
color: #666666;
}
a:active {
color: #666666;
}

so that the link style will not trump everything else. And you may even
want to consolidate it to this -

a { color: #000000;}
a:hover, a:visited, a:active, a:focus { color: #666; }

which does the same thing.

3. Delete this entirely (at least on this page - since you are not using
any of these Dreamweaver functions) -

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//

4. Don't use file/pathnames containing spaces (or any other non-letter,
non-number character except for hyphen and underscore) -

area href="B_%20Raz.htm"

It seems to work fine for me in FF1, IE6, and NN7 on the PC as well as FF1,
Safari 1.2.4, and IE5.2.4 on the Mac. Did I miss any?
 
M

Murray

Oops - the pseudo-class consolidation should be -

a:visited, a:hover, a:active, a:focus { color: #666; }


--
Murray
============

Murray said:
Yes, well this reminds me that I had several other suggestions for you -

1. Change this -

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

to this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

(your doctype, while valid, is not complete, thus it has no effect on the
browser's rendering mode)

2. Change the order of your pseudo-classes from this -

a:visited {
color: #666666;
}
a:hover {
color: #666666;
}
a:active {
color: #666666;
}
a:link {
color: #000000;
}

to this -

a:link {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
color: #666666;
}
a:active {
color: #666666;
}

so that the link style will not trump everything else. And you may even
want to consolidate it to this -

a { color: #000000;}
a:hover, a:visited, a:active, a:focus { color: #666; }

which does the same thing.

3. Delete this entirely (at least on this page - since you are not using
any of these Dreamweaver functions) -

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//

4. Don't use file/pathnames containing spaces (or any other non-letter,
non-number character except for hyphen and underscore) -

area href="B_%20Raz.htm"

It seems to work fine for me in FF1, IE6, and NN7 on the PC as well as
FF1, Safari 1.2.4, and IE5.2.4 on the Mac. Did I miss any?


--
Murray
============

Kim Me said:
http://www.kimbruce.biz/pages/Painting/Razor/A_ Raz.htm
I am using Netscape 7.2 and have 4 as well - doesn't work in either
Click to expand...
Click to expand...
 
K

Kim Me

Thankyou! Thankyou! Thankyou!
It works!!!!!!! I knew there had to be away to do this, I am glad you are
out there!

Murray said:
Oops - the pseudo-class consolidation should be -

a:visited, a:hover, a:active, a:focus { color: #666; }


--
Murray
============

Murray said:
Yes, well this reminds me that I had several other suggestions for you -

1. Change this -

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

to this -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

(your doctype, while valid, is not complete, thus it has no effect on the
browser's rendering mode)

2. Change the order of your pseudo-classes from this -

a:visited {
color: #666666;
}
a:hover {
color: #666666;
}
a:active {
color: #666666;
}
a:link {
color: #000000;
}

to this -

a:link {
color: #000000;
}
a:visited {
color: #666666;
}
a:hover {
color: #666666;
}
a:active {
color: #666666;
}

so that the link style will not trump everything else. And you may even
want to consolidate it to this -

a { color: #000000;}
a:hover, a:visited, a:active, a:focus { color: #666; }

which does the same thing.

3. Delete this entirely (at least on this page - since you are not using
any of these Dreamweaver functions) -

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++)
x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc)
x.oSrc=x.src; x.src=a[i+2];}
}
//

4. Don't use file/pathnames containing spaces (or any other non-letter,
non-number character except for hyphen and underscore) -

area href="B_%20Raz.htm"

It seems to work fine for me in FF1, IE6, and NN7 on the PC as well as
FF1, Safari 1.2.4, and IE5.2.4 on the Mac. Did I miss any?


--
Murray
============

Kim Me said:
http://www.kimbruce.biz/pages/Painting/Razor/A_ Raz.htm
I am using Netscape 7.2 and have 4 as well - doesn't work in either

:

Show me that page, please.

Event handlers applied to anchor tags will work in all browsers.

--
Murray
============

Hi Murrary
Thanks I did as you said - looks like I made alot of unessary work for
my
self from the get go. The one page that I changed works in Explorer
but
still
doesn't work in Netscape. Any ideas?
Thanks kim

:

Here's what you are doing there. You are creating an image map to
apply
a
behavior to the hotspot over the image, when you could in fact, apply
that
behavior directly to an <a> tag around that image. Unfortunately, FP
2003
doesn't give you a good way (that I could find) to do this, as it
wants
to
always apply the event handers (the mouse events) directly into the
<img>
tag (which is the wrong way to do it).

Nevertheless, you have this -

<map name="FPMap4">
<area coords="8, 6, 111, 92" shape="rect"
href="#img">
</map>
<a
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc1.JPG')">
<img border="0"
src="../../../images/painting/3-Razor/T/t-Roc1.JPG"
width="134" height="100" usemap="#FPMap4"></a>

(note the redundant use of a hotspot that matches the image's
dimensions)

and you could (and should) have this -

<a
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc1.JPG')"
href="#img">
<img border="0"
src="../../../images/painting/3-Razor/T/t-Roc1.JPG"
width="134" height="100"></a>

In other words, there is no need at all to use an image map there.

Worse, yet, you have this later on -

<map name="FPMap5">
<area href="#img" shape="rect"
coords="7, 7, 114, 85">
</map><img
src="../../../images/painting/3-Razor/T/t-Roc2.JPG"
width="136" height="100" border="0" usemap="#FPMap5"
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc2.JPG')">

(note the onclick applied directly within the <img> tag)

and this should be as follows -

<a href="#img"
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc2.JPG')"><img
src="../../../images/painting/3-Razor/T/t-Roc2.JPG" width="136"
height="100"
border="0">

The same is true on your other image maps.

FP has done you no favor writing the markup like this. Unfortunately
you
will have to read this post carefully, and understand what I am
describing
before you make the changes directly to the HTML yourself.

--
Murray
============

yes thankyou
http://www.kimbruce.biz/pages/Painting/Razor/A_ Raz.htmhankyou

i pretty much used the onclick swap image on all these pages. I
started
to
redo the pages to be individual but thought that there has to be a
way

:

Can you just post a link to the page so I can see the whole thing?

--
Murray
============

Okay I'm new at this so pls bear with me. I used the onclick in
order
to
swap
images elsewhere in the page from the thumbs and it works in
explorer
once
I
allow active content, I doesn't work in Netscape at all (can't
find
a
way
to
release active content). But ultimately I would like it to work
in
both
with
out having to do anything to release active content. This is
what is
in
my
page?
href="#img">
<area name="image"

onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/painting/3-Razor/Roc1.JPG')"
href="#image" coords="0, 0, 10000, 10000"
shape="rect">
</map>
<a
onclick="FP_swapImg(1,0,/*id*/'img2',/*url*/'../../../images/sculpture/Warrior/2_1.jpg')">
<img border="0"
src="../../../images/sculpture/Warrior/T/2_1.jpg"
width="100" height="100" usemap="#FPMap4"></a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td nowrap bgcolor="#FFFFFF" height="46" width="100%">
<!-- MSCellFormattingType="footer" -->
<table border="0" width="100%" height="100%"
cellpadding="5" cellspacing="0">
<tr>
<td width="100%" height="100%" valign="middle">
<strong>Mettleus, 2003 </strong><br>
7"w x 3"d x 9"ht <br>
<a href="../more.htm" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image20','','../graphics/more1.png',1)"><br>
</a></td>

:

Where have you PLACED those attributes? And what doctype are
you
validating
for?

The on<mouse> attributes are supported in all browsers when
placed
on
<a>
tags, but you will encounter flaky support when they are placed
on
other
tags like <font>, <p>, <img>, etc....

--
Murray
============

I did a brower compatibility report and found that onclick
and
mouseover
attributes are not supported. How do I formate my pages to
get
Netscape
&
Explorer to accept them?
Click to expand...
Click to expand...
Click to expand...
 
Top