JavaScript problem

[mamola500]

Hi All,

I am trying to create a JavaScript solution that will allow me to turn off the JS dependent on the page configuration. I have developed a multi-skinned web app that uses exactly the same pages for the different skins. My problem is that on skin A i want rollover action on the navigation buttons, but on skin B (which uses the same code, same page - just different CSS) i do not want JS mouseover/mouseouts on the navigation.

I have tried to store a variable on page load in an asp.net control, but am not able to read the control through javascript. Something like:-

function mouseOver8()
{
var test = document.getElementById('<%= strStyleHide %>');
}

Where strStyleHide has a value stored
alert(test) - returns nothing

any help much appreciated

Thanks

[DaveSawers]

On the page that doesn't need the effect, make the rollover image identical to the normal image and leave the code the same.

[mamola500]

A good idea Dave, but this wouldn't work for my scenario (i wasn't clear enough in my original post)

The rollover changes an image below the navigation menu so when i switch skins from a vertical layout to a horizontal menu layout i dont want the image to be displayed at all. I can set this to a 1px x 1px clear image, but when i rollover the nav buttons the JavaScript still stands - therefore i need to put somekind of If statement into tthe javascript to say determine which image is displayed within the image

[imvain2]

How do you determine what the skin is? Do you use server side programming?

Wait. I see you are using ASP.

so....

you could do something like:

function isVert(skin){
vertvar = false;
switch(skin)
{
case "a":
vertvar= true;
break;
case "b":
vertvar= true;
break;
case "c":
vertvar= false;
break;
}
return vertvar;
}

if(isVert("a")){
use vert mouse over
}
else{
use horizontal mouse over.
}

[mamola500]

I think my main issue was returning a value from an asp:label (in the example below this is referred to as 'lblzz') which i had assigned with a value of 0 or 1 depending on the type of skin (horizontal or vertical), once i assign this to the test variable and read test.innerHTML i was able to set up the if statement to set the source of my image to either a clear 1px * 1px square (so nothing displays) or an actual image.

I think the way i solved it was a bit of a 'bodge', but it works well enough - so i'm happy. Herte is the code i used if anyone finds it useful and thanks for the replies.

function mouseOver8()
{
setImageOver(;
}
function mouseOut8()
{
setImageOut();
}
function setImageOut()
{
var test = document.getElementById('<%= lblZZ.ClientID %>')

if (test.innerHTML == "0")
{
var img = document.getElementById('<%= bbb.ClientID %>');
img.src = "../images/seperate1px.gif"
}
else if (test.innerHTML == "1")
{
var img = document.getElementById('<%= bbb.ClientID %>');
img.src = "../images/rd_board_text.gif"
}
else
{
var img = document.getElementById('<%= bbb.ClientID %>');
img.src = "../images/seperate1px.gif"
}
}
function setImageOver(a)
{
var test = document.getElementById('<%= lblZZ.ClientID %>')

if (test.innerHTML == "0")
{
var img = document.getElementById('<%= bbb.ClientID %>');
img.src = "../images/seperate1px.gif"
}
else if (test.innerHTML == "1")
{
var result = null;
switch (a)
{

case 1: result = "../images/house.gif"; break;

case 2: result = "../images/strength.gif"; break;

case 3: result = "../images/binoculars.gif"; break;

case 4: result = "../images/graduation.gif"; break;

case 5: result = "../images/bluepeople.gif"; break;

case 6: result = "../images/jobs.gif"; break;

case 7: result = "../images/document.gif"; break;

case 8: result = "../images/keys.gif"; break;

}

var img = document.getElementById('<%= bbb.ClientID %>');
img.src = result;
}
else
{
var img = document.getElementById('<%= bbb.ClientID %>');
img.src = "../images/seperate1px.gif"
}
}