Simple modification

[svenicsale]

I wish to modify an existing JavaScript but I don't know how, but it shouldn't be a problem for anyone who knows JS.. You must start the script on your comp to see how it is working before you can modify it... The script does the following: the picture(picture.gif) flyes all over the screen and when you click on the picture, it opens a new page.. Currently, when you click on picture, it just pauses it's movement until it is clicked on again(when it continues to fly all over the screen), but I wish to make it so when a user clicks on an image, it closes itself(disapear), but before it disapear, it opens a new page in new window... Here is the script:

<div id="img" style="position:absolute;">
<A HREF="http://www.google.com" TARGET="_blank"><IMG SRC=picture.gif ALT="Klick me!" BORDER=0 onMouseDown="pauseResume();" border=0 TARGET=""></A>
</div>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
var name = navigator.appName;
if(name == "Microsoft Internet Explorer") name = true;
else name = false;
var xPos = 20;
if(name) var yPos = document.body.clientHeight;
else var yPos = window.innerHeight;
function changePos() {
if(name) {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
}
else {
height = window.innerHeight;
width = window.innerWidth;
Hoffset = document.img.clip.height;
Woffset = document.img.clip.width;
document.img.pageY = yPos + window.pageYOffset;
document.img.pageX = xPos + window.pageXOffset;
}
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
if(name) img.visibility = "visible";
else document.img.visibility = "visible";
interval = setInterval('changePos()',delay);
}
function pauseResume() {
if(pause) {
clearInterval(interval);
pause = false;
}
else {
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
// End -->
</script>

[Khalid Ali]

just add an onclick event callin the image tag and in that onclick event
write one line
so that onlick call will look like this

onclick="window.open('newPgesURL',newWin)"

[svenicsale]

Thanks, but I didn't ask for that... It already opens a new window with simmilar code(<A HREF="http://www.google.com" TARGET="_blank">).. What I wanted is to modify the script, so the flying image would close itself after "onMouseDown" instead of pauseing it's movement...
The current function is onMouseDown="pauseResume();" but what I would like it to make something like onMouseDown="closePicture();" ..
If you don't understand, I will try to explain more, but please run the script so you can know what I am talking about, and add any image named picture.gif in the dir where you will putt this Javascript...

[Khalid Ali]

for that you only need to add this line in the onclick event of the image..make sure its the images onclick event

onclick="this.style.visibility='hidden';"

and you are all set

Presuming that you will know to make it visible when needed..

[scriptkid]

function closePicture()
{
pauseResume();
document.img.style.visibility = 'hidden';
}

[svenicsale]

No luck, I tryed inserting document.img.style.visibility = 'hidden'; everywhere and it didn't work... Then, I can't putt onClick=... because there is already onMouseDown, as you can see in the code.. I guess the best thing it would be to paste the whole modified script, to avoid more troubles...

[Khalid Ali]

you can add the line of code which I posted earlier like this

onMouseDown="this.style.visibility='hidden';pauseResume();"

[svenicsale]

Yes, that works.... But the picture is still there just invisible.... That could be a problem if the picture is clicked on top of nav bar(for ex.)... Any way to completely close the image???

[svenicsale]

I know this feature could mean a whole rewrite of the script but it is really important to me.... So the key word is "close the picture after click", not "hide picture"....

[Jona]

This will set the SRC of the image to nothing causing it to be completely invisible and basically not there (although in reality it is, and you can call it to view at any time again).


onMouseDown="this.style.visibility='hidden';this.src='';pauseResume();"


Jona

[svenicsale]

Hm, as far as I see, the effect is the same between these two codes:
onMouseDown="this.style.visibility='hidden';this.src='';pauseResume();"
&
onMouseDown="this.style.visibility='hidden';pauseResume();"

The picture is still there... And therefore, could get in a way if, for ex. is paused over navigation bar or link(you wil not be able to click a link because invisible picture is over it)... The picture or whole javascript must be turned off after click... OR, if that is not possible, then to code something like this: "onClick set picture position TOP-RIGHT" that way it wouldn't get in a way of anything...

[svenicsale]

Yeah, it works.. Finally... Thank you all. BUT, it needs to be onMouseOut instead of onMouseDown, because otherwise the webpage will not popup.

[svenicsale]

Yeah, it should work both way... But I am pleased with onMouseOut....