[babysitter]

Hi,there.I just want to know,is it possible to load a div but the content loaded is based on what event triggered?

For example,when I mouseover a <tr>,it loads details of product inside a <div>.But when I click a 'View Image' link (which is placed inside the same <tr>),it will load the image inside the same <div>.

I was thinking to use if..else statement.But I don't know how to do it.

Guys,any ideas?

TIA

[Dormilich]

there is no need for an if … else. you have two different events, which have a handler function each, so the mouseover handler will trigger the text content and the click handler will trigger the image content. however, your have to cancel the mouseover event after the click, otherwise the image will be replaced by text on the next mouse movement. (and of course you have to re-enable the mouseover event again at some point)

This post has been edited by Dormilich: 06 August 2010 - 02:33 AM

[babysitter]

Dormilich, on 06 August 2010 - 01:32 AM, said:

there is no need for an if … else. you have two different events, which have a handler function each, so the mouseover handler will trigger the text content and the click handler will trigger the image content. however, your have to cancel the mouseover event after the click, otherwise the image will be replaced by text on the next mouse movement. (and of course you have to re-enable the mouseover event again at some point)

Ok..so,how should I do it?Can you give me an example on how to cancel the mouseover after the click event?

[Dormilich]

babysitter, on 06 August 2010 - 09:39 AM, said:

Can you give me an example on how to cancel the mouseover after the click event?

that can reach different levels of complexity …

DOM 0 (IE compatible)

function setText()
{
	//# set text in div
}
function setImage()
{
	//# set image in div
}
function cancelMouse(evt)
{
	evt = evt || window.event; // IE fix
	evt.stopPropagation();     // W3C
	evt.cancelBubble = true;   // IE
}
td.onmouseover = setText;
a.onclick      = setImage;
a.onmouseover  = cancelMouse;

drawback: the image will be replaced by the text, when you move away from the link. (but currently I have no idea how to fix that sensibly).

I probably could create some code, that uses global variables though …

This post has been edited by Dormilich: 06 August 2010 - 03:28 AM