Flickering AJAX

@nbcrockett

Copy linkTweet thisAlerts:

Jul 18.2007

I’m new at AJAX so please excuse dumb errors. I’ve got an image that when you roll over certain parts of it the image will change and the contents of a div will also change. The image is flipping using standard javascript, but the contents of the div is being changed by AJAX. In Safari none of it works. On the PC IE6, Firefox 1, Netscape, and Mozilla the image flips out fine, but the contents of the div flickers when it changes. Can anyone tell me how to keep it from flickering and how to make it work in Safari?

Here’s the image code in my ASP page.

[CODE]
<img id=”Nav” src=”../Images/navbar.jpg” alt=”” height=”450″ width=”208″ usemap=”#navbar” border=”0″ />
<map name=”navbar”>
<area shape=”rect” coords=”16,31,55,43″ alt=”” onmouseover=”cmdNavOver(‘pics’)”/>
<area shape=”rect” coords=”36,86,105,100″ alt=”” onmouseover=”cmdNavOver(‘calendar’)”/>
<area shape=”rect” coords=”50,149,134,163″ alt=”” onmouseover=”cmdNavOver(‘request’)”/>
<area shape=”rect” coords=”36,218,143,231″ alt=”” onmouseover=”cmdNavOver(‘contact’)”/>
<area shape=”rect” coords=”34,285,134,300″ alt=”” onmouseover=”cmdNavOver(‘refer’)”/>
<area shape=”rect” coords=”50,348,105,363″ alt=”” onmouseover=”cmdNavOver(‘extras’)”/>
<area shape=”rect” coords=”8,405,55,419″ alt=”” onmouseover=”cmdNavOver(‘news’)”/>
<area shape=”circle” coords=”72,413,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘news’)”/>
<area shape=”circle” coords=”121,358,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘extras’)”/>
<area shape=”circle” coords=”153,295,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘refer’)”/>
<area shape=”circle” coords=”164,226,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘contact’)”/>
<area shape=”circle” coords=”154,156,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘request’)”/>
<area shape=”circle” coords=”121,94,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘calendar’)”/>
<area shape=”circle” coords=”72,39,23″ href=”#” alt=”” onmouseover=”cmdNavOver(‘pics’)”/>
</map>
[/CODE]

Here’s the Javascript / AJAX code that’s in a JS file.

[CODE]
var xmlHttp
function GetXmlHttpObject(){
var xmlHttp=null;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch(e){
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp;
}
function cmdNavOver(x){
var a = “../Images/navbar_” + x + “.jpg”;
document.getElementById(“Nav”).src= a;

xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
alert (“Your browser does not support AJAX!”);
return;
}
var url=”/Pages/” + x + “_blurb.html”;
xmlHttp.onreadystatechange=cmdNavOverStateChanged;
xmlHttp.open(“GET”,url,true);
xmlHttp.send(null);
}
function cmdNavOverStateChanged(){
if (xmlHttp.readyState==4){
document.getElementById(“insides”).innerHTML=xmlHttp.responseText;
}
}
[/CODE]

Let me know if you need something that I didn’t post.

Also in #JavaScript _↴