H

[hassan.]

Hi there, looking for some help with some JS code problems I'm having in a website I'm making for uni. I know it's something stupidly simple but I was wondering if anyone could see what's wrong/where the program is going wrong?

First of all the effect I'm looking for is the Spotlight effect.

http://www.dynamicdrive.com/dynamicindex4/spotlight.htm

You'll need to view in Internet Explorer.

Now the website I'm trying to do basically has 8 pictures where I want this effect on it. Although the code above only provides info for one.



#### header #####

<style>
<!--

#myimage{
filter:light
}

-->
</style>

##### body ######

<img id="myimage" src="theimage.jpg">

<script language="JavaScript1.2">


s = 50;
vp = 10;
startx = 0;
starty = 0;


var IE = document.all?true:false

function moveL()
{
xv = tempX;
yv = tempY;
myimage.filters.light.MoveLight(1,xv,yv,s,true);
}

if (IE&&myimage.filters)
document.all.myimage.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0


function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY

if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveL();
}

return true
}

var xv = startx;
var yv = starty;
var t= true;
if (IE&&myimage.filters){
myimage.style.cursor="hand";
myimage.filters.light.addAmbient(255,255,255,vp)
myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)
}

</script>

My code for the header.

<style>
<!--

#TheCourteeners{
filter:light
}
#FlorenceTheMachine{
filter:light
}
#JamieT{
filter:light
}
#MarinaTheDiamonds{
filter:light
}
#MysteryJets{
filter:light
}
#TheSmiths{
filter:light
}
#TheSpecials{
filter:light
}
#TheCribs{
filter:light
}

-->
</style>


My body code.

<script language="JavaScript1.2">

s = 50;
vp = 10;
startx = 0;
starty = 0;

var IE = document.all?true:false

function movea()
{
xv = tempX;
yv = tempY;
TheCourteeners.filters.light.MoveLight(1,xv,yv,s,true);
}

var IE = document.all?true:false

function moveb()
{
xv = tempX;
yv = tempY;
JamieT.filters.light.MoveLight(1,xv,yv,s,true);
}

var IE = document.all?true:false

function movec()
{
xv = tempX;
yv = tempY;
MarinaTheDiamonds.filters.light.MoveLight(1,xv,yv,s,true);
}

var IE = document.all?true:false

function moved()
{
xv = tempX;
yv = tempY;
MysteryJets.filters.light.MoveLight(1,xv,yv,s,true);
}

var IE = document.all?true:false

function movee()
{
xv = tempX;
yv = tempY;
TheSmiths.filters.light.MoveLight(1,xv,yv,s,true);
}

var IE = document.all?true:false

function movef()
{
xv = tempX;
yv = tempY;
TheSpecials.filters.light.MoveLight(1,xv,yv,s,true);
}

var IE = document.all?true:false

function moveg()
{
xv = tempX;
yv = tempY;
TheCribs.filters.light.MoveLight(1,xv,yv,s,true);
}

var IE = document.all?true:false

function moveh()
{
xv = tempX;
yv = tempY;
FlorenceTheMachine.filters.light.MoveLight(1,xv,yv,s,true);
}


if (IE&&TheCourteeners.filters)
document.all.TheCourteeners.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
if (IE&&TheCribs.filters)
document.all.TheCribs.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
if (IE&&TheSpecials.filters)
document.all.TheSpecials.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
if (IE&&TheSmiths.filters)
document.all.MysteryJets.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
if (IE&&MarinaTheDiamonds.filters)
document.all.MarinaTheDiamonds.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
if (IE&&JamieT.filters)
document.all.JamieT.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
if (IE&&FlorenceTheMachine.filters)
document.all.FlorenceTheMachine.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0
if (IE&&TheSmiths.filters)
document.all.TheSmiths.onmousemove = getMouseXY;
var tempX = 0
var tempY = 0


function getMouseXY(e) {
tempX = event.offsetX
tempY = event.offsetY

if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
movea();
)
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveb();
)
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
movec();
)
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moved();
)
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
movee();
)
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
movef();
)
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveg();
)
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveh();
}

return true
}

var xv = startx;
var yv = starty;
var t= true;
if (IE&&TheCourteeners.filters){
TheCourteeners.style.cursor="hand";
TheCourteeners.filters.light.addAmbient(255,255,255,vp)
TheCourteeners.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
if (IE&&FlorenceTheMachine.filters){
FlorenceTheMachine.style.cursor="hand";
FlorenceTheMachine.filters.light.addAmbient(255,255,255,vp)
FlorenceTheMachine.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
if (IE&&JamieT.filters){
JamieT.style.cursor="hand";
JamieT.filters.light.addAmbient(255,255,255,vp)
JamieT.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
if (IE&&MarinaTheDiamonds.filters){
MarinaTheDiamonds.style.cursor="hand";
MarinaTheDiamonds.filters.light.addAmbient(255,255,255,vp)
MarinaTheDiamonds.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
if (IE&&MysteryJets.filters){
MysteryJets.style.cursor="hand";
MysteryJets.filters.light.addAmbient(255,255,255,vp)
MysteryJets.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
if (IE&&TheSmiths.filters){
TheSmiths.style.cursor="hand";
TheSmiths.filters.light.addAmbient(255,255,255,vp)
TheSmiths.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
if (IE&&TheCribs.filters){
TheCribs.style.cursor="hand";
TheCribs.filters.light.addAmbient(255,255,255,vp)
TheCribs.filters.light.addPoint(startx,starty,s,255,255,255,255)
}
if (IE&&TheSpecials.filters){
TheSpecials.style.cursor="hand";
TheSpecials.filters.light.addAmbient(255,255,255,vp)
TheSpecials.filters.light.addPoint(startx,starty,s,255,255,255,255)
}

</script>


Now where it says "movea, moveb" etc. before it was moveL and that made everything highlight when you went over the one image.

If statements.

if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
if (t)
{
moveh();
}

As you can see I have a seperate if statement for all of them as I was playing around, before I had it so that it was all under the one if statement which - if I remember right - just made one of the images move. That image would be the last image listed in the function section. Now it just makes all the pictures black, nothing happens.

http://img651.imageshack.us/img651/3531/examplem.jpg

I want it like that - if that makes sense. I was at uni and couldn't reply before.

Anyway, I want it so there's x amount of pictures on the screen and when the user opens it up it's all sorta dark - the effect does that - although when the user puts their mouse over an image it looks like a spotlight - again, same effect does that - although the problem I get is I'm not sure where I'm going wrong in the code because it either does the following.

http://img220.imageshack.us/img220/9914/example1n.jpg

Or it just displays the images as black boxes with no effect.

I've been at it all day and I'm still stuck! The code that was posted here was one of my earlier attempts at fixing it.

Any advice/help? Thanks.:)

[vwphillips]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>

<style type="text/css">
/*<![CDATA[*/
.myimage{
filter:light
}

/*]]>*/
</style></head>

<body>
<img class="myimage" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">
<img class="myimage" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg">
<img class="myimage" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg">
<img class="myimage" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg">

<script language="JavaScript1.2">

//Image spotlight effect- By Erik F (die_schlampe@hotmail.com)
//Code enhancements by Dynamicdrive.com
//Visit http://www.dynamicdrive.com for this script

s = 50; // the size of the spotlight
vp = 10; // the visibility percent of the picture
startx = 0; // the top position of your sportlight into the image (on start)
starty = 0; // the left position of your spotlight into the image (on start)
var imgs=zxcByClassName('myimage');


//////////////////////////////////////////////////////////////////
// No need to edit below this line //
//////////////////////////////////////////////////////////////////

var IE = document.all?true:false
var t= true;






function getMouseXY(img) {
var x = event.offsetX
var y = event.offsetY
if (x < 0){x = 0}
if (y < 0){y = 0}
if (t){
img.filters.light.MoveLight(1,x,y,s,true);
}
return true
}

if (IE&&imgs[0]&&imgs[0].filters){
for (var z0=0;z0<imgs.length;z0++){
imgs[z0].onmousemove = function(){ getMouseXY(this); };
imgs[z0].style.cursor="hand";
imgs[z0].filters.light.addAmbient(255,255,255,vp)
imgs[z0].filters.light.addPoint(startx,starty,s,255,255,255,255)
}
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}


</script>
</body>

</html>