...

View Full Version : images not displayed using JS



naveendk.55
09-22-2011, 06:50 PM
Hi, I tried displaying few images as MENU using Javascript. These images are showed normally in Firefox and chrome except Internet Explorer. Help plz

naveendk.55
09-22-2011, 06:57 PM
Hi, I tried displaying few images as MENU using Javascript. These images are showed normally in Firefox and chrome except Internet Explorer. These images are .GIF files. I also tried changing the file format to .PNG and JPEG but not avail. Help plz.

devnull69
09-22-2011, 07:22 PM
Where is the code? I'm not good in guessing games ...

naveendk.55
09-23-2011, 10:49 AM
Hi Below is the code for this issue. The issue only happened after I changed the existing .GIF menu images with new .GIF images. I don't have much knowledge about the script, I just edited the menu images with new images by just editing the image names. These menu are displaying in Chrome and firefox but not in IE.





<base target="contents">

<body bgcolor=white background=LeafBackground22-1020x1459.jpg lang=EN-US
link=blue vlink=blue style='tab-interval:.5in' onload="blurtext()">

<div class=Section1>

<table class=MsoNormalTable border=0 cellspacing=0 cellpadding=0 align=left
style='mso-cellspacing:0in;mso-table-overlap:never;mso-table-lspace:9.0pt;
margin-left:6.75pt;mso-table-rspace:9.0pt;margin-right:6.75pt;mso-table-anchor-vertical:
paragraph;mso-table-anchor-horizontal:column;mso-table-left:left;mso-table-top:
.05pt;mso-padding-alt:0in 0in 0in 0in'>
<tr style='mso-yfti-irow:0;mso-yfti-firstrow:yes;mso-yfti-lastrow:yes'>
<td style='padding:0in 0in 0in 0in'>
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'><span style='font-size:
10.0pt;mso-fareast-font-family:Batang;color:windowtext'><script>

var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;
if (ns4) ld=document.loading;
else if (ns6) ld=document.getElementById("loading").style;
else if (ie4) ld=document.all.loading.style;
function init()
{
if(ns4)
{
ld.visibility="hidden";
}
else if (ns6||ie4)
ld.display="none";
}
</script><script language="JavaScript">
var thissize=11
var textfont="Verdana"

var textcolor= new Array()
textcolor[0]="EEEEEE"
textcolor[1]="DDDDDD"
textcolor[2]="CCCCCC"
textcolor[3]="AAAAAA"
textcolor[4]="888888"
textcolor[5]="666666"
textcolor[6]="555555"
textcolor[7]="444444"
textcolor[8]="333333"
textcolor[9]="222222"
textcolor[10]="111111"
textcolor[11]="000000"

var message = new Array()
message[0]="Developed by..."
message[1]="<u>Sanjeeva Reddy. P</u> (ID 2062)"
message[2]="Designed by... "
message[3]="<u>Sanjeeva Reddy. P</u> (ID 2062)"
message[4]="Information collected by ..."
message[5]="<u>Sanjeeva Reddy. P</u> (ID 2062)"
message[6]="Printing, Networking issue information from Chandragirish"
message[7]="Advanced Faxing issues by Nagendra Kumar. Singoti (ID 1933)"
message[8]="Hardware issues by Chitti babu. Y.(ID 1961)"
message[9]="Installation issues by Kishore C Wagh (ID 1652)"
message[10]="Scanning issues by Nazim Ali Zahed Md. (ID 2271)"
message[11]="Tool update SPOCs - Varun Munimakula and Kalpana Sigh"
message[12]=""


var i_blurstrength=10
var i_message=0
var i_textcolor=0

function blurtext() {
if(document.all) {
if (i_blurstrength >=-2) {
if (i_textcolor >=textcolor.length-1) {i_textcolor=textcolor.length-1}
blurthis.innerHTML="<span id='blurpit1' style='position:absolute;visibility:visible;width:600px;top:5px;left:5px;filter:blur(add=0,strength="+i_blurstrength+",direction=90);font-family:"+textfont+";font-size:"+thissize+"pt;color:"+textcolor[i_textcolor]+"'>"+message[i_message]+"</span>";
document.close()
i_blurstrength=i_blurstrength-2
i_textcolor++
var timer=setTimeout("blurtext()",100)
}
else {
if (i_textcolor >=textcolor.length-1) {i_textcolor=textcolor.length-1}
blurthis.innerHTML="<span id='blurit1' style='position:absolute;visibility:visible;width:600px; top:5px;left:5px;filter:blendTrans(duration=4.2);font-family:"+textfont+";font-size:"+thissize+"pt;color:000000'>"+message[i_message]+"</span>";
i_message++
if (i_message>=message.length){i_message=0}
i_blurstrength=20
i_textcolor=0
clearTimeout(timer)
var timer=setTimeout("blurtext()",2000)
}
}
}
</script><script language="JavaScript1.2" type="text/javascript">
<!--
var ebbtcb_btnCount = 14;
var m8867_staCount = 3;
var ebbtcb_btnImages = new Array();
for (i= 0; i< ebbtcb_btnCount; i++)
{
ebbtcb_btnImages[i] = new Array();
for (j= 0; j< m8867_staCount; j++)
{
ebbtcb_btnImages[i][j] = new Image();
ebbtcb_btnImages[i][j].src = '_img/ebbtcbindex' + i + '_' + j + '.gif';
}
}
function ebbtcb_btnMouseOut(img)
{
document.images[img].src = ebbtcb_btnImages[img.substring(img.indexOf('index')+5,img.length)][0].src;
};
function ebbtcb_btnMouseOver(img)
{
document.images[img].src = ebbtcb_btnImages[img.substring(img.indexOf('index')+5,img.length)][1].src;
};
function ebbtcb_btnMouseDown(img)
{
document.images[img].src = ebbtcb_btnImages[img.substring(img.indexOf('index')+5,img.length)][2].src;
};
//-->
</script></span><a href="hometab.htm"
onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex1')"><!----------- button code -------><img
border=0 width=80 height=35 id="_x0000_i1028" src="_img/ebbtcbindex1_0.gif"
name=ebbtcbindex1></a><o:p></o:p></p>
</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td1">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'><a href="searchpage.htm"
onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex2')"><img border=0 width=80
height=35 id="_x0000_i1029" src="_img/ebbtcbindex2_0.gif" name=ebbtcbindex2></a><o:p></o:p></p>
</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td2">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'>

<a href="generaltab.htm"
onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex3')"><img border=0 width=70
height=35 id="_x0000_i1030" src="_img/ebbtcbindex3_0.gif" name=ebbtcbindex3></a><o:p></o:p></p>
</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td3">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'><a
href="supportlinks.htm" onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex4')"><img
border=0 width=120 height=35 id="_x0000_i1031" src="_img/ebbtcbindex4_0.gif"
name=ebbtcbindex4></a><o:p></o:p></p>
</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td4">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'>

<a
href="modelspecific.htm" onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex5')"><img
border=0 width=100 height=35 id="_x0000_i1032" src="_img/ebbtcbindex5_0.gif"
name=ebbtcbindex5></a><o:p></o:p></p>

</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td5">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'><!--<a href="issuestab.htm"
onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex6')"><img border=0 width=70
height=35 id="_x0000_i1033" src="_img/ebbtcbindex6_0.gif" name=ebbtcbindex6></a><o:p></o:p></p>
</td> -->
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td6">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'>
</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td7">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'>

<!-- <a href="updatetab.htm"
onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex8')"><img border=0 width=70
height=35 id="_x0000_i1035" src="_img/ebbtcbindex8_0.gif" name=ebbtcbindex8></a><o:p></o:p></p> -->
</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td8">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'> <a
href="articlespage.htm" target=main
onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex9')"><img border=0 width=80
height=35 id="_x0000_i1036" src="_img/ebbtcbindex9_0.gif" name=ebbtcbindex9></a><o:p></o:p></p>
</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td9">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'>

<a
href="usefulinfotab.htm" onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex10')"><img
border=0 width=90 height=35 id="_x0000_i1037" src="_img/ebbtcbindex10_0.gif"
name=ebbtcbindex10></a><o:p></o:p></p>

</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td10">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'><a
href="home/morehp.htm" target=main
onMouseDown="ebbtcb_btnMouseDown('ebbtcbindex11')"><img border=0 width=100
height=35 id="_x0000_i1038" src="_img/ebbtcbindex11_0.gif"
name=ebbtcbindex11></a><o:p></o:p></p>
</td>
<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td11">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'>

<td style='padding:0in 0in 0in 0in' id="ebbtcbindex_td12">
<p class=MsoNormal style='mso-element:frame;mso-element-frame-hspace:9.0pt;
mso-element-wrap:around;mso-element-anchor-vertical:paragraph;mso-element-anchor-horizontal:
column;mso-element-top:.05pt;mso-height-rule:exactly'>&nbsp;</p>
</td>
</tr>
</table>

<p class=MsoNormal><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600"
o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="_x0000_s1027" type="#_x0000_t75" style='position:absolute;
margin-left:44.25pt;margin-top:-7.15pt;width:150pt;height:38.25pt;z-index:-1;
mso-position-horizontal-relative:text;mso-position-vertical-relative:text'
wrapcoords="-108 0 -108 21176 21600 21176 21600 0 -108 0">
<v:imagedata src="top_bar_files/image001.gif" o:title="logo_mphasis"
chromakey="white" blacklevel="-3932f"/>
</v:shape><![endif]--><![if !vml]><span style='mso-ignore:vglayout;position:
relative;z-index:-1'><span style='position:absolute;left:59px;top:-10px;
width:200px;height:51px'><img width=200 height=51
src="top_bar_files/image002.gif" v:shapes="_x0000_s1027"></span></span><![endif]><br
clear=all>
<br>
<script language="JavaScript1.2">
// Begin
var no = 5; // image number or falling rate
var speed = 10; // the lower the number the faster the image moves
var snow = new Array();
snow[0] = "bubble.gif"
//snow[1] = "bubble1.gif"


var ns4up = (document.layers) ? 1 : 0; // browser sniffer
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 1200;

if (ns4up||ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
j = 0;

for (i = 0; i < no; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position variables
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude variables
stx[i] = 0.02 + Math.random()/10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ns4up) { // set layers
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} else {
document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ snow[j] + "\" border=\"0\"></layer>");
} } else if (ie4up||ns6up) { if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + snow[j] + "\" border=\"0\"></div>");
}
}
if (j == (snow.length-1)) { j = 0; } else { j += 1; }
}

function snowNS() { // Netscape main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i]; if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight; }
dx[i] += stx[i];
document.layers["dot"+i].top = yp[i]+pageYOffset;
document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);
}
setTimeout("snowNS()", speed);
}

function snowIE_NS6() { // IE main animation function
for (i = 0; i < no; ++ i) { // iterate for every dot
yp[i] -= sty[i];
if (yp[i] < -50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = doc_height;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
}
dx[i] += stx[i];
if (ie4up){
document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
}
else if (ns6up){
document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
}
}
setTimeout("snowIE_NS6()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up||ns6up) {
snowIE_NS6();
}
</script><o:p></o:p></p>

</div>

<!---------- end of button code -------><!--special effect, bubble effect--><!--<table width="133" border="0" cellspacing="0" cellpadding="3"><tr><td align="center"><a href="" target="_blank"><img src="http://www.hit-counter-download.com/cgi-bin/image.pl?URL=27532-7603" alt="hit counter code started on 15 March 2007 at 2:00 PM" border="0" ></a></td></tr><tr><td align="center"><font style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #24092C; text-decoration: none;"> <a href="" target="_blank" style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #444444; text-decoration: none;" title="hit counter code">hit counter code started on 15 March 2007 at 2:00 PM</a> </font></td></tr></table>--><!--<table width="133" border="0" cellspacing="0" cellpadding="3"><tr><td align="center"><img src="http://www.hit-counter-download.com/cgi-bin/image.pl?URL=27532-7607" border="0" ></td></tr><tr><td align="center"><font style="font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 9px; color: #24092C; text-decoration: none;">hit counter code started on 15 March 2007 at 2:00 PM </font></td></tr></table>
-->
</body>

</html>

Kor
09-23-2011, 02:36 PM
The code is medieval (written on the ancient time of Netscape 4, 6 and IE4) and, as it is branchy and leafy enough, it is impossible to debug. I doubt it works in FF or Chrome, as you say. You need a new and modern approach. Try learning JavaScript first and write yourself the code, or hire a professional. And learn also CSS, as I see you have a bunch of mso- nonstandard CSS attributes there.

HTML note: Don't use the <base target=""> tag. That will spoil things. And where's your doctype?

naveendk.55
09-23-2011, 05:01 PM
Sure, I'm new to scripting. I have 8 menu names. Each menu has 3 images that changes on first load, mouse over and after clicking on it. Let me know if you've any code for this.

Kor
09-23-2011, 05:05 PM
http://www.table2css.com/articles/how-create-rollover-image-button-html-and-css-without-any-javascript
http://www.webvamp.co.uk/blog/coding/css-image-rollovers/
http://www.elated.com/articles/css-rollover-buttons/

naveendk.55
09-23-2011, 06:43 PM
I would also like to inform you that the same code was working in IE6 and IE7 with older menu options. The older menu images are also .GIF files. I think the above code should work with new images. Any changes you see in the code?

naveendk.55
09-24-2011, 07:38 PM
This is the same code that worked earlier. I just changed the images.. nothing else. Any help will be appreciated?

Philip M
09-25-2011, 12:15 PM
As Kor says, that code is antiquated, and surely will not work with IE8. Toss it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum