PDA

Click to See Complete Forum and Search --> : Dragable Object with Hyperlink problem

ABrand
08-08-2005, 04:21 AM
I'm trying to get an image to be dragable across the screen in HTML and clicking on that image will result in opening a new window (containing an image)
The code i have so far does do the draging, but i presume that the MouseDown works as a mouseclick: when you drag the image it opens the new window. Is there a way around this?
I'd also like to have an image with multiple hyperlinks that's also dragable, but i have no clue as how to make this, any suggestions??
I'm not very fluent in JS ...
Any input is much appriciated, Arjan

<head>
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>

<script language="JavaScript1.2">

var dragapproved=false
var z,x,y
function move(){
if (event.button==1&&dragapproved){
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
return false
}
}
function drags(){
if (!document.all)
return
if (event.srcElement.className=="drag"){
dragapproved=true
z=event.srcElement
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")

</script>
</head>

<body background="Images/Graphix/beuk%20copy.jpg">
<p><img src="Images/Graphix/Logo%20Glass.jpg" width="296" height="162"></p>

<a href="DJ Booth/Club11_2.htm" target="_blank" toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=400,hei ght=300'); return false;}"><img src="Images/Foto/DSCF0045.jpg" width="297" height="223" class="drag"></a>



</body>
</html>
Kor
08-08-2005, 04:42 AM
what about using ondoubleclick event instead of a href link?
ABrand
08-08-2005, 04:53 AM
I tried that, but i guess i got something wrong (i don't have the code anymore, tried for hours in the same document, didn't save it though ...)
It basically came down to making the event wasn't the problem, but the function to create the URL was. Maybe you can give me a hand with that?
Thanks for replying ...
Kor
08-08-2005, 05:04 AM
but the function to create the URL was


element.ondoubleclick=function(){window.open('DJ Booth/Club11_2.htm','_blank','toolbar=no,location=no,.....')}
ABrand
08-08-2005, 05:16 AM
How would i get this event to be invoked when clicked on the image?
Kor
08-08-2005, 05:36 AM
Dinamically: onload. Or simply:
<img src="Images/Foto/DSCF0045.jpg" width="297" height="223" class="drag" ondoubleclick="window.open(...blablabla....)">
ABrand
08-08-2005, 06:12 AM
Super, i'll give it a shot.(not behind my own comp right now ...)
thanks a lot, and any suggestions as to how to support Rumania to join EC?
:)
Kor
08-08-2005, 06:23 AM
and any suggestions as to how to support Rumania to join EC?

With your heath, if nothing else is within reach :cool:
ABrand
08-08-2005, 07:46 AM
element.ondoubleclick=function(){window.open('DJ Booth/Club11_2.htm','_blank','toolbar=no,location=no,.....')}

This i tried, but i don't know how to declare that the element clicked is the image.

<body background="Images/Graphix/beuk%20copy.jpg">
<p><img src="Images/Graphix/Logo%20Glass.jpg" width="296" height="162"></p>
<img src="Images/Foto/DSCF0045.jpg" width="297" height="223" class="drag" >
<script>element[/i].ondoubleclick=function()
{window.open('DJ Booth/Club11_2.htm','_blank',
'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,
resizable=yes,width=400,height=300')
</script>
</body>

<img src="Images/Foto/DSCF0045.jpg" width="297" height="223" class="drag" ondoubleclick="window.open(...blablabla....)">


Tried this too, but just doesn't work. The image is dragable, but no opening new windows

this is what i tried:

<body background="Images/Graphix/beuk%20copy.jpg">
<p> <img src="Images/Graphix/Logo%20Glass.jpg" width="296" height="162"> </p>
<img src="Images/Foto/DSCF0045.jpg" width="297" height="223" class="drag" ondoubleclick=window.open('DJ Booth/Club11_2.htm','_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res izable=yes,width=400,height=300')>
</body>
Kor
08-08-2005, 10:14 AM
...ondoubleclick="window.open('DJ Booth/Club11_2.htm','_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,res izable=yes,width=400,height=300')"
ABrand
08-08-2005, 01:04 PM
Nope, still doesn't work. I did try " ,but must have taken them out to try ... as i said, not very good at JS. I attached some files, unzip and put in 1 dir, should give you an idea what it's supposed to look like.
ABrand
08-08-2005, 02:33 PM
Got it!! after countless tries i finally got it, probably not the prettiest way, but it works. looks like this:


<body background="beuken.jpg">
<p> <img src="Logo%20Glass.jpg" width="296" height="162"> </p>

<a href="#"
onDblClick="window.open('Club11_1.htm','_blank','toolbar=no,location=no,directories=no,status=no,menubar=no,scro llbars=no,resizable=yes,width=400,height=300')"
> <img src="DSCF0045.gif" width="297" height="223" class="drag"> </a>

</body>
</html>

Thanks Kor for your time and effort!!
PS i do hope Romania joins EC, I used to date a Transylvanian grrrl, nice :D