13 replies to this topic

[Orjan]

Hello everyone. I would like to have some help.

I am doing a map and on each item, you can do a mouseover and get a popup with info of the object.

at the moment I got one of those from a scriptsite, which I tried, and it worked fine.. in IE, but in FF, it adds on to the very left upper corner of the page, and not at picture i sat the mouseover-tag on

anyone have any advice or links for me?

[chili5]

Hi,

Can you post your image map code, I think I know how to do the javascript but I'm not so good with the image maps.

[Orjan]

it's not an image map.

its a simple map displaying several pictures in a table (as of a coordinate system)

btw, I've tried the "title" atribute to tags, FF did make it with multiline titles, IE didn't (they showed the \n right on)
and i've tried the alt-tag on images which works very fine on IE but FF doesn't popup and show the alt-text on pictures.

two working scenarios. but noone is working in all environments
sure, i could make a browser check in the environment var in php, but
I'd rather not, as then I would need to list all possible user agents.

[chili5]

oops sorry, I assumed by map you meant image map and wanted to display a popup window when the user moused over certain sections of the image.

sorry

[TcM]

Sorry, I really can't understand your question.

Mind explaining again please?

[chili5]

I didn't understand it either, I thought it was talking about image maps.

What it sounds like he wants, that when you move your mouse over an object, he wants a popup that has info on the object that you are hovering over.

If that's the case couldn't he display a popup window using javascript when the user mouses over the certain section?

[Orjan]

Okey. popup might be wrong term. if I call it a multiline tooltip square might be more appropriate.

I've tried alt-attribute for images, it works fine on IE but not at all on FF
I've tried title-attribute and that works on FF but not on IE

I've tried a javascript from some script site which makes the solution on IE and half of it on FF, the square appears in the upper left corner of the webpage instead of at the mouse pointer,wichisn't satisfiable, as it follows the scroling and disappears if you have scrolled down the page.

[TcM]

Yes that is a known issue, IE uses the alt, and FF uses title.

I don't know of any fix, sorry.

[chili5]

So your trying to get a title like thing above an image? The title attribute works in FF for this, and use alt in IE for this.

It should work if you include the title and alt attribute in your image tag.

<img src="http://forum.codecall.net/images/icons/icon13.gif" alt="Thumbs Up" 


title="Thumbs up" />

TcM is right, its an issue with the different browsers, try including both attributes and hopefully that will work.

[alilg]

orjan said:

Hello everyone. I would like to have some help.

I am doing a map and on each item, you can do a mouseover and get a popup with info of the object.

at the moment I got one of those from a scriptsite, which I tried, and it worked fine.. in IE, but in FF, it adds on to the very left upper corner of the page, and not at picture i sat the mouseover-tag on

anyone have any advice or links for me?

it's about absolute position and Left and Right offset...
i can't help you without see you code!!!
but i can figure it in a second if you put your code here.
it need a tiny change!

edit: but the "chili5"s code is so better then javascript balloon popup scripts...

Edited by alilg, 03 April 2008 - 05:34 PM.

[Orjan]

in my .css, this is the code:

#ToolTip{position:absolute; width: 200px; top: 0px; left: 0px; z-index:4; visibility:hidden;}

the javascript is this:

ContentInfo = "";


topColor = "#808080"

subColor = "#C0C0C0"



var mouse_X;

var mouse_Y;


var tip_active = 0;


function update_tip_pos(){

        document.getElementById('ToolTip').style.left = mouse_X + 20;

        document.getElementById('ToolTip').style.top  = mouse_Y;

}


var ie = document.all?true:false;

if (!ie) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;


function getMouseXY(e) {

    if (ie) {

        // grab the x-y pos.s if browser is IE

        mouse_X = event.clientX + document.body.scrollLeft;

        mouse_Y = event.clientY + document.body.scrollTop;

    } else {

        // grab the x-y pos.s if browser is NS

        mouse_X = e.pageX;

        mouse_Y = e.pageY;

    }

    if (mouse_X < 0){mouse_X = 0;}

    if (mouse_Y < 0){mouse_Y = 0;}


    if(tip_active){

        update_tip_pos();

    }

}


function EnterContent(TTitle, TContent){

    ContentInfo = '<table border="0" width="200" cellspacing="0" cellpadding="0">'+

    '<tr><td width="100%" bgcolor="#000000">'+

    '<table border="0" width="100%" cellspacing="1" cellpadding="0">'+

    '<tr><td width="100%" bgcolor='+topColor+'>'+

    '<table border="0" width="90%" cellspacing="0" cellpadding="0" align="center">'+

    '<tr><td width="100%">'+

    '<font class="tooltiptitle"> '+TTitle+'</font>'+

    '</td></tr></table></td></tr>'+

    '<tr><td width="100%" bgcolor='+subColor+'>'+

    '<table border="0" width="90%" cellpadding="0" cellspacing="1" align="center">'+

    '<tr><td width="100%">'+

    '<font class="tooltipcontent">'+TContent+'</font>'+

    '</td></tr></table></td></tr></table></td></tr></table>';

}


function tip_it(which, TTitle, TContent){

    if(which){

        update_tip_pos();

        tip_active = 1;

        document.getElementById('ToolTip').style.visibility = "visible";

        EnterContent(TTitle, TContent);

        document.getElementById('ToolTip').innerHTML = ContentInfo;

    } else {

        tip_active = 0;

        document.getElementById('ToolTip').style.visibility = "hidden";

    }

}

hope you can help. I haven't had time to learn this coding yet.

[alilg]

Okay, just replace this function

function update_tip_pos(){
        document.getElementById('ToolTip').style.left = mouse_X + 20;
        document.getElementById('ToolTip').style.top  = mouse_Y;
}

with this which i wrote

function update_tip_pos(){
        document.getElementById('ToolTip').style.left = parseInt(parseInt(mouse_X) + 20) +"px";
        document.getElementById('ToolTip').style.top  = mouse_Y + "px";
}

let me know it worked or not!
i tested if with firefox 2 and firefox beta 3

Edited by alilg, 03 April 2008 - 06:01 PM.