JavaScript - Flickering Images - Changing Opacity

Hello, I am trying to connect images to some anchor tags, but each anchor matches a specific image. The aim is that when someone clicks on a certain link it will display an image (which is some text information). I have some code from a previous thread which I gained a really good script from the help. I'm not sure how to connect these anchors to the specific image. I'm sure this code only needs tweaking slightly to give me what I need.

Here is the code relevant to my issue:

HTML:
Code:

<div id="faqBox">
	 <h1 id="faqHeader"><u>F.A.Q's</u></h1>
	 <ul>
		 <li><a href="#" onclick="">What is the purpose of this website?</a></li>
		 <li><a href="#">What type of achievements would someone of had to do to be eligable?</a></li>
		 <li><a href="#">Why was this award created?</a></li>
		 <li><a href="#">How do we nominate somebody?</a></li>
		 <li><a href="#">How are people presented with this award?</a></li>
	 </ul>
</div>
<div id="faqInfoBox">
	 <img src="images/content1.png" name="allimage" id="allimage" alt="content1" border="0" />
</div>

CSS:
Code:

#faqInfoBox {width: 40%;
             border: 5px ridge;
			 height: 310px;
			 background: #606626;
			 float: right;
			 margin-right: 3%;}
			 
#faqBox ul li{font-family: trebuchet ms;
              line-height: 30px;
			  list-style-type: square;}

JS:
Code:

var imgArray = new Array(4);

     imgArray[0] = 'images/content1.png';
     imgArray[1] = 'images/content2.png';
     imgArray[2] = 'images/content3.png';
     imgArray[3] = 'images/content4.png';
     imgArray[4] = 'images/content5.png';
	 
	 var currIndex = 0;
 
     function imgChange(that)
     {
	 if(currIndex < myImages.length - 1) {
         that.src = myImages[++currIndex];
         }else {
         currIndex = 0;
         that.src = myImages[currIndex];
         }
     }

The JavaScript is what needs tweaking. I also have it uploaded to my free domain which you can find the site he http://abjava.host22.com/Site1/ if you would care to take a look.

I don't want to be fed the answer but just some pointers/tips on what I could do.

I was thinking of connecting the function to the anchor tags onclick event. But because I need the specific images to display when their relative link is clicked I know it could be harder to do this. I want to stack the images on top of each other and hide their display then when a link is clicked show it, when another is clicked, hide the first and show that one. (Please note,the last 4 images have not yet been created).

I can figure out to do the CSS for this so just any help on the JS side will be very helpful to me.

Thank you very much in advance if anyone can help.

Regards,

LC.

I currently have an image and underneath it there are 6 thumbnails. When I run the cursor over them the big image changes. This works fine. However, I would like to have text beside the big picture that also changes depending on the thumbnail over which I am hovering.

I have tried to work it out myself but failed miserably. I have tried forums, but can't find what I need. My code as it stands at the moment is:

<script type="text/javascript">
if (document.images) {image0 = new Image;
image0.src = "i/p0.png";
image1 = new Image;
image1.src = "i/p1.png";
image2 = new Image;
image2.src = "i/p2.png";
image3 = new Image;
image3.src = "i/p3.png";
image4 = new Image;
image4.src = "i/p4.png";
image5 = new Image;
image5.src = "i/p5.png";
image6 = new Image;
image6.src = "i/p6.png";
}</script>

and

<img class="img" src="i/p0.png" align="left" width="300" name="rollimg" title='blah' alt="blah"/>
<span class="inverse-text"><this is where I want changing text to appear as I roll over thumbnails.</span>
<br clear="all"/>

<span onmouseover="document.rollimg.src=image0.src;"><img src="i/tb/t0.jpg" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image1.src;"><img src="i/tb/t1.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image2.src;"><img src="i/tb/t2.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image3.src;"><img src="i/tb/t3.gif" class="img" width="70" alt="blah" title="blah"/></span>

<span onmouseover="document.rollimg.src=image4.src;"><img src="i/tb/t4.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image5.src;"><img src="i/tb/t5.gif" class="img" width="70" alt="blah" title="blah"/>

<span onmouseover="document.rollimg.src=image6.src;"><img src="i/tb/t6.gif" class="img" width="70" alt="blah" title="blah"/>

Ideally if you could tell me how to update the above script and code, so that it works, I would be very grateful.

I have a problem when changing images and image maps with mouseover and click events in IE. Firefox, Chrome and Safari all work well but IE does not. It's hard to describe but when I mouse over a hot spot the image changes and then right away changes back. you can see it here: here is the Javascript code:
Code:

var current_overID = "";
var last_overID = "";
 
function item (img_name,width,height)
{
        img_prefix = img_name;
        this.slide_img = new Image (width,height);
        this.slide_img.src = "http://www.dsisyr.com/images/stories/DeltaV/" + img_prefix + ".jpg";
}
 
function new_item (img_name,width,height) 
{
        item [img_name] = new item (img_name,width,height);
}
 
function mouseover (itemID, mapID)
{
        current_overID = itemID;
        if (current_overID != last_overID) {
                          document.deltavmap.src = item [current_overID].slide_img.src;
						  document.deltavmap.useMap=mapID;
        }
}

 
new_item ("DSI-DeltaV1",700,300);
new_item ("DSI-DeltaV1-2-1",700,300);
new_item ("DSI-DeltaV1-2-2",700,300);
.....many more


<MAP NAME="deltav"> 
<AREA SHAPE="RECT" COORDS="27,27,219,53" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng')"  window.defaultStatus='' window.status='Engineering' return true > 
<AREA SHAPE="RECT" COORDS="27,74,171,97" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-3-1', '#sw')" window.defaultStatus='' window.status='Software'; return true > 
<AREA SHAPE="RECT" COORDS="27,122,270,145" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-4-1', '#doc')" window.defaultStatus='' window.status='Documentation'; return true > 
<AREA SHAPE="RECT" COORDS="27,167,156,195" HREF="#" Onmouseover="mouseover('DSI-DeltaV1-5-1', '#sup')" window.defaultStatus='' window.status='Support'; return true > 
<AREA SHAPE="DEFAULT" NOHREF> 
 
</MAP> 

<MAP NAME="eng"> 
<AREA SHAPE="RECT" COORDS="38,52,244,75"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-1', '#eng') "
    window.defaultStatus='' 
    window.status='Batch Processing' return true 
    > 
<AREA SHAPE="RECT" COORDS="40,82,230,103"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-2', '#eng')"
    window.defaultStatus='' 
    window.status='Control Modules' return true 
    > 
<AREA SHAPE="RECT" COORDS="40,112,143,136"
	HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-3', '#eng')"
    window.defaultStatus='' 
    window.status='Graphics'  return true
	>
    <AREA SHAPE="RECT" COORDS="40,141,176,168" 	
		HREF="#" Onmouseover="mouseover('DSI-DeltaV1-2-4', '#eng')"
		window.defaultStatus=''
		window.status='ProtoTyping' return true
	>
<AREA SHAPE="RECT" COORDS="24,224,84,234" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-3-1', '#sw')"
    window.defaultStatus='' 
    window.status='Software' return true 
    > 
<AREA SHAPE="RECT" COORDS="24,236,124,247" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-4-1', '#doc')"
    window.defaultStatus=''
    window.status='Documentation' return true 
    > 
<AREA SHAPE="RECT" COORDS="25,248,76,261" 
	HREF="#" OnClick="mouseover('DSI-DeltaV1-5-1', '#sup')"
    window.defaultStatus='' 
    window.status='Support' return true 
    > 
<AREA SHAPE="RECT" COORDS="620,240,699,399" HREF="#" OnClick="mouseover('DSI-DeltaV1', '#deltav')" window.defaultStatus='' window.status='deltav'; return true > 
<AREA SHAPE="DEFAULT" NOHREF> 
 
</MAP> 
... many others

Can any one tell me what i need to do to fix this in IE? Thanks!
Fayette

Hopefully this isn't too badly placed in the Java forum. I'm doing research for a website I'm going to be working on, and am going to be working with a friend to develop (my idea, their coding experience). I have a couple friends that deal in a couple languages, but I'm not sure which can accomplish what I want, so I turn to you:

I want to create text that flickers, like an eerie dying fluorescent lightbulb in a horror film. I don't expect it to put out light, and it really doesn't have to even appear like a light, just...like the text it degrading, I suppose is the best way to put it. Like the pixels are trying to stay alive and struggling. I'd really, REALLY like to avoid anything heavy like Flash (and er...I don't know anyone that knows that one) so something in-code (Java, PHP, or even CSS if that's a possibility) would be amazing. I appreciate any help and guidance in this direction. Thanks in advance!

1) Script Title:
Arrow Side Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...menu-arrow.htm

3.) My Test Pg.
http://macmajor.homeip.net/shadow_test/shadow.html

3) Describe problem:

After customizing this menu to suit my needs, I find that it flickers (and jumps) between headers ONLY in FF (3.0.15) on the Mac. This is also the case with the Demo on Dynamic Drive. For example, if you hold your mouse on a header item and your mouse moves by a slight hair, it automatically jumps and highlights another menu item without moving your mouse (for some even weirder reason, the item it highlights is always 2up from the one your mouse is positioned over). Sometimes it just flickers between them, other times it ‘moves’ and completely highlights the other item in it’s selected state (as if you moved your mouse there).

If you know of a fix, I would certainly appreciate it.

Thanks in advance!
Tracy

I have created a floating layer using Javascript that remains always on top of page on scrolling.Issue is,at some point while scrolling,the layer flickers continuously.
The html page is as follows:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JAVASCRIPT TESTING</title>
<script language="javascript" type="text/javascript" src="FloatingMenu.js">
</script>
<link rel="stylesheet" type="text/css" href="formatting.css">
</head>
<body>
<div id="header1">
<b><font color='Red' size='6pts' style='letter-spacing: 2px;'>Floating Layer Testing</font></b>
</div>


<div id="content">
<p>Like many common software systems, JavaScript has a history of security problems. Many of these problems could allow a person with malevolent intent to steal sensitive information from a visitor. The number and type of such holes in security vary among browsers and operating system versions. Most JavaScript security holes have been caught and fixed, but new ones are being discovered all the time. For a list of current security holes check out your browser's and operating system's Web pages. As a Web site author, it is your responsibility to keep up-to-date on the current status of known security holes in the applications you create.

Signing Scripts
In Chapter 11, I explained that JavaScript does not provide the ability to directly access files on the client computer. This can be a very large hurdle to overcome if you're trying to upload a file to a server from the client computer. Fortunately, file uploading is one of many functional enhancements that signed scripts provide. Signed scripts are specially packaged scripts that have been verified and signed to be correct and non-threatening. These scripts have additional rights on the client computer that allow a programmer to do many things that he wouldn't otherwise be able to.

With the introduction of Netscape 4.0, a new security model was put in place that would allow digitally signed scripts to bypass some of the restrictions that had previously been placed on them. A signed script can request expanded privileges from the visitor and, with the visitor's permission, gain access to restricted data. A signed script requests these additional permissions through LiveConnect, which allows your JavaScript code to communicate with the Java Capabilities API. The security model allows JavaScript to access certain classes in Java in order to extend its functionality while still maintaining tight security for the client.

A digital signature is a fingerprint of the original programmer, and it allows the security model of the browser to detect where (or from whom) it originated. A script signer can be a person or an organization. By signing a script, you acknowledge yourself as the author and accept responsibility for the program's actions. A signed script contains a cryptographic checksum, which is just a special value that ensures the signed script has not been changed. When a digital signature is detected, you are assured that the code has not been tampered with since the programmer signed it.

Once you finish writing a script, you can use the Netscape Signing Tool to digitally sign it. Signing a script does the following:

Unambiguously assigns ownership of the script to a person or organization.

Allows an HTML page to use multiple signed scripts.

Places the signed script into a Java Archive (JAR) file.

Places the source of the script in the JAR file.

Once a user confirms the origin of the script and is assured that it has not been tampered with since its signing, he or she can then decide whether to grant the privileges requested by the script based on the validated identity of the certificate owner and validated integrity of the script.

.</p>
</div>


<div id="movable">
<b>Please Login or Register</b>
</div>
</body>
</html>

JAVASCRIPT FILE IS AS FOLLOWS:

Code:

var startY=0;
var currY=startY;
var destY=currY;
var timerID=0;
var tmr_on=0;
var temp;
function floatMenu() {
	clearInterval(timerID);
	tmr_on=0;
if (document.documentElement.scrollTop) {
temp=document.documentElement.scrollTop; }
else {
temp=document.body.scrollTop; }
destY=temp+startY;
startFloat();
}

function startFloat() {
if(currY==destY) {
clearInterval(timerID);
tmr_on=0;
}
else if(currY<destY) {
currY+=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
 timerID=setInterval("startFloat()",10);
 tmr_on=1;
 }
}
else if(currY>destY) {
currY-=2;
var newY=currY+"px";
document.getElementById("movable").style.top=newY;
if(tmr_on==0) {
 timerID=setInterval("startFloat()",10);
 tmr_on=1;
 }
}
}
window.onscroll=floatMenu;
window.onresize=floatMenu;

AND CSS FILE IS AS FOLLOWS:

Code:

#header1 {
background-color: #66ccff;
border: 1px solid #66ccff;
margin-bottom: 5px;
}

#content {
padding: 10px;
border: 1px solid #66ccff;
margin-bottom: 5px;
margin-left: 21%;
height: 800px;
}

#content a {
text-decoration: none;
color: blue;
display: block;
}

a {
text-decoration: none;
color: blue;
}

#movable {
position: absolute;
width: 20%;
background: #fdcfcc;
top: 0px;
left: 0px;
}

At some point while scrolling,the div 'movable' flickers continuously,while at some other point,it is perfectly stable.
Problem is coming on both IE and FF.Any help seriously appreciated...

Hello. I know I get set opacity for IE using the CSS
Code:

filter:alpha(opacity=50);

and I set it with JS as
Code:

theObj.style.filter = "alpha(opacity=" + (opac * 100) + ")";

but how can I read it's initial value (and store it in a variable)?

Andy.

Added: I should mention I use this function to get the current style:
Code:

var GetStyle = function (el, strRule) {		// e.g. "font-size" - robertnyman.com
    var elem = (typeof el === 'string') ? document.getElementById(el) : el;
    if (document.defaultView && document.defaultView.getComputedStyle ) {
        return document.defaultView.getComputedStyle(elem, '').getPropertyValue(strRule);
    }
    else if ( elem.currentStyle ) {
        strRule = strRule.replace(/\-(\w)/g, function (strMatch, p1) {
            return p1.toUpperCase();
        });
        return elem.currentStyle[strRule];
    }
    else
        return '';
}

;

Hey,

I have a script that needs to see the current opacity value of divs but I can not find the code to make it work in IE. I've googled it for over an hour with no answer. Any suggestions?

For non-IE browsers, here is the code I am using
Code:

div_opac = document.getElementById(some_div).style.opacity;

Thanks for the help!

Hey all, I found this code but don't fully understand it. Can anyone take a brief moment to explain what is occuring in the clearMenu, setOpacity and fadeMenu functions:
Code:

// configuration variables
var timeout   = 250; // milliseconds
var fadeSpeed = 500;  // milliseconds
var useFade   = true;

// timers array
var timers = new Array();

// state array -- by id, value = active, false = inactive
var state = new Array();

// lastOpacity: used to prevent multiple timers from making the fade flicker
var lastOpacity = new Array();

// MSIE has its own way of setting opacity, so we have to detect it
// all the other major browsers support the standard DOM opacity property
var msie = false;
if( navigator.appName == "Microsoft Internet Explorer" ) msie = true;

// entry point: set element to visible and clear its timers
function setMenu( id )
{
    var e = document.getElementById(id); //When the user rolls over one of horizontal menu items, the setMenu method is called and we pass in as an argument, the id of the associated ul element, which we then set its visibility attribute to visible.
    e.style.visibility = "visible";
    state[id] = true;
    setOpacity( id, 1 );
    if(timers[id]) {
        clearTimeout(timers[id]);
        timers[id] = undefined;
     }
}

// set element to hidden and reset its opacity
// typically called by a timer
// may be used as an entry point to bypass timers and fades
function hideMenu( id )
{
    var e = document.getElementById(id);
    state[id] = false;
    e.style.visibility = "hidden";
    if(useFade) setOpacity( id, 1 );
}

// entry point: hide the menu using fade (if enabled)
function clearMenu( id )
{
    if(useFade) timers[id] = setTimeout( 'fadeMenu( "' + id + '" )', timeout );
    else timers[id] = setTimeout( 'hideMenu( "' + id + '" )', timeout );
}

// set the opacity
// special support for MSIE
function setOpacity( id, value )
{
    var e = document.getElementById(id);

    if(state[id]) value = 1;    // menu fade was interrupted
    else if(lastOpacity[id] && (lastOpacity[id] < value)) value = lastOpacity[id];  // prevents flicker if multiple timers set
    
    if(msie) e.style.filter = 'alpha(opacity=' + value * 100 + ')'; // MS Internet Explorer
    else e.style.opacity = (value);     // Everyone else (standard DOM)

    if( value == 0 ) hideMenu( id );    // when all faded, reset the menu state
    lastOpacity[id] = value;
}

// fade a menu
// typically called by a timer
function fadeMenu ( id )
{
    var start = 0;
    var end = 0;
    var s = Math.round( fadeSpeed / 25 );   // fade in 25ms increments
    var timer = 0;
    var i;

    state[id] = false;

    for( i = s; i >= 0 ; i-- ) {
        setTimeout( "setOpacity('" + id + "'," + ( i / s ) + ")", timer++ * fadeSpeed / s )
    }
}

Thanks for any response.

Hey all, I am very new to javascript. I have been using this stacks menu I am sure you may have seen elsewhe

http://net.tutsplus.com/tutorials/ja...ck-navigation/

I have modified it a bit though as I will want to use my own graphics and change a little bit how it works. I managed to make it so that the images become transparent when the stack is put back in place and then non transparent when they come back out.

The problem I have is that I need the images to be transparent initially when they are in the stack.

You can see the problem he http://bit.ly/cdelJu

Here is the javascript for this:

Code:

$(function () { 
	// Stack initialize
	var openspeed = 300;
	var closespeed = 300;
	$('.stack2>img').toggle(function(){
		var vertical = 0;
		var horizontal = 90;
		var $el=$(this);
		$el.next().children().each(function(){
			$(this).animate({top: vertical + 'px', left: horizontal + 'px', opacity: '10'}, openspeed);
			vertical = vertical + 40;
			horizontal = (horizontal+.75)*1.15;
		});
		$el.next().animate({top: '40px', left: '10px'}, openspeed).addClass('openStack')
		   .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
		$el.animate({paddingBottom: '0'});
	}, function(){
		//reverse above
		var $el=$(this);
		$el.next().removeClass('openStack').children('li').animate({top: '-33px', left: '-10px', opacity: '0'}, closespeed);
		$el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
		$el.animate({paddingBottom: '35px'});
	});
	
	// Stacks additional animation
	$('.stack2 li a').hover(function(){
		$("img",this).animate({width: '56px'}, 100);
		$("span",this).animate({marginRight: '30px'});
	},function(){
		$("img",this).animate({width: '50px'}, 100);
		$("span",this).animate({marginRight: '0'});
	});
});

and here is the css:

Code:

/* ================ STACK #2 ================ */
.stack2 { position: fixed; top: 28px; left: 90px;}
.stack2 > img { position: relative; cursor: pointer; padding-bottom: 35px; z-index: 2; }
.stack2 ul { list-style: none; position: absolute; top: 7px; cursor: pointer; z-index: 1; }
.stack2 ul li { position: absolute;  }
.stack2 ul li img { border: 0;  }
.stack2 ul li span { display: none; }
.stack2 .openStack li span { 
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	display:block;
	height: 14px;
	position:absolute;
	top: 17px;
	right:60px;
	line-height: 14px;
	border: 0;
	background-color:#000;
	padding: 3px 10px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: #fcfcfc;
	text-align: center;
	text-shadow: #000 1px 1px 1px;
	opacity: .85;
	filter: alpha(opacity = 85);
}

#dock { top: 0; left: 100px; }
a.dock-item { position: relative; float: left; margin-right: 10px; }
.dock-item span { display: block; }
.stack { top: 0; }
.stack ul li { position: relative; }

/* IE Fixes */
.stack2 { _position: absolute; }
.stack2 ul { _z-index:-1; _top:-15px; }
.stack2 ul li { *right:5px; }

annd the html:

Code:

<div class="stack2">
		<img src="images/stacks/stack-down.png" alt="stack"/>
		<ul id="stack2">
	    <li><a href=""><span>Aperture</span><img src="images/stacks/aperture.png" alt="Aperature" /></a></li>
			<li><a href="#"><span>All&nbsp;Examples</span><img src="images/stacks/photoshop.png" alt="Photoshop" /></a></li>
			<li><a href="example3.html"><span>Example&nbsp;3</span><img src="images/stacks/safari.png" alt="Safari" /></a></li>
			<li><a href="example2.html"><span>Example&nbsp;2</span><img src="images/stacks/coda.png" alt="Coda" /></a></li>
			<li><a href="index.html"><span>Example&nbsp;1</span><img src="images/stacks/finder.png" alt="Finder" /></a></li>			
		</ul>
</div>

Any help is greatly appreciated!

Ok so I have two images class1 & class2 which both have opacity:0.3; and filter:alpha(opacity=30); added with css. I am trying to get it so when I click on class1 it will either fade in (ideally) or display as 100% opacity. I do not want both class's to be able to be 100% so if one is clicked the other would be 30%.

I also have multiple instances of class1 and class2.

If anyone can help me I will praise you on the highest mountain!

Thanks,

B

Hello!

I'm just starting to learn JavaScript, so don't take me too serious. I would like to set opacity of some element to 0 through JavaScript, using GetElementById function. This is my short code inside body of HTML:

Code:

<script>
document.getElementById("element").style.opacity="0";
</script>

<div id="element">
noopacity
</div>

It doesn't seem to work, what am I doing wrong?

Thanks.

Hi there.

I just started out learning javascript and jQuery.. and here's one of those bump that Im unable to pass through..

So here's the problem.. I tried writing a simple modal effect on the site I was working on.. since I'm fairly new to javascript and jQuery so please bear with me

The problem that I am having is that the opacity of the #dialog (the white part in the middle ) is being inherited from the #mask.. the black part that covers the page..

I tried setting the opacity to #dialog{opacity:1;} but to no avail it's not working.. I'm trying to change the opacity cause the opacity is affecting the readability of the content..

Here's the simple code that I wrote.. can you please check them up?

Its been only two days since I started reading about Javascript and jQuery so please have some mercy

you can check up the page here..

http://dev.crownshipping.com.ph/single_update.html
just click on the boats.. and the modal thingy will pop up.. hope someone can help and enlighten me.. I'mma fast learner.. if you can give resource links.. except w3schools.. I already read the whole thing

Thanks

Andrew

here's the html code..

Code:

<div id="mask">
    	<div id="dialog" class="window">
        <!-- close button is defined as close class -->
        <a href="#" class="close">Close X</a>
        <h1>Vessel Name - KiKi C</h1>
        <img src="images/single_update.jpg" alt="xxx"/>
        
        </div><!--dialog-->
    </div><!--mask-->

here's the javascript code..
Code:

<script src="js/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
$(document).ready(function(){
	 //select all the a tag with name equal to modal
    $("a.modal").click(function(e) {
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var id = $(this).attr('href');
     
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(document).width();
     
        //Set height and width to mask to fill up the whole screen
    
          $('#mask').css({'width':maskWidth,'height':maskHeight});
        //transition effect    
        $('#mask').fadeIn(1000);   
        $('#mask').fadeTo("slow",.8); 
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $('#dialog').css('top',  winH/2-$(id).height()/2);
        $('#dialog').css('left', winW/2-$(id).width()/2);
     	
        //transition effect
        $('#dialog').fadeIn(2000);
		$('#dialog').fadeTo("slow",1);
     
    });
     
    //if close button is clicked
    $('.close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').fadeOut(1000);
    });  
	
});
 </script>

Hi Guys,

Been stuck on this for too long now. I'm trying to write a function that rotates images with a fade.

The function work properly, however I can't make the images fade back in.

The fadein function won't add to the .style.opacity

Here's the code with the php

Code:

function fadeout()
        {
            b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity - 0.01);
            if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 0.1)
            {
                clearInterval(fadeouttimer);
                b<?php echo ($AF_list_artist_id->artist_id); ?>.src = a<?php echo ($AF_list_artist_id->artist_id); ?>[starter<?php echo ($AF_list_artist_id->artist_id); ?>];
                
                function fadein()
                {
                    
                    b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity = (b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity + 0.01);
                    //alert(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity);
                
                
                    if(b<?php echo ($AF_list_artist_id->artist_id); ?>.style.opacity == 1)
                    {
                        clearInterval(fadeintimer);
                        setTimeout("rotate<?php echo ($AF_list_artist_id->artist_id); ?>("+(starter<?php echo ($AF_list_artist_id->artist_id); ?>+1)+")",6000);
                    }
                
                }
                
                var fadeintimer = setInterval(fadein,10);
            }
        }
        var fadeouttimer = setInterval(fadeout,10);

and without

Code:

function fadeout()
{
b7.style.opacity = (b7.style.opacity - 0.01);
if(b7.style.opacity == 0.1)
{
clearInterval(fadeouttimer);
b7.src = a7[starter7];

function fadein()
{

b7.style.opacity = (b7.style.opacity + 0.01);
//alert(b7.style.opacity);


if(b7.style.opacity == 1)
{
clearInterval(fadeintimer);
setTimeout("rotate7("+(starter7+1)+")",6000);
}

}

var fadeintimer = setInterval(fadein,10);
}
}
var fadeouttimer = setInterval(fadeout,10);

on my site he http://www.jbiddulph.com/niche/ I would like to apply an opacity on my navigation roll over, can someone help me here?!

here is the code for my Home link:

Code:

$('#nav ul li.home').hover(
		    function() {
		        $(this).stop().animate({backgroundColor:'#ff8300'}, 1300);
		        }, function () {
		        $(this).stop().animate({backgroundColor:'#666666'}, 100);
		    });