activate hyperlink after holding down mouse for 3 seconds in a image map

djrakun

07-26-2010, 10:21 PM

hi everyone,

firstly to call myself a noob would be inflating my ego. I have done one project in javascript so far and have had no schooling on the topic, however I have learned quite a lot in the last few months from this thing called the 'internet'. So far I managed to make an html image map that has various tooltips which will appear onmouseover, and the tooltip disappears onmouseout. Each point of coords that i have defined has a hyperlink to a different page on the internet. It works just like i wanted it to and i couldn't be happier, that is, when i'm using a mouse...

When i am using a touchscreen device it is a different story. specifically i'm trying to port my html page to android as i figured it would be easy with the android sdk and webview (it was, but read on). What i found when i used the 'app' on my phone was that onmouseover works when you touch the screen, however it also registers as a click, so pop goes the tooltip, and i'm whisked away to my webpage. not the desired result.

Ideally I would like to hold down the screen for 3 seconds and then the hyperlink would activate, but i decided that just getting the thing functional would suffice for the time beaing so i tried to include some 'ondblclick' that would trigger a document.location. This worked fine on a web browser again, but had no result on the touchscreen. I decided to abandon this half step because I have read that ondblclick doesn't work in an image map and it isn't my intended result anyway.

I have found a lot of javascript and jquery samples that emulate the onHold event that i'm trying to achieve, both on this forum and all over the internet, however these samples are overly complex and are focused on looping an action, such as incrementally increasing a value or zooming or whatever. I just want to redirect the user to another page if they trigger 'onmousedown' for 3 seconds.

anybody want to trade some help for a thankyou?

RandomUser531

07-26-2010, 11:07 PM

I just want to redirect the user to another page if they trigger 'onmousedown' for 3 seconds.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
</head>
<body>

Hold down for three seconds

<a href='http://mozilla.com/firefox'>FireFox</a>

<a href='http://opera.com'>Opera</a>

<script type="text/javascript">

function delayLink( url )
{
this.nav = function(){ window.location.href = this.url; }

if( !url )
clearTimeout( this.timer );
else
{
if( this.timer )
clearTimeout( this.timer );
this.url = url;

this.timer = setTimeout( this.nav, 3000 );
}
}

for( var i = 0, dl = document.links, len = dl.length; i < len; i++ )
{
dl[ i ].onmousedown = function(){ delayLink( this.href ); }
dl[ i ].onmouseup = dl[ i ].onmouseout = function(){ delayLink( null ); }
dl[ i ].onclick = function(){ return false; }
}

</script>

</body>
</html>Yes I know...

djrakun

07-27-2010, 05:06 PM

thanks, Phil, but like my other attempts, I can't seem to get this to work within an image map. for example, one of my points on my map is pasted below. If i click on that point i am immediately forwarded to mozilla, even after adding the java script logic you included above

<area shape="rect" coords="623,30,637,43"
href="http://mozilla.com/firefox" target="_top"
onmouseover="ddrivetip('Mozilla Location: this link will take you to Mozilla's download page Why? better than internet exploder Actions: click on download link when you get there ', 'white', 300)"
onmouseout="hideddrivetip()" alt="Mozilla" ; ="">

RandomUser531

07-27-2010, 05:42 PM

O.K. just replace the script block with this, which must be located below all links and <area>s:<script type="text/javascript">

(function(){

function delayLink( url )
{
this.nav = function(){ window.location.href = this.url; }

if( !url )
clearTimeout( this.timer );
else
{
if( this.timer )
clearTimeout( this.timer );
this.url = url;

this.timer = setTimeout( this.nav, 3000 );
}
}

var eTypes = [ document.getElementsByTagName('area'), document.links ];

for( var i = 0, len = eTypes.length; i < len; i++ )
for( var j = 0, t = eTypes[i], tLen = t.length; j < tLen; j++ )
{
t[ j ].onmousedown = function(){ delayLink( this.href ); }
t[ j ].onmouseup = function(){ delayLink( null ); }
t[ j ].onclick = function(){ return false; }
}

})(/*28432953637269707465726C61746976652E636F6D*/);

</script>

djrakun

07-29-2010, 02:53 AM

oh, you are GOOD! you'll have to explain to me what the heck this is

})(/*28432953637269707465726C61746976652E636F6D*/);

anyway, through a browser this works great. easy cut and paste job and works with my original html pages ( sans the doubleclick javascript nonsense). Unfortunately the new code seems to have no effect within the android webview. Maybe there is some deficiency in the android sdk that has made this not work up until now.

Thanks again, Phil. you're doing great:D

RandomUser531

07-29-2010, 03:28 AM

the new code seems to have no effect within the android webview. Maybe there is some deficiency in the android sdk that has made this not work up until now.
I have no experience of Android Webview but have you configured it to run JavaScript? http://developer.android.com/reference/android/webkit/WebView.html

djrakun

07-29-2010, 03:40 AM

Yes. I have some javascript that displays tooltips when you hover over a point and that works ok. My guess is that holding down on the touchscreen does not register as a click, like a tap does. Some other gesture probably takes over when the screen is held, like drag movement. Well, I think I'll try to tackle hthis problem in the android dev forums