expando script with <map> tagged image

[ninib]

1) Script Title:
Expando Image script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...pandoimage.htm
3) Describe problem:


Hello Folks..
I'm trying to use the expando script (really nice thing!!!) with a map.
when i hover the image it expands --> ok
when i hover a link area in the image the image expands back --> not good!

my question: how can i keep the image expand until i click a link?

thanks a lot...
ninib

[555nase]

could anyone help me? that's my problem.

Thanks.

sorry, but i can't speak english well.

[555nase]

Did you solve the problem?

1) Script Title:
Expando Image script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...pandoimage.htm
3) Describe problem:


Hello Folks..
I'm trying to use the expando script (really nice thing!!!) with a map.
when i hover the image it expands --> ok
when i hover a link area in the image the image expands back --> not good!

my question: how can i keep the image expand until i click a link?

thanks a lot...
ninib

regards

[555nase]

Can anyone help?

[jscheuer1]

Use this version of the script:

/* Expando Image Script ©2008-2010 John Davenport Scheuer
   as first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This Notice Must Remain for Legal Use
   Updated: 02/18/2010 for image maps and link behavior
   */

if(document.images && document.getElementById){
	(function(){
		var targ, addAttach, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20, widthHeight = function(dim, cos){
				return dim[0] * cos + dim[1] + 'px';
			};
		function exC(im){
			if(exC.die){
				return;
			}
			im = im || window.event;
			var type;
			if(im.type){
					type = im.type;
			}
			if(!exC.r.test(im.className)){
				im = im.target || im.srcElement || null;
			}
			var d = document.images, i = d.length - 1;
			if(im.tagName && im.tagName.toLowerCase() === 'area'){
				for(i; i > -1; --i){
					if(d[i].getAttribute('usemap').replace(exC.iMap, '') === im.parentNode.name){
						im = d[i];
						break;
					}
				}
			}
			if(!im || !exC.r.test(im.className)){
				return;
			}
			var resize = function(){
				if(!exC.ims[i]) {return;}
				var cos = (1 - Math.cos((exC.ims[i].jump / times) * Math.PI)) / 2;
				im.style.width = widthHeight(exC.ims[i].w, cos);
				im.style.height = widthHeight(exC.ims[i].h, cos);
				if(exC.ims[i].d && times > exC.ims[i].jump){
					++exC.ims[i].jump;
					exC.ims[i].timer = setTimeout(resize, speed);
				}else if(!exC.ims[i].d && exC.ims[i].jump > 0){
					--exC.ims[i].jump;
					exC.ims[i].timer = setTimeout(resize, speed);
				}
			};
			for(i; i > -1; --i)
				if(d[i] === im) {break;}
			i = i + im.src;
			if(!exC.ims[i] && im && type === 'mouseover'){
				exC.ims[i] = {im: new Image(), jump: 0};
				exC.ims[i].im.onload = function(){
					im.title = im.alt = '';
					exC.ims[i].w = [exC.ims[i].im.width - im.width, im.width];
					exC.ims[i].h = [exC.ims[i].im.height - im.height, im.height];
					exC(im);
				};
				exC.ims[i].im.src = im.src;
				return;
				}
			if(exC.ims[i] && exC.ims[i].timer) {clearTimeout(exC.ims[i].timer);}
			if(exC.ims[i]){
				exC.ims[i].d = !exC.ims[i].d;
				resize();
			}
		}
		
		targ = (function(){
			return typeof event !== 'undefined'? function(){return event.srcElement || null;} :
			function(e){return e.target || null;};
		})();

		function imClick(e){
			var t = targ(e), ta = t.parentNode, d, i;
			if(t && exC.reset.test(t.className) || ta && exC.reset.test(ta.className)){
				if(exC.resize.test(t.className) || ta && exC.resize.test(ta.className)){
					exC.die = true;
					d = document.images, i = d.length - 1;
						for(i; i > -1; --i){
							if(d[i] && exC.r.test(d[i].className)){
							d[i].style.width = d[i].style.height = '';
						}
					}
				}
				setTimeout(function(){exC.die = false;}, 500);
				exC.ims = {};
			}
		}

		exC.ims = {};

		exC.r = /\bexpando\b/;
		exC.reset = /\b(resetExpando)|(resizeExpando)\b/;
		exC.resize = /\bresizeExpando\b/;
		exC.iMap = /^#/;

		addAttach = (function(){return window.addEventListener? function(el, ev, f){
				el.addEventListener(ev, f, false);
			}:window.attachEvent? function(el, ev, f){
				el.attachEvent('on' + ev, f);
			}:function(){return;};
		})();
		addAttach(document, 'mouseover', exC);
		addAttach(document, 'mouseout', exC);
		addAttach(document, 'click', imClick);
	})();
}

[555nase]

Thank you John,

but it dosen't work in FF3.6. In IE6.0 it work. I will check my site, because in FF & IE, the pictures will be differently sorted.
If I use the right-mousebutton and click to oben a new tab, expando also worked in FF.

[jscheuer1]

Works here in Firefox 3.6. However, there is an additional class you may want to add to your area tags and to the image tag, 'resizeExpando', examples:

<img class="expando resizeExpando" usemap="#1" src="sponsors_09_o.png" width="313" height="371" alt="Spon . . .

<AREA class="resizeExpando" SHAPE = "RECT" COORDS = " 13, . . .

That way, when the user clicks on the area link tag, the map should reset to it's original size, so that hittng the back button will arrive back at the page with the image map in its contracted state, ready to again be expanded. In Firefox, without this, it sometimes remembers the image as expanded and can no longer contract it.

But what you're talking about might be something different, something not duplicated in my local mock up. Sounds like a positioning and/or z-index issue, with perhaps something unseen coming between the mouse cursor and the area link. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

[555nase]

Thanks for reply.
Sorry, but my english! I don't understand the content.
Where do I have to insert or change this code?

That's the side, which I work on.

http://tinyurl.com/yf9tgot

[jscheuer1]

There is no map on that page.

[555nase]

Sorry, I don't use a map. I want to use expando with the gallery on this site. It would be nice if expando would work on this gallery.
Thanks for your help