[Steven Gardner]

I need to change the effect on this page.

At the moment the images are 60% or 0.6 of total opacity then when you hover the increase to 100%. I want to have the images at 100%, then when you hover over one of the three images, the other two will reduce to 60%.

Please can someone with a bit of javascript knowledge help. I am reading up using Sitepoints simply javascript book i bought but its taking an age. this is the javascript file below.

//Gradual Elements Fader- By Dynamic Drive at http://www.dynamicdrive.com
//Last updated: Nov 8th, 07'

var gradualFader={}

gradualFader.baseopacity=0.6 //set base opacity when mouse isn't over element (decimal below 1)
gradualFader.increment=0.1 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

document.write('<style type="text/css">\n') //write out CSS to enable opacity on "gradualfader" class
document.write('.gradualfader{filter:progid:DXImageTransform.Microsoft.alpha(opacity='+gradualFader.baseopacity*100+'); -moz-opacity:'+gradualFader.baseopacity+'; opacity:'+gradualFader.baseopacity+';}\n')
document.write('</style>')

gradualFader.setopacity=function(obj, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
	var targetobject=obj
	if (targetobject && targetobject.filters && targetobject.filters[0]){ //IE syntax
		if (typeof targetobject.filters[0].opacity=="number") //IE6
			targetobject.filters[0].opacity=value*100
		else //IE 5.5
			targetobject.style.filter="alpha(opacity="+value*100+")"
		}
	else if (targetobject && typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
		targetobject.style.MozOpacity=value
	else if (targetobject && typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
		targetobject.style.opacity=value
	targetobject.currentopacity=value
}

gradualFader.fadeupdown=function(obj, direction){
	var targetobject=obj
	var fadeamount=(direction=="fadeup")? this.increment : -this.increment
	if (targetobject && (direction=="fadeup" && targetobject.currentopacity<1 || direction=="fadedown" && targetobject.currentopacity>this.baseopacity)){
		this.setopacity(obj, targetobject.currentopacity+fadeamount)
		window["opacityfader"+obj._fadeorder]=setTimeout(function(){gradualFader.fadeupdown(obj, direction)}, 50)
	}
}

gradualFader.clearTimer=function(obj){
if (typeof window["opacityfader"+obj._fadeorder]!="undefined")
	clearTimeout(window["opacityfader"+obj._fadeorder])
}

gradualFader.isContained=function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
}

gradualFader.fadeinterface=function(obj, e, direction){
	if (!this.isContained(obj, e)){
		gradualFader.clearTimer(obj)
		gradualFader.fadeupdown(obj, direction)
	}
}

gradualFader.collectElementbyClass=function(classname){ //Returns an array containing DIVs with specified classname
	var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
	var pieces=[]
	var alltags=document.all? document.all : document.getElementsByTagName("*")
	for (var i=0; i<alltags.length; i++){
		if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1)
			pieces[pieces.length]=alltags[i]
	}
	return pieces
}

gradualFader.init=function(){
	var targetobjects=this.collectElementbyClass("gradualfader")
	for (var i=0; i<targetobjects.length; i++){
		targetobjects[i]._fadeorder=i
		this.setopacity(targetobjects[i], this.baseopacity)
		targetobjects[i].onmouseover=function(e){gradualFader.fadeinterface(this, e, "fadeup")}
		targetobjects[i].onmouseout=function(e){gradualFader.fadeinterface(this, e, "fadedown")}
	}
}

[Catalyst]

You could cut this down to a few lines using jQuery.

That said the easy way to modify your script will make it a little less flexible. Right now your .init function is attaching events to all the items with class="gradualfader". What you'll want to do is replace that with some hand coded attachments (hence the lack of flexibility).

I'll give you some pseudo code and you can give implementing it a shot. Write back if you have any trouble.

Alternately you could rewrite some of the functions, which is going to take a bit more time and work but then you'd be able to drop
the script into any page and have it work. I can help with that if you like.

Easier way... First, add an id to each of the image, like Photo1, Photo2, Photo3

Then replace the .init function contents with:

document.getElementByID("Photo1").onmouseover
=function(e){gradualFader.fadeinterface(document.getElementByID("Photo2"), e, "fadedown");gradualFader.fadeinterface(document.getElementByID("Photo3")., e, "fadedown");}
document.getElementByID("Photo1").onmouseout
=function(e){gradualFader.fadeinterface(document.getElementByID("Photo2"), e, "fadeup");gradualFader.fadeinterface(document.getElementByID("Photo3")., e, "fadeup");}

and then the same for the other 2, swapping around out what gets faded in and out

[Steven Gardner]

Can you please show me how to create the effect i am after using the JQuery library. I have used it a couple of times and learning slowly. I would much rather cut down the javascript size so jquery would be the better solution. I also like how its more like xhtml and CSS than javascript to code.

This post has been edited by Steven Gardner: 11 June 2008 - 03:47 AM

[Catalyst]

Here you go

$(document).ready(
	function() {
	$("#Photo1").mouseover(function() {$("#Photo2,#Photo3").stop().fadeTo(500, 0.6);});
	$("#Photo1").mouseout(function() {$("#Photo2,#Photo3").stop().fadeTo(500, 1.0);});
	$("#Photo2").mouseover(function() {$("#Photo1,#Photo3").stop().fadeTo(500, 0.6);});
	$("#Photo2").mouseout(function() {$("#Photo1,#Photo3").stop().fadeTo(500, 1.0);});
	$("#Photo3").mouseover(function() {$("#Photo2,#Photo1").stop().fadeTo(500, 0.6);});
	$("#Photo3").mouseout(function() {$("#Photo2,#Photo1").stop().fadeTo(500, 1.0);});
	}
);

[Steven Gardner]

Catalyst, on Jun 11 2008, 09:21 PM, said:

Here you go

$(document).ready(
	function() {
	$("#Photo1").mouseover(function() {$("#Photo2,#Photo3").stop().fadeTo(500, 0.6);});
	$("#Photo1").mouseout(function() {$("#Photo2,#Photo3").stop().fadeTo(500, 1.0);});
	$("#Photo2").mouseover(function() {$("#Photo1,#Photo3").stop().fadeTo(500, 0.6);});
	$("#Photo2").mouseout(function() {$("#Photo1,#Photo3").stop().fadeTo(500, 1.0);});
	$("#Photo3").mouseover(function() {$("#Photo2,#Photo1").stop().fadeTo(500, 0.6);});
	$("#Photo3").mouseout(function() {$("#Photo2,#Photo1").stop().fadeTo(500, 1.0);});
	}
);

Thanks Catalyst. I spent a few hours last night learning the fundamentals of Jquery using the CSS-tricks screencasts. I can strongly recommend them for begginners in Jquery and other web related stuff. I reckon i would of came up with something similar pretty soon after watching those screencasts.


Cheers again cat.

[Steven Gardner]

Cheers