Link to home
Create AccountLog in
Avatar of GlobaLevel
GlobaLevelFlag for United States of America

asked on

ASP.NET - Ad Rotates - then can select in the top right corner

The attached is from Oracle...it rotates...then in the upper right corner one can select which pic oor ad the can see...how can this be done with .gif?
ad-rotator.png
Avatar of Chinmay Patel
Chinmay Patel
Flag of India image

Hi GlobaLevel,

This can't be done only using GIFs. You have to use either Flash or Images and JavaScript to get the desired effect.

Regards,
Chinmay
Avatar of GlobaLevel

ASKER

Images and JavaScript
>>Is there code out there for the js and images?
This is the file that controls that animation, you might want to look at page itself and understand how it works.

 
//	Author: santhosh.shanmugasundaram@oracle.com
// 	Created Date: 3.9.2009
//	Revisions: v 1.0
/* Start Rotating banner code */

var theImage = new Array()
theImage[0] = 'one_on'
theImage[1] = 'two_on'
theImage[2] = 'three_on'
theImage[3] = 'four_on'
theImage[4] = 'five_on'

var arrayLength = theImage.length;

function orimage()
{
document.getElementById("myImage1").className="one_off"
document.getElementById("myImage2").className="two_off"
document.getElementById("myImage3").className="three_off"
document.getElementById("myImage4").className="four_off"
document.getElementById("myImage5").className="five_off"

}

active = Math.floor(Math.random()* arrayLength );

k = 1;
var fadeinTimer,fadeoutTimer,hideTimer;
function animate(i,interaction)
{
	clearTimeout(fadeinTimer);
	clearTimeout(fadeoutTimer);
	clearTimeout(hideTimer);
	if(interaction=="first")
	{
		fadeIn(i);
		active = i;
		k = active;
	    timerID = setInterval("autorotator()",7000);
	}
	if(interaction==true)
	{	
		timerID=clearInterval(timerID);
	}
	orimage();
	if(active!=i)
	{
		fadeOut(active);
		fadeIn(i);
		active = i;
	}
	document.getElementById("myImage" + (i+1)).className=theImage[i];
	if(interaction==true)
	{
		k = active;
		timerID = setInterval("autorotator()",7000);
	}
}

function autorotator()
{
	animate(k,false);
	if(k!= (arrayLength  - 1))
	{
		k=k+1;
	}
	else
	{
		k =0;
	}
}

function getElm(eID) {
	return document.getElementById(eID);
}
function show(eID) {
	getElm(eID).style.display='block';
}
function hide(eID) {
	getElm(eID).style.display='none';
}
function setOpacity(eID, opacityLevel) {
	var eStyle = getElm(eID).style;
	eStyle.opacity = opacityLevel / 100;
	eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}
function fadeIn(eID) {
	setOpacity(eID, 0); show(eID); var timer = 0;
	for (var i=1; i<=100; i++) {
		fadeinTimer = setTimeout("setOpacity('"+eID+"',"+i+")", timer * 5);
		timer++;
	}
}
function fadeOut(eID) {
	var timer = 0;
	for (var i=100; i>=1; i--) {
		fadeoutTimer = setTimeout("setOpacity('"+eID+"',"+i+")", timer * 3);
		timer++;
	}
	hideTimer = setTimeout("hide('"+eID+"')", 500);
}
/* End Rotating banner code */
/* Start Rotating Fading text */
var DivID = "attentioncopyid";
var Speed = 30;
var Content = new Array();
if(g_ssSourceSiteId!="undefined")
	g_ssSourceSiteId = g_ssSourceSiteId.substr(4);
else
	g_ssSourceSiteId = "en";
/* Modified by Girish */
Content[0] = "<a href=\"/us/corporate/press/195766\" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Oracle Announces Oracle Cloud Office and Oracle Open Office 3.3');\">Oracle Announces Oracle Cloud Office and Oracle Open Office 3.3</a>";
Content[1] = "<a href=\"/us/corporate/press/195206\" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Oracle Introduces Oracles JD Edwards EnterpriseOne Apparel Management');\">Oracle Introduces Oracle&rsquo;s JD Edwards EnterpriseOne Apparel Management</a>";
Content[2] = "<a href=\"/us/corporate/press/194114\" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Oracle VM Blade Cluster Reference Configuration Dramatically Reduces Deployment Time');\">Oracle VM Blade Cluster Reference Configuration Dramatically Reduces Deployment Time</a>";

var MaskColors = new Array;
MaskColors[0] = "#000000";
var ContentTop = Content.length - 1;
var MaskTop = MaskColors.length - 1;
var DigitList = "0123456789ABCDEF".split("");
var DigitPointer = 15;
var ContentPointer = ContentTop;
var ColorPointer = MaskTop;
var CurrentDirection = 'up';
function FadeFunction() {
if( DigitPointer == 15 ) {
	ContentPointer++; if( ContentPointer > ContentTop ) { ContentPointer = 0; }
	ColorPointer++;   if( ColorPointer   > MaskTop    ) { ColorPointer   = 0; }
	if(document.getElementById) {
		var container = document.getElementById(DivID);
		container.innerHTML = '';
		container.innerHTML = Content[ContentPointer];
		}
	else if(document.all) {
		var divx = document.all[DivID];
		divx.innerHTML = Content[ContentPointer];
		}
	CurrentDirection = 'down';
	}
else if( DigitPointer == 0 ) { CurrentDirection = 'up'; }
if( CurrentDirection == 'up' ) { DigitPointer++; }
else { DigitPointer--; }
re = /0/g;
var thiscolor = MaskColors[ColorPointer].replace(re,DigitList[DigitPointer]);
document.getElementById(DivID).getElementsByTagName("a")[0].style.color = thiscolor;
if(thiscolor=="#000000")
{
	fadeingTimer = clearInterval(fadeingTimer);
	setTimeout("resumefader()", 3000);
}
}
function resumefader()
{
	fadeingTimer =	setInterval("FadeFunction()",Speed);
}
/* End Rotating Fading text */
/* Start Accordian code */
var accordion=function(){
	var tm=sp=10;
	function slider(n){this.nm=n; this.arr=[]}
	slider.prototype.init=function(t,c,k){
		var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
		h=a.getElementsByTagName('span'); s=a.getElementsByTagName('div'); this.l=h.length;
		for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onmouseover=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
		l=s.length;
		for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
	}
	slider.prototype.pro=function(d){
		for(var i=0;i<this.l;i++){
			var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
			if(h==d){s.style.display=''; su(s,1); h.className=this.sl}
			else if(s.style.display==''){su(s,-1); h.className=''}
		}
	}
	function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
	function sl(c,f){
		var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
		c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
		if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
	}
	return{slider:slider}
}();

function change()
{
	if(navigator.appName == 'Microsoft Internet Explorer')
	{
		document.searchForm.group.style.visibility='hidden';

	}
	document.getElementById("light").style.display="block";
	document.getElementById("fade").style.display="block";
	document.getElementById("light").innerHTML = "<div id='load' style='margin-right:250px; margin-top:50px;'><img src='http://www.oracleimg.com/ocom/groups/systemobject/@mktg_admin/documents/digitalasset/sitefinder_loader.gif' width='32' height='32' /></div><iframe src='/ocom/groups/public/@ocom/documents/webcontent/sitefinder.htm' frameborder='0' width='624' height='455' scrolling='no' allowtransparency='true' id='siteid' style='visibility:hidden'></iframe>";
}


/* End Accordian code */

function bubbleEvent(e)
{
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
}

Open in new window

Am I missing something...bc I cant get it to pull my my images...in runtim I get a broken link, I am familiar with Javascript...gotta a source file thats external that its looking for...
Could you tell me the name or the function which it is looking for?
Here is the function and code....

I am just tyring to test this locally with no outside src files...

Content[0] = "<a href="images/faces_middle.gif" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Test 123');\">Oracle Announces Oracle Cloud Office and Oracle Open Office 3.3</a>";
Content[1] = "<a href=\"/us/corporate/press/195206\" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Oracle Introduces Oracles JD Edwards EnterpriseOne Apparel Management');\">Oracle Introduces Oracle&rsquo;s JD Edwards EnterpriseOne Apparel Management</a>";
Content[2] = "<a href=\"/us/corporate/press/194114\" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Oracle VM Blade Cluster Reference Configuration Dramatically Reduces Deployment Time');\">Oracle VM Blade Cluster Reference Configuration Dramatically Reduces Deployment Time</a>";

<script type="text/javascript">             
                //	Author: santhosh.shanmugasundaram@oracle.com
// 	Created Date: 3.9.2009
//	Revisions: v 1.0
/* Start Rotating banner code */
/* // http://www.experts-exchange.com/Programming/Languages/.NET/ASP.NET/Q_26708833.html */


var theImage = new Array()
theImage[0] = 'one_on'
theImage[1] = 'two_on'
theImage[2] = 'three_on'
theImage[3] = 'four_on'
theImage[4] = 'five_on'

var arrayLength = theImage.length;

function orimage()
{
document.getElementById("myImage1").className="one_off"
document.getElementById("myImage2").className="two_off"
document.getElementById("myImage3").className="three_off"
document.getElementById("myImage4").className="four_off"
document.getElementById("myImage5").className="five_off"

}

active = Math.floor(Math.random()* arrayLength );

k = 1;
var fadeinTimer,fadeoutTimer,hideTimer;
function animate(i,interaction)
{
	clearTimeout(fadeinTimer);
	clearTimeout(fadeoutTimer);
	clearTimeout(hideTimer);
	if(interaction=="first")
	{
		fadeIn(i);
		active = i;
		k = active;
	    timerID = setInterval("autorotator()",7000);
	}
	if(interaction==true)
	{	
		timerID=clearInterval(timerID);
	}
	orimage();
	if(active!=i)
	{
		fadeOut(active);
		fadeIn(i);
		active = i;
	}
	document.getElementById("myImage" + (i+1)).className=theImage[i];
	if(interaction==true)
	{
		k = active;
		timerID = setInterval("autorotator()",7000);
	}
}

function autorotator()
{
	animate(k,false);
	if(k!= (arrayLength  - 1))
	{
		k=k+1;
	}
	else
	{
		k =0;
	}
}

function getElm(eID) {
	return document.getElementById(eID);
}
function show(eID) {
	getElm(eID).style.display='block';
}
function hide(eID) {
	getElm(eID).style.display='none';
}
function setOpacity(eID, opacityLevel) {
	var eStyle = getElm(eID).style;
	eStyle.opacity = opacityLevel / 100;
	eStyle.filter = 'alpha(opacity='+opacityLevel+')';
}
function fadeIn(eID) {
	setOpacity(eID, 0); show(eID); var timer = 0;
	for (var i=1; i<=100; i++) {
		fadeinTimer = setTimeout("setOpacity('"+eID+"',"+i+")", timer * 5);
		timer++;
	}
}
function fadeOut(eID) {
	var timer = 0;
	for (var i=100; i>=1; i--) {
		fadeoutTimer = setTimeout("setOpacity('"+eID+"',"+i+")", timer * 3);
		timer++;
	}
	hideTimer = setTimeout("hide('"+eID+"')", 500);
}
/* End Rotating banner code */
/* Start Rotating Fading text */
var DivID = "attentioncopyid";
var Speed = 30;
var Content = new Array();
if(g_ssSourceSiteId!="undefined")
	g_ssSourceSiteId = g_ssSourceSiteId.substr(4);
else
	g_ssSourceSiteId = "en";
/* Modified by Girish */
Content[0] = "<a href="images/faces_middle.gif" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Test 123');\">Oracle Announces Oracle Cloud Office and Oracle Open Office 3.3</a>";
Content[1] = "<a href=\"/us/corporate/press/195206\" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Oracle Introduces Oracles JD Edwards EnterpriseOne Apparel Management');\">Oracle Introduces Oracle&rsquo;s JD Edwards EnterpriseOne Apparel Management</a>";
Content[2] = "<a href=\"/us/corporate/press/194114\" onClick=\"navTrack('ocom','"+g_ssSourceSiteId+"','newsroom','Oracle VM Blade Cluster Reference Configuration Dramatically Reduces Deployment Time');\">Oracle VM Blade Cluster Reference Configuration Dramatically Reduces Deployment Time</a>";

var MaskColors = new Array;
MaskColors[0] = "#000000";
var ContentTop = Content.length - 1;
var MaskTop = MaskColors.length - 1;
var DigitList = "0123456789ABCDEF".split("");
var DigitPointer = 15;
var ContentPointer = ContentTop;
var ColorPointer = MaskTop;
var CurrentDirection = 'up';
function FadeFunction() {
if( DigitPointer == 15 ) {
	ContentPointer++; if( ContentPointer > ContentTop ) { ContentPointer = 0; }
	ColorPointer++;   if( ColorPointer   > MaskTop    ) { ColorPointer   = 0; }
	if(document.getElementById) {
		var container = document.getElementById(DivID);
		container.innerHTML = '';
		container.innerHTML = Content[ContentPointer];
		}
	else if(document.all) {
		var divx = document.all[DivID];
		divx.innerHTML = Content[ContentPointer];
		}
	CurrentDirection = 'down';
	}
else if( DigitPointer == 0 ) { CurrentDirection = 'up'; }
if( CurrentDirection == 'up' ) { DigitPointer++; }
else { DigitPointer--; }
re = /0/g;
var thiscolor = MaskColors[ColorPointer].replace(re,DigitList[DigitPointer]);
document.getElementById(DivID).getElementsByTagName("a")[0].style.color = thiscolor;
if(thiscolor=="#000000")
{
	fadeingTimer = clearInterval(fadeingTimer);
	setTimeout("resumefader()", 3000);
}
}
function resumefader()
{
	fadeingTimer =	setInterval("FadeFunction()",Speed);
}
/* End Rotating Fading text */
/* Start Accordian code */
var accordion=function(){
	var tm=sp=10;
	function slider(n){this.nm=n; this.arr=[]}
	slider.prototype.init=function(t,c,k){
		var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
		h=a.getElementsByTagName('span'); s=a.getElementsByTagName('div'); this.l=h.length;
		for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onmouseover=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
		l=s.length;
		for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
	}
	slider.prototype.pro=function(d){
		for(var i=0;i<this.l;i++){
			var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
			if(h==d){s.style.display=''; su(s,1); h.className=this.sl}
			else if(s.style.display==''){su(s,-1); h.className=''}
		}
	}
	function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
	function sl(c,f){
		var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
		c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
		if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
	}
	return{slider:slider}
}();

function change()
{
	if(navigator.appName == 'Microsoft Internet Explorer')
	{
		document.searchForm.group.style.visibility='hidden';

	}
	document.getElementById("light").style.display="block";
	document.getElementById("fade").style.display="block";
	document.getElementById("light").innerHTML = "<div id='load' style='margin-right:250px; margin-top:50px;'><img src='http://www.oracleimg.com/ocom/groups/systemobject/@mktg_admin/documents/digitalasset/sitefinder_loader.gif' width='32' height='32' /></div><iframe src='/ocom/groups/public/@ocom/documents/webcontent/sitefinder.htm' frameborder='0' width='624' height='455' scrolling='no' allowtransparency='true' id='siteid' style='visibility:hidden'></iframe>";
}


/* End Accordian code */

function bubbleEvent(e)
{
	if (!e) var e = window.event;
	e.cancelBubble = true;
	if (e.stopPropagation) e.stopPropagation();
}
 
</script>

Open in new window

so my image doesnt pull up at runtime...

faces_middle.gif
Did you study the original HTML page as well? I think it is going to be the combination of both JS and HTML From that page.
Im not sure where you got that code...but by the time I went out to the page and "View Source", it came up with different code..
ASKER CERTIFIED SOLUTION
Avatar of Chinmay Patel
Chinmay Patel
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account