Page 1 of 1

Help me condense this script.

Posted: Mon Jul 17, 2006 1:39 pm
by daedalus__
The thing I really hate about JavaScript is implementing it. Having to give 800 tags 37 attributes to show one image is what turns me off.

I have this page:

Code: Select all

<a onmouseover="javascript:ShowNorthwest()" onmouseout="javascript:HideNorthwest()">Washington</a>

<script language="javascript">

function ShowNorthwest()
{
	document.getElementById("northwest").style.visibility = "visible";
}

function HideNorthwest()
{
	document.getElementById("northwest").style.visibility = "hidden";
}
</script>
Is there a way that I can cut that down to one function and one call or am I stuck with that ugliness?

Posted: Mon Jul 17, 2006 1:46 pm
by feyd
hint: use a ternary.

Posted: Mon Jul 17, 2006 1:46 pm
by Burrito
try something like this:

Code: Select all

<a onmouseover="javascript:ShowNorthwest(this)" onmouseout="javascript:ShowNorthwest(this)">Washington</a>

<script language="javascript">

function ShowNorthwest(obj)
{
   if(obj.style.display != 'none')
      obj.style.display = "none";
   else
      obj.style.display = "block";
}

</script>

Posted: Mon Jul 17, 2006 1:48 pm
by Burrito
incorporating Feyd's idea also:

Code: Select all

<a onmouseover="javascript:ShowNorthwest(this)" onmouseout="javascript:ShowNorthwest(this)">Washington</a>

<script language="javascript">

function ShowNorthwest(obj)
{
   obj.style.display = (obj.style.display == 'none' ? 'block' : none');
}

</script>
I spaced that one...doh!

Posted: Mon Jul 17, 2006 2:05 pm
by daedalus__
lololol.. I'm stupid.

Sorry, I'm using the link to change the style of another element. Thanks for suggesting the ternary operator feyd and thanks for the code examples Burrito.

I think I've got it figured out now.

Posted: Mon Jul 17, 2006 2:51 pm
by daedalus__
On this page I will have a link for every state, with the name of the state and the link attributes will hold the functions that make the image appear and disappear. I tried a couple of different things with a ternary operator and I tried an if then else statement but it kept giving me errors like 'cannot set property that only has getters' and 'getElementById("northwest") has no properties'.

I don't know what I did wrong.

This is what the page looks like:

Code: Select all

<script language="javascript"> 
function ShowNorthwest() 
{ 
   document.getElementById("northwest").style.visibility = "visible"; 
} 

function HideNorthwest() 
{ 
   document.getElementById("northwest").style.visibility = "hidden"; 
}

'More functions later
</script>

<div id="relative">

	<div id="links">
<a onmouseover="javascript:ShowNorthwest()" onmouseout="javascript:HideNorthwest()">Washington</a>
<a onmouseover="javascript:ShowNortheast()" onmouseout="javascript:HideNortheast()">New Jersey</a>
<a onmouseover="javascript:ShowSouthwest()" onmouseout="javascript:HideSouthwest()">California</a>
<a onmouseover="javascript:ShowSoutheast()" onmouseout="javascript:HideSoutheast()">Florida</a>
<a onmouseover="javascript:ShowAtlantic()" onmouseout="javascript:HideAtlantic()">Virginia</a>
<a onmouseover="javascript:ShowCentral()" onmouseout="javascript:HideCentral()">Texas</a>
	</div>

	<div id="map_background">
		<div id="northwest"><div class="desc">Northwest</div></div>
		<div id="northeast"><div class="desc">Northeast</div></div>
		<div id="southwest"><div class="desc">Southwest</div></div>
		<div id="southeast"><div class="desc">Southeast</div></div>
		<div id="atlantic"><div class="desc">Atlantic</div></div>
		<div id="central"><div class="desc">Central</div></div>
	</div>
</div>

Posted: Mon Jul 17, 2006 3:13 pm
by Burrito
try this:

Code: Select all

<script language="javascript">
function ShowHide(where)
{
   var obj = document.getElementById(where);
   obj.style.display = (obj.style.display == "none" ? "block" : "none");
}
</script>

<div id="relative">

   <div id="links">
<a onmouseover="javascript:ShowHide('northwest')" onmouseout="javascript:ShowHide('northwest')">Washington</a>
   </div>

   <div id="map_background">
      <div id="northwest" style="display:none">Northwest</div>
   </div>
</div>

Posted: Mon Jul 17, 2006 3:26 pm
by sweatje
a function name like "toggle" or "toggleVisibility" might be more appropriate. (fore sure better than ShowNorthwest ;) )

Posted: Mon Jul 17, 2006 3:29 pm
by daedalus__

Code: Select all

<a onmouseover="javascript:ShowHide('northwest')" onmouseout="javascript:ShowHide('northwest')">state</a>

function ShowHide(where) 
{ 
   var obj = document.getElementById(where); 
   obj.style.visibility = (obj.style.visibility == "visible" ? "hidden" : "visible"); 
}
Worked perfect. :)
Thanks!