Images in Opera wont be displayed

[Honky]

Hello. I tried another scroller and a Friend just told me that the Images will not be displayed. It works in IE and FF. Thank you


<script language="JavaScript1.2">

//Translucent scroller- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var scroller_width='200px'
var scroller_height='115px'
var bgcolor='#FFFFFF'
var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed

scrollercontent[0]='<center><font face="verdana" font-weight="700" color="red">Next-Generation-Hosting <p></p><a href="http://ng-hosting.de/" target="_blank"><img src="http://www.ng-hosting.de/images/linkus/4.jpg" WIDTH="105" HEIGHT="40" /></a></center></font>'
scrollercontent[1]='<center><font face="verdana" font-weight="700" color="darkgreen">WeeD Community <p></p><a href="http://irc-stoners.de/" target="_blank"><img src="http://www.brainlag.eu/banner_friends/irc-stoners.png" WIDTH="200" /></a><p></p> at Quakenet</center></font>'
scrollercontent[2]='<center><font face="verdana" font-weight="700" color="black">Blog and More <p></p><a href="http://www.p4cm4n.de/" target="_blank"><img src="http://www.brainlag.eu/banner_friends/p4cm4n.png" WIDTH="200" /></a></center></font>'

////NO need to edit beyond here/////////////

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
}

var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}

function resetit(what){
curpos=parseInt(scroller_height)*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (ie4||dom||document.layers)
window.onload=startit

</script>

[jscheuer1]

Another outdated script - Find this line and get rid of the highlighted part:


var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

Find all instances of:


-moz-opacity

Change them all to:


opacity

Find all instances of:


MozOpacity

Change them all to:


opacity

[Honky]

Thanks a lot.
The problem now is that u dont have this effect anymore.
If u want take a look here (http://www.brainlag.eu/content.php)

[jscheuer1]

You missed at least one of the changes. Here, try this version, it has several other improvements:


<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body>
<script type="text/javascript">
(function(){

//Translucent scroller- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var scroller_width='150px'
var scroller_height='115px'
var bgcolor='#E0EFD1'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]='Visit our partner site <a href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!'
scrollercontent[1]='Got JavaScript? <a href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.'
scrollercontent[2]='Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'


////NO need to edit beyond here/////////////
var crossobj, dropslide, tempobj, nextcanvas;
var ie4=document.all
var dom=document.getElementById

if (ie4||dom)
document.write('<div style="position:relative;width:'+scroller_width+';height:'+scroller_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);opacity :0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+scroller_width+';height:'+scroller_height+';top:'+scroller_height+';filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);opacity :0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+scroller_width+' height='+scroller_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+scroller_width+' height='+scroller_height+' left=0 top=0>'+scrollercontent[0]+'</layer></ilayer>')
}

var curpos=scroller_height*(1)
var degree=10
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function moveslide(){
if (curpos>0){
curpos=Math.max(curpos-degree,0)
tempobj.style.top=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
//crossobj.filters.alpha.opacity=100
crossobj.style.removeAttribute('filter');
else if (crossobj.style.opacity)
crossobj.style.opacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=scrollercontent[curindex]
nextindex=(nextindex<scrollercontent.length-1)? nextindex+1 : 0
setTimeout(rotateslide, pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.style.filter = document.all.canvas1.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=20)"
else if (crossobj.style.opacity)
document.getElementById("canvas0").style.opacity=document.getElementById("canvas1").style.opacity=0.2
dropslide=setInterval(moveslide, 50)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(scrollercontent[curindex])
crossobj.document.close()
}
curindex=(curindex<scrollercontent.length-1)? curindex+1 : 0
}

function resetit(what){
curpos=parseInt(scroller_height)*(1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.top=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=scrollercontent[curindex]
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (window.addEventListener){
window.addEventListener('load',startit , false);
}
else if (window.attachEvent){
window.attachEvent('onload', startit);
}
else if (ie4||dom||document.layers){
window.onload=startit;
}
})();
</script>
</body>
</html>

[Honky]

Well, the opacity is still transparent

Here is your code without any changes

http://test.brainlag.eu/content.php

Thank you very much

Here is the your code with my banners http://www.brainlag.eu/content.php
Same. Between 2 banners it is transparent.

[jscheuer1]

Both of yours work fine here. Demo of mine:

http://home.comcast.net/~jscheuer1/side/trans_scroller_h.htm

Perhaps you are viewing an older cached copy in the browser. Clear your browser's cache.

There is an error though in IE, nothing to do with this script (on brainlag.eu/content.php around line 295):


<div id="ad_global_below_navbar"><div id="a">
<script type="text/javascript">
<div align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-9826412154929970";
/* 728x90, Erstellt 14.09.09 */
google_ad_slot = "7943715422";
google_ad_width = 728;
google_ad_height = 90;


Those highlighted lines should probably be removed.

[jscheuer1]

I also see another problem on that same page (that's what's making the bleed through, sorry I missed it before):


<script type="text/javascript">
(function(){

//Translucent scroller- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use

var scroller_width='205pxx'
var scroller_height='115px'
var bgcolor='#FFFFFF'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)


Should be px

[Honky]

Thank You. I will have to check that.

Btw. My fault. I wanted the effect that one layer goes over the other, as u can see right now, here (http://www.brainlag.eu/content.php)

Im not sure, if the code you have been working on, is also the right one for my suites?