Highlight Multiple Images with Mouseover of One

[DigitalFlux]

Script: Gradual Highlight Image Script
http://www.dynamicdrive.com/dynamici...hlightgrad.htm

I was wondering how you can set the mouseover for this highlight script to highlight multiple images when one of the images is moused-over? The reason is that my menu is a row of tabs, and each tab has 3 parts: the rounded left corner, the middle, and the rounded right corner. I'd like it so no matter which of the 3 images the mouse is over, all 3 are highlighted together. But I'm new to DHTML, so I'm not sure where to begin to accomplish this.

Any help would be GREATLY appreciated! Thanks!

[djr33]

I'm not sure how this is possible, but I'm sure it is.

The easiest way would be to name all the images the same thing, but I think that with this script, that won't work because a generic addition to each image tag is added.. so they are already functioning indepedantly related to name.

The script is also not too long... so shouldn't be too hard to rework it even if a lot of it needs to be done.

So... I don't know enough, but someone else probably will

[jscheuer1]

To handle more than one image at a time, the script should be object oriented. This one is not. Twey made up a script that actually does this and is even more flexible than is required here. Unfortunately, its use is a bit cryptic but, I have sussed it out for this purpose. Here is Twey's script:

/*
	FadableObject: A flexible, powerful, object-oriented way
	to fade HTML elements in and out, cross-browser.
	Written by Twey.
	Use, copying, and modification allowed, so long as credit
	remains intact.

	Notes:
		In order to function in IE, the objects the effects are
		applied to need to have a defined width and background
		colour, except for images.  To this purpose, the script
		will define a background colour of "white" and a width of
		"100%" in IE to all elements to which it is applied, except
		images.  This behaviour will not occur if you apply your
		own background colour and width to the elements.

	Functions defined:
		FadableObject(HTMLElement element, int stepAmount, int speed, int minOpacity, int maxOpacity, bool startMin, bool pulsingTakesPrecedence):
			Construct a new FadableObject around the given HTML element.
			startMin defines how it should start: faded in (false) or faded out (true).
			pulsingTakesPrecedence specifies whether, if shown/hidden whilst pulsing,
			to ignore the requested operation.
			Also creates element.fadeThread, a reference to the FadableObject
			constructed around element.

		float FadableObject.getOpacity():
			Get current opacity.  Returns in int form (from 0 to 100).

		float FadableObject.setOpacity(float val):
			Set opacity.  Note that val is in IE opacity (0-to-100)
			format; it is converted for use with others later.
			Returns the new value.

		bool FadableObject.fadeIn():
			Fade from current to maximum opacity.

		bool FadableObject.fadeOut():
			Fade from current to minimum opacity.

		bool FadableObject.toggleFade():
			Toggle faded state.  Returns true if fading in, false if fading out.

		bool FadableObject.startPulsing():
			Start fading back and forth.  Returns true on success, false on failure.

		bool FadableObject.stopPulsing():
			Stop pulsing.  Returns true on success, false on failure.

		bool FadableObject.togglePulsing():
			Toggle pulsing.  Returns true if pulsing started, false if pulsing stopped
			(or couldn't be started).

		static FadeObject.getFadableObjectByElement(HTMLElement el):
			Get a fadable object by its HTML element.

		static FadableObject.init():
			Set up the FadableObject constructor function.  Used internally.

	Important static variables:
		FadeObject.fadeThreads:
			An array of all the fadable objects.

				********************
				***** WARNING: *****
				********************
				IF THE OBJECTS AREN'T ALL IN HERE, OR AREN'T IN THE CORRECT
				POSITIONS ACCORDING TO THEIR IDs, THE SCRIPT WILL NOT WORK.
*/

	FadableObject = function(element, stepAmount, speed, minOpacity, maxOpacity, startMin, pulsingTakesPrecedence) {
		if(!this.inited) FadableObject.init();
		this.pulsingTakesPrecedence = pulsingTakesPrecedence;
		this.pulsing = false;
		this.step = stepAmount;
		this.id = FadableObject.currentId++;
		this.thread = null;
		this.element = element;
		this.speed = speed;
		this.defaultOn = !startMin;
		this.minOpacity = minOpacity < 0 ? 0 : minOpacity;
		this.maxOpacity = maxOpacity >= 100 ? 99 : maxOpacity;
		this.pulsingUp = false;
		this.pulsingDown = false;
		this.faded = this.defaultOn;

		if(typeof this.element.filters != "undefined") {
			if(typeof this.element.filters['DXImageTransform.Microsoft.Alpha'] == "undefined") this.element.style.filter = "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
			if(this.element.tagName.toLowerCase() != "img") {
				if(this.element.style.backgroundColor == "") this.element.style.backgroundColor = "white";
				if(this.element.style.width == "") this.element.style.width = "100%";
			}
		}

		if(startMin) this.setOpacity(this.minOpacity);
		else this.setOpacity(this.maxOpacity);

		FadableObject.fadeThreads.push(this);
		this.element.fadeThread = this;
	}
	FadableObject.inited = false;
	FadableObject.currentId = 0;
	FadableObject.fadeThreads = new Array();
	FadableObject.getFadableObjectByElement = function(el) {
		for(var ij = 0; ij < FadableObject.fadeThreads.length; ij++) if(el == FadableObject.fadeThreads[ij].element) return FadableObject.fadeThreads[ij];
		return null;
	}
	FadableObject.opacityProperty = "";
	FadableObject.filterName = "DXImageTransform.Microsoft.Alpha";

FadableObject.init = function() {
	FadableObject.inited = true;
	FadableObject.prototype.getOpacity = (function() { // Only perform the browser check once, and generate optimized code.
		var noOpacity = function() { return -1; }
		var useFilter = function() {
			if(isNaN(parseInt(this.element.filters[FadableObject.filterName].opacity))) this.element.filters[FadableObject.filterName].opacity = 100;
			return parseInt(this.element.filters[FadableObject.filterName].opacity);
		}
		var useStyle = function() {
			if(isNaN(parseFloat(this.element.style[FadableObject.opacityProperty]))) this.element.style[FadableObject.opacityProperty] = 1.0;
			return parseInt(parseFloat(this.element.style[FadableObject.opacityProperty]) * 100);
		}

		if(typeof window.document.body.style.opacity != "undefined") {
			FadableObject.opacityProperty = "opacity";
			return useStyle;
		} else if(typeof window.document.body.style.MozOpacity != "undefined") {
			FadableObject.opacityProperty = "MozOpacity";
			return useStyle;
		} else if(typeof window.document.body.style.KhtmlOpacity != "undefined") {
			FadableObject.opacityProperty = "KhtmlOpacity";
			return useStyle;
		} else if(typeof window.document.body.filters != "undefined") {
			return useFilter;
		} else return noOpacity;
	})();
	FadableObject.prototype.setOpacity = (function() { // Well, maybe twice.
		var noOpacity = function(val) { return -1; }
		var useFilter = function(val) {
			return parseInt(this.element.filters[FadableObject.filterName].opacity = parseInt(val));
		}
		var useStyle = function(val) {
			return parseInt(parseFloat(this.element.style[FadableObject.opacityProperty] = (parseInt(val) / 100)) * 100);
		}

		if(typeof window.document.body.style.opacity != "undefined") {
		FadableObject.opacityProperty = "opacity";
			return useStyle;
		} else if(typeof window.document.body.style.MozOpacity != "undefined") {
			FadableObject.opacityProperty = "MozOpacity";
			return useStyle;
		} else if(typeof window.document.body.style.KhtmlOpacity != "undefined") {
			FadableObject.opacityProperty = "KhtmlOpacity";
			return useStyle;
		} else if(typeof window.document.body.filters != "undefined") {
			return useFilter;
		} else return noOpacity;
	})();
	FadableObject.prototype.fadeIn = function() {
		this.faded = false;
		var lastOpacity;
		if((lastOpacity = this.getOpacity()) == -1) return false;
		if(this.pulsing && !arguments[0])
			if(this.pulsingTakesPrecedence) return false;
			else this.stopPulsing();
		if(this.getOpacity() >= this.maxOpacity) {
			if(this.pulsing) {
				this.pulsingUp = false;
				this.pulsingDown = true;
				this.fadeOut(true);
			}
			return false;
		}
		this.setOpacity((this.getOpacity() + this.step > 100) ? 99 : this.getOpacity() + this.step);
		if(lastOpacity == this.getOpacity()) // We ain't goin' anywhere.  Assume stuck because of floating-point inaccuracies.
						     // Bit of a hack, but apparently necessary.
			this.setOpacity(this.getOpacity() + this.step + 1);
		clearTimeout(this.thread);
		this.thread = setTimeout("FadableObject.fadeThreads[" + this.id + "].fadeIn(" + (this.pulsing ? "true" : "") + ")", this.speed);
		return true;
	};
	FadableObject.prototype.fadeOut = function() {
		this.faded = true;
		var lastOpacity;
		if((lastOpacity = this.getOpacity()) == -1) return false;
		if(this.pulsing && !arguments[0])
			if(this.pulsingTakesPrecedence) return false;
			else this.stopPulsing();
		if(this.getOpacity() <= this.minOpacity) {
			if(this.pulsing) {
				this.pulsingDown = false;
				this.pulsingUp = true;
				this.fadeIn(true);
			}
			return false;
		}
		this.setOpacity((this.getOpacity() - this.step < 0) ? 0 : this.getOpacity() - this.step);
		if(lastOpacity == this.getOpacity()) // We ain't goin' anywhere.  Assume stuck because of floating-point inaccuracies.
						     // Bit of a hack, but apparently necessary.
			this.setOpacity(this.getOpacity() - this.step - 1);
		clearTimeout(this.thread);
		this.thread = setTimeout("FadableObject.fadeThreads[" + this.id + "].fadeOut(" + (this.pulsing ? "true" : "") + ")", this.speed);
		return true;
	};
	FadableObject.prototype.toggleFade = function() {
		this.faded ? this.fadeIn() : this.fadeOut();
		this.faded = !this.faded;
		return !this.faded;
	};
	FadableObject.prototype.startPulsing = function() {
		if(this.pulsing) return false;
		this.pulsing = true;
		if(this.getOpacity() <= this.minOpacity) {
			this.pulsingUp = true;
			this.fadeIn(true);
		} else {
			this.pulsingDown = true;
			this.fadeOut(true);
		}
		return true;
	};
	FadableObject.prototype.stopPulsing = function() {
		if(!this.pulsing) return false;
		this.pulsing = false;
		this.pulsingUp = false;
		this.pulsingDown = false;
		if(this.defaultOn) this.fadeIn(true);
		else this.fadeOut(true);
		return true;
	};
	FadableObject.prototype.togglePulsing = function() {
		if(this.pulsing) {
			this.stopPulsing();
			return false;
		} else {
			if(!this.startPulsing()) return false;
			return true;
		}
	};
}

Copy it and in a text editor, paste it in and save it as:

FadableObject.js

Next, see my next post.

[jscheuer1]

Here is a demo page which uses the script from my last post:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Fade in Three Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="FadableObject.js"></script>
</head>
<body>
<img name="image1" src="photo1.jpg" alt="original image" title=""><br>
<img name="image2" src="photo2.jpg" alt="original image" title=""><br>
<img name="image3" src="photo3.jpg" alt="original image" title="">
<script type="text/javascript">
var imgs=[document.images['image1'], document.images['image2'], document.images['image3']]
onload = function() {
for (var i_tem = 0; i_tem < imgs.length; i_tem++){
// Usage: new FadableObject(imageObject, step, speed, minOpacity, maxOpacity, startFaded?, ignore_Show/Hide_ifPulsing?)
new FadableObject(imgs[i_tem], 2, 10, 30, 99, true, false);
imgs[i_tem].onmouseover=function(){imgs[0].fadeThread.fadeIn();imgs[1].fadeThread.fadeIn();imgs[2].fadeThread.fadeIn();}
imgs[i_tem].onmouseout=function(){imgs[0].fadeThread.fadeOut();imgs[1].fadeThread.fadeOut();imgs[2].fadeThread.fadeOut();}
}
}
</script>
</body>
</html>

I will put up a demo, see next post.

[jscheuer1]

Here is the demo.

[djr33]

Yeah... that's what I meant to say... object oriented. right.

[DigitalFlux]

Thanks jscheuer1 and djr33! I'm pretty good at deciphering code and whatnot, so this will really help me!! thank u very much!!

[DigitalFlux]

I've been playing with this for about an hour and can't seem to figure it out. So I figure I'd see if you have any input. For whatever reason, the original script that I was using, allowed fading of the image that was used as the background image for the table cell (<td>), and this one doesn't seem to. Is there a quick fix for this? Thanks!

[jscheuer1]

How did it allow that? By fading the entire cell? That's the only way I can see. If so, this script should be able to be applied to a cell.

[jscheuer1]

Anyways, same external script, this demo works on cells:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Fade in Three Images</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#cell1 {
background-image:url('thumb2/photo1.jpg');
}
#cell2 {
background-image:url('thumb2/photo2.jpg');
}
#cell3 {
background-image:url('thumb2/photo3.jpg');
}
</style>
<script type="text/javascript" src="FadableObject.js"></script>
</head>
<body>
<table>
<tr>
<td id="cell1">1</td>
</tr><tr>
         <td id="cell2">2</td>
     </tr><tr>
              <td id="cell3">3</td>
          </tr>     
</table>
<script type="text/javascript">
var fobjs=[document.getElementById('cell1'), document.getElementById('cell2'), document.getElementById('cell3')]
onload = function() {
for (var i_tem = 0; i_tem < fobjs.length; i_tem++){
// Usage: new FadableObject(imageObject, step, speed, minOpacity, maxOpacity, startFaded?, ignore_Show/Hide_ifPulsing?)
new FadableObject(fobjs[i_tem], 2, 10, 30, 99, true, false);
fobjs[i_tem].onmouseover=function(){fobjs[0].fadeThread.fadeIn();fobjs[1].fadeThread.fadeIn();fobjs[2].fadeThread.fadeIn();}
fobjs[i_tem].onmouseout=function(){fobjs[0].fadeThread.fadeOut();fobjs[1].fadeThread.fadeOut();fobjs[2].fadeThread.fadeOut();}
}
}
</script>
</body>
</html>