E-mail List Archives
Thread: (no subject)
Number of posts in this thread: 7 (In chronological order)
From: Brent Clark
Date: Fri, May 06 2005 6:45AM
Subject: (no subject)
No previous message | Next message →
Hi all
I have a javascript function:
function pframe(numb){
var MyMap = "/images/index/map_"+numb+".gif";
document['map'].src=MyMap;
misc = "";
for(a = 0; a < sarray[numb].length; a++){
misc += (sarray[numb][a]);
}
//alert(misc);
document.getElementById('mainpage').innerHTML = "";
document.getElementById('mainpage').innerHTML = misc;
//alert("/images/index/"+numb+"-1.jpg");
document['pic1'].src="/images/index/"+numb+"-1.jpg";
document['pic2'].src="/images/index/"+numb+"-2.jpg";
document['pic3'].src="/images/index/"+numb+"-3.jpg";
document['pic4'].src="/images/index/"+numb+"-4.jpg";
misc = "";
MyMap = "";
}
But for some reason or other the pics dont get loaded correctly
if I keep clicking the link (has the onclick="pframe()") about three times.
Then only does the pics appear.
If anyone could assist it would be most appreciated.
Kind Regards
Brent Clark
From: Patrick Lauke
Date: Fri, May 06 2005 6:49AM
Subject: RE: (no subject)
← Previous message | Next message →
>Brent Clark
>> If anyone could assist it would be most appreciated.
It would be more helpful to also see the HTML itself.
On a more general note: how does this relate to accessibility?
Patrick
________________________________
Patrick H. Lauke
Webmaster / University of Salford
http://www.salford.ac.uk
From: Christian Heilmann
Date: Fri, May 06 2005 6:52AM
Subject: RE: (no subject)
← Previous message | Next message →
>function pframe(numb){
>> var MyMap = "/images/index/map_"+numb+".gif";
>> document['map'].src=MyMap;
>> misc = "";
>> for(a = 0; a < sarray[numb].length; a++){
>> misc += (sarray[numb][a]);
>> }
>> //alert(misc);
>> document.getElementById('mainpage').innerHTML = "";
>> document.getElementById('mainpage').innerHTML = misc;
>> //alert("/images/index/"+numb+"-1.jpg");
>> document['pic1'].src="/images/index/"+numb+"-1.jpg";
>> document['pic2'].src="/images/index/"+numb+"-2.jpg";
>> document['pic3'].src="/images/index/"+numb+"-3.jpg";
>> document['pic4'].src="/images/index/"+numb+"-4.jpg";
>> misc = "";
>> MyMap = "";
>> }
>>
>> But for some reason or other the pics dont get loaded correctly
>>
>> if I keep clicking the link (has the onclick="pframe()") about three times.
>> Then only does the pics appear.
That is a horrible function, relying on a non-standard DOM in MSIE.
What is the sarray Array? Or even better, what do you try to do?
Dynamically changing images in MSIE will always lead to caching
issues, that is why a more clever way is to use all images in one
image file and use background-position to only show the currently
needed one.
http://www.alistapart.com/articles/sprites/ explains that.
The more image objects you use, the slower your site will get and load.
The other question on my mind is why do you post this on this list?
-- Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
From: Brent Clark
Date: Fri, May 06 2005 7:03AM
Subject: RE: (no subject)
← Previous message | Next message →
Patrick Lauke wrote:
>> Brent Clark
>
>
>
>> If anyone could assist it would be most appreciated.
>
>
>
> It would be more helpful to also see the HTML itself.
> On a more general note: how does this relate to accessibility?
>
> Patrick
Hi Patrick
You right I should have just pasted the html code.
Below is the copy and paste of the code.
When the browser reads the html file, the random_pic() function is run and displays the random contents.
I have a few links that have an onclick="pframe(number)". When I click the link the contents is displayed. but the pictures dont display. I think its a browser cache issue.
In Mozilla Firebox the page / scripts etc run beautifully, no problems there. Its only with IE that is a problem.
I tried document['numb'].src="/images/index/"+numb+"-4.jpg"; to try and force it to work.
But still, its a problem.
Kind Regards and thanks again
Brent Clark
P.s. I can arrange for a live see if it needs be to help someone understand my predicament. (please contact me off the list)
===========================================================================<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head><title>ECCO Tours Limited</title>
<meta http-equiv="CONTENT-LANGUAGE" content="English">
<meta name="keywords" content="african safari travel South Africa safaris honeymoon SAFARI CAPE TOWN VILLA RENTALS SOUTHERN AFRICAN information tours ACCOMMODATION lodges hotels">
<meta name="ROBOTS" content="index,follow">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="0">
<script language="JavaScript" src="images/new/template.js"></script>
<script language="Javascript" src="/javascripts/random_array.js"></script>
<script language="Javascript" src="/javascripts/screen_array.js"></script>
<script language="JavaScript">
var picnum;
var pictotal = 67;
var i = 0;
array = new Array();
var misc;
function random_pic(){
while( i < 4){
var rnum = Math.floor( (Math.random() * pictotal));
if( (array[0] == rnum) || (array[1] == rnum) || (array[2] == rnum) || (array[3] == rnum)){
if( rnum < ( (pictotal -1 ) /2) ){
array[i] = picnum = (rnum - 1);
doc_write(picnum);
}else if (rnum > ( (pictotal -1 )/2)){
array[i] = picnum = (rnum + 1);
doc_write(picnum);
}
}else if(rnum == 0){
array[i] = picnum = (rnum + 1);
doc_write(picnum);
}else{
array[i] = picnum = rnum;
doc_write(picnum);
}
i++;
}
}
function doc_write(entry){
return document.write('<tr><td><img width="98" height="98" src="/images/index/'+entry+'.jpg" /></td></tr>');
}
function random_mainpage(element){
var num = Math.floor( (Math.random() * sarray.length));
if(num < 0){
num + 1;
}
var MyMap = "/images/index/map_"+num+".gif";
document['map'].src=MyMap;
for(a = 0; a < sarray[num].length; a++){
document.write(sarray[num][a]);
}
}
function pframe(numb){
var MyMap = "/images/index/map_"+numb+".gif";
document['map'].src=MyMap;
misc = "";
for(a = 0; a < sarray[numb].length; a++){
misc += (sarray[numb][a]);
}
//alert(misc);
document.getElementById('mainpage').innerHTML = "";
document.getElementById('mainpage').innerHTML = misc;
//alert("/images/index/"+numb+"-1.jpg");
document['pic1'].src="/images/index/"+numb+"-1.jpg";
document['pic2'].src="/images/index/"+numb+"-2.jpg";
document['pic3'].src="/images/index/"+numb+"-3.jpg";
document['pic4'].src="/images/index/"+numb+"-4.jpg";
misc = "";
MyMap = "";
}
var msg="Right Click Disabled!";
function disableIE() {if (document.all) {alert(msg);return false;}
}
function disableNS(e) {
if (document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {alert(msg);return false;}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);document.onmousedown=disableNS;
} else {
document.onmouseup=disableNS;document.oncontextmenu=disableIE;
}
document.oncontextmenu=new Function("alert(msg);return false");
</script>
<script language="javascript">
</script>
<link href="styles/ecco4.css" type="text/css" rel="stylesheet">
</head>
<body bgColor="#e8eeff">
<table cellspacing="0" cellpadding="0" width="760" align="center" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><a href = '/cgi-bin/ecco/scripts/common/logon.pl'><img height="42" alt="ECCO Tours Ltd." src="images/new/card_border_logo.gif" border="0"></a></td>
<td valign="bottom" nowrap align="right" width="100%" background="images/new/card_border_top.gif">
<font class="body_small">Environmentally Concerned Commercial Organisation </font>
</td>
<td><img height="42" alt="" src="images/new/card_border_topright.gif" width="10"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td background="images/new/card_border_left.gif"><img height="1" alt="" src="images/new/spacer.gif" width="4"></td>
<td width="100%" bgColor="white"><img height="2" alt="" src="images/new/spacer.gif" width="1"></td>
<td background="images/new/card_border_right.gif"><img height="1" alt="" src="images/new/spacer.gif" width="10"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td background="images/new/card_border_left_nav.gif"><img src="images/new/spacer.gif" width="3" height="1" alt=""></td>
<td width="100%">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="100" height="15" class="mOut"> </td>
<td width="80" height="15" class="mOut" ONMOUSEOVER="this.className='mOvr'" ONMOUSEOUT="this.className='mOut'" onClick="window.location='/logon.html'">Logon</td>
<td width="80" height="15" class="mOut" ONMOUSEOVER="this.className='mOvr'" ONMOUSEOUT="this.className='mOut'" onClick="window.location='/aboutus.html'">About Us</td>
<td width="80" height="15" class="mOut" ONMOUSEOVER="this.className='mOvr'" ONMOUSEOUT="this.className='mOut'" onClick="window.location='/contact.html'">Contact Us</td>
<td class="mOut"> </td>
</tr>
</table>
</td>
<td background="images/new/card_border_right_nav.gif"><img src="images/new/spacer.gif" width="9" height="1" alt=""></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" width="100%">
<tr>
<td background="images/new/card_border_left_nav.gif"><img height="1" alt="" src="images/new/spacer.gif" width="3"></td>
<td width="100%">
<table cellspacing="0" cellpadding="0" width="100%">
<tr><td noWrap align="middle" bgColor="#003366"><img height="5" alt="" src="images/new/spacer.gif" width="10"></td></tr>
</table>
</td>
<td background="images/new/card_border_right_nav.gif"><img height="1" alt="" src="images/new/spacer.gif" width="9"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" width="100%" >
<tr>
<td background="images/new/card_border_left.gif"><img height="1" alt="" src="images/new/spacer.gif" width="4"></td>
<td width="100%">
<table cellspacing="0" cellpadding="0" width="100%" bgColor="white" >
<tr>
<td><img height="3" src="images/new/spacer.gif" width="1"></td>
<td>
<!-- START HERE -->
<table cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr><td colspan="3"> </td></tr>
<tr>
<td colspan="3" valign="top">
<table align="center">
<tr>
<td class="body_small">There's a lot of ground to cover in Southern Africa, so let ECCO Tours take care of the groundwork for you.</td>
</tr>
</table>
</td>
</tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td valign="top" width="18%" >
<table cellspacing="1" cellpadding="0" border="0" align="center">
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="1" name="1" onclick="pframe('1')" >Cape Town</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="2" name="2" onclick="pframe('2')" >Botswana</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="3" name="3" onclick="pframe('3')" >Durban</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="4" name="4" onclick="pframe('4')" >Eastern Cape</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="5" name="5" onclick="pframe('5')" >Free State</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="6" name="6" onclick="pframe('6')" >Gauteng</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="7" name="7" onclick="pframe('7')" >Garden Route</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="8" name="8" onclick="pframe('8')" >Johannesburg</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="9" name="9" onclick="pframe('9')" >KwaZulu-Natal</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="10" name="10" onclick="pframe('10')" >Kruger National Park</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="11" name="11" onclick="pframe('11')" >Limpopo Province</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="12" name="12" onclick="pframe('12')" >Mpumalanga</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="13" name="13" onclick="pframe('13')" >Mozambique</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="14" name="14" onclick="pframe('14')" >Namibia</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="15" name="15" onclick="pframe('15')" >Northern Cape</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="16" name="16" onclick="pframe('16')" >North West Province</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="17" name="17" onclick="pframe('17')" >Swaziland</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="18" name="18" onclick="pframe('18')" >Western Cape</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="19" name="19" onclick="pframe('19')" >Winelands</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="20" name="20" onclick="pframe('20')" >Zambia</a></td></tr>
<tr onMouseover="this.bgColor='#e8eeff'" onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3 href="javascript:void(0)" id="21" name="21" onclick="pframe('21')" >Zimbabwe</a></td></tr>
<tr><td> </td></tr>
<tr><td><img name="map" id="map" src="/images/index/map.gif" width="120" border="0"></td></tr>
</table>
</td>
<td id="mn" name="mn" rowspan="6" valign="top">
<div id="mainpage">
<script language="javascript">
random_mainpage()
</script>
</div>
</td>
<td width="14%" align="right" valign="top">
<table cellspacing="1" cellpadding="0" border="0">
<script language="JavaScript">
random_pic();
</script>
</td>
</tr>
</table>
</td>
<tr><td colspan="3" > </td></tr>
<tr><td colspan="3" > </td></tr>
<tr><td colspan="3" > </td></tr>
<tr><td colspan="3" > </td></tr>
<tr><td colspan="3" > </td></tr>
<tr>
<td colspan="3" align="center">
<div style="text-align:center;width:80%" valign="top">
<fieldset>
<legend><font class="body_small">Another good reason to use ECCO Tours and to come to South Africa ... </font></legend>
<script language="javascript">
disp = new display();
</script>
</fieldset>
</div>
</td>
</tr>
<tr><td colspan="3" > </td></tr>
<tr><td colspan="3" id="placeholder" > </td></tr>
<tr>
<td colspan="3" valign="top">
<div align="center">
<a href="satsa.html"><img src="/images/satsa.jpg" border="0" height="37"></a>
<a href="atta.html"> <img src="/images/atta.gif" border="0" height="37"></a>
</div>
</td>
</tr>
</table>
<!-- END HERE -->
</td>
</tr>
</table>
</td>
<td width="10" background="images/new/card_border_right.gif"><img height="1" alt="" src="images/new/spacer.gif" width="10"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img height="10" alt="" src="images/new/card_border_bottomleft.gif" width="10"></td>
<td width="100%" background="images/new/card_border_bottom.gif"><img height="1" alt="" src="images/new/spacer.gif" width="1" ></td>
<td><img height="10" alt="" src="images/new/card_border_bottomright.gif" width="10"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="copyright" align="middle" width="100%">
From: Christian Heilmann
Date: Fri, May 06 2005 7:13AM
Subject: RE: (no subject)
← Previous message | Next message →
>>>If anyone could assist it would be most appreciated.
>>
>>> >
>>> >
>>> > It would be more helpful to also see the HTML itself.
>>> > On a more general note: how does this relate to accessibility?
Looking at the code, it relates insofar as there is no thought
whatsoever about users without JavaScript.
<tr onMouseover="this.bgColor='#e8eeff'"
onmouseout="this.bgColor='#FFFFFF'"><td><a class=a3
href="javascript:void(0)" id="1" name="1" onclick="pframe('1')" >Cape
Town</a></td></tr>
Is so bad it is almost funny.
Granted, maps are hard to make accessible, as they are a visual aid
and you cannot possibly write a textual replacement, but this is so
wrong, listing the errors would take longer than just pointing at
better examples.
I especially resent the right click protection, which must be the most
useless and obtrusive scripting idea ever.
To make this monster a lot cleaner:
1) Either add all maps to the document and link them via an anchor and
write a JS to hide them all onload but only show the one that relates
to the current link.
2) Write a backend script that reloads the page and loads the
different maps and add a JS to simply change the src of the one image
onclick of the links in the list. That way it will work for
non-scripting users and prevent scripting users from reloading.
-- Chris Heilmann
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/
Binaries: http://www.onlinetools.org/
From: Tim Beadle
Date: Fri, May 06 2005 7:14AM
Subject: RE: (no subject)
← Previous message | Next message →
On 5/6/05, Brent Clark < = EMAIL ADDRESS REMOVED = > wrote:
>> If anyone could assist it would be most appreciated.
Hi Brent,
As others have intimated, this list is accessibility-related, not
general web development. By all means stick around (please don't take
this as a "go away" message!) but Evolt's TheList may be a more
appropriate place to post such a query:
http://lists.evolt.org/mailman/listinfo/thelist
Best regards,
Tim
From: Joe Ladika
Date: Wed, Jun 22 2005 1:17PM
Subject: (no subject)
← Previous message | No next message