yellow box and status bar effects simultaneously

**joon** · 07-20-2005, 10:28 PM

Code:

http://www.dynamicdrive.com/dynamici...tmltooltip.htm

<html>
<head>
<style type="text/css">

#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}

</style>

<head>

<body>
<div id="dhtmltooltip"></div>

<script type="text/javascript">

/***********************************************
* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""

function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.x+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.y+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}

document.onmousemove=positiontip

</script>


<a href="http://www.yahoo.com" onMouseover="ddrivetip('Visit Yahoo.com')";
onMouseout="hideddrivetip()">Link1</a>

<a href='http://www.mysite.com/link_click_log.cfm' 
         onMouseOver="window.status='http://www.yahoo.com';return true;"
         onMouseOut="window.status='';">Link2</a>

</body>
</html>

When you put your mouse on the Link1, an yellow box pops saying "Visit yahoo.com."

When you put your mouse on the Link2, status bar says "http://www.yahoo.com," but if your click it doesn't go to yahoo.com, it actually goes to link_click_log.php of mySite.

Look at the following would-be code, please.
it doesn' work correctly, but it will show what I want.

Code:

would-be code

<a href='http://www.mysite.com/link_click_log.cfm' 
onMouseover="ddrivetip('Visit Yahoo.com')";
onMouseout="hideddrivetip()"
onMouseOver="window.status='http://www.yahoo.com';return true;"
onMouseOut="window.status='';" >Link3</a>

target result

When you put your mouse on the Link3, 
the yellow box pops saying  "Visit yahoo.com." 
and the status bar simultaneously says "http://www.yahoo.com," 
but if your click it doesn't go to yahoo.com,
it actually goes to link_click_log.cfm of mySite.

Can I do it with your help?

**jscheuer1** · 07-21-2005, 04:27 AM

Why?

.................................................

**joon** · 07-21-2005, 06:51 AM

Originally Posted by jscheuer1

Why?

.................................................

I like to get how many times the link is clicked.
So I put some counting code in link_click_log.cfm.

and the link_click_log.cfm automatically move to yahoo.com after plus 1 count into the log table of my database.

The exististance of link_click_log.cfm is very unconvinient because it makes the move a little slow.

Do you have any other way how to store plus 1 into my database whenver the link is clicked?

**jscheuer1** · 07-21-2005, 10:55 AM

Then, it might be better to have a dual link and change the behavior of link_click_log.cfm. The dual link could go directly to Yahoo while temporarily opening a pop under window containing link_click_log.cfm. If link_click_log.cfm can be made to do nothing except count the link, we then can close the pop under window after 10 seconds or however long it needs to record the click. Better still, what code on link_click_log.cfm counts the link? Could we execute that code as we load Yahoo and skip the link_click_log.cfm page?

**joon** · 07-21-2005, 06:26 PM

Originally Posted by jscheuer1

Then, it might be better to have a dual link and change the behavior of link_click_log.cfm. The dual link could go directly to Yahoo while temporarily opening a pop under window containing link_click_log.cfm. If link_click_log.cfm can be made to do nothing except count the link, we then can close the pop under window after 10 seconds or however long it needs to record the click. Better still, what code on link_click_log.cfm counts the link? Could we execute that code as we load Yahoo and skip the link_click_log.cfm page?

Dual link and a pop under window...
That's a really good idea.

Code:

code in first.cfm

http://www.dynamicdrive.com/dynamic...htmltooltip.htm...

<a href='http://www.mysite.com/link_click_log.cfm?link=www.yahoo.com' 
         onMouseOver="window.status='http://www.yahoo.com';return true;"
         onMouseOut="window.status='';">Link2</a>


code in link_click_log.cfm

<cfquery datasource='myDatasource'>
insert into log (time,link)
values(
<cfqueryparam value=#variables.time# cfsqltype='cf_sql_int'>,
<cfqueryparam value='#url.link#' cfsqltype='cf_sql_varchar'>
)
</cfquery>

<cflocation url='http://#url.link#' addToken='no'>

How can I get the dual link, please?

**joon** · 07-21-2005, 06:37 PM

Dual link and a pop under window...
That's a really good idea.

Code:

code in first.cfm

http://www.dynamicdrive.com/dynamic...htmltooltip.htm...

<a href='http://www.mysite.com/link_click_log.cfm?link=www.yahoo.com' 
         onMouseOver="window.status='http://www.yahoo.com';return true;"
         onMouseOut="window.status='';">Link2</a>


code in link_click_log.cfm

<cfquery datasource='myDatasource'>
insert into log (time,link)
values(
<cfqueryparam value=#dateformat(now(),'yyyymmdd')##timeformat(now(),'HHmmss')# cfsqltype='cf_sql_int'>,
<cfqueryparam value='#url.link#' cfsqltype='cf_sql_varchar'>
)
</cfquery>

<cflocation url='http://#url.link#' addToken='no'>

How can I get the dual link, please?

Originally Posted by jscheuer1

Could we execute that code as we load Yahoo and skip the link_click_log.cfm page?

I don't understand what the above quote exactly means, but I presumed that your want the my code to test.( I am not a navtive speaker of English.)

**jscheuer1** · 07-22-2005, 09:38 AM

I think it would be better to go back to your original idea:

HTML Code:

<a href="http://www.mysite.com/link_click_log.cfm" onMouseover="ddrivetip('Visit Yahoo.com');window.status='http://www.yahoo.com';return true;" onMouseout="hideddrivetip();window.status='';return true;">Link3</a>

Opening a pop under would be about as much a drag on things as this would be and might not work with some pop up stoppers out there. The best thing would be if we could fire off the link counting command as part of the onclick event. Then we wouldn't need to load that other page first. I am too unfamiliar with cfm to know how to do that. Is there any way to run that code without loading the page? I've heard of something called AJAX that might make it work if cfm has no native method for doing so.

**joon** · 07-22-2005, 11:07 PM

Originally Posted by jscheuer1

HTML Code:

<a href="http://www.mysite.com/link_click_log.cfm" onMouseover="ddrivetip('Visit Yahoo.com');window.status='http://www.yahoo.com';return true;" onMouseout="hideddrivetip();window.status='';return true;">Link3</a>

Thank you, John. Your code above works fine.

Originally Posted by jscheuer1

The best thing would be if we could fire off the link counting command as part of the onclick event.

Yes, I like to know how I insert into mydatabase per onclick event.

Originally Posted by jscheuer1

I've heard of something called AJAX that might make it work

Thank you for the Keyword AJAX.

I am reading on the following URL at the moment

http://www.adaptivepath.com/publicat...ves/000385.php