PDA

View Full Version : expando script with <map> tagged image



ninib
07-09-2009, 01:43 PM
1) Script Title:
Expando Image script
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/expandoimage.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
01-28-2010, 12:22 AM
could anyone help me? that's my problem.

Thanks.

sorry, but i can't speak english well.

555nase
01-30-2010, 01:16 PM
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
02-18-2010, 12:50 PM
Can anyone help?

jscheuer1
02-18-2010, 06:57 PM
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
03-15-2010, 01:25 PM
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
03-15-2010, 06:09 PM
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
03-28-2010, 09:00 AM
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
03-28-2010, 01:52 PM
There is no map on that page.

555nase
03-28-2010, 09:39 PM
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

555nase
03-29-2010, 12:45 PM
Hi John,

I changed/added "resizeExpando" to the image-tag. Now it work in FF3.6.

Thanks

PS: It's a realy nice effect.