Taking from an example that works:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Show-Hide Divs</title>
<script type="text/javascript" src="
http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<style type="text/css" media="screen">
.toggle {
padding: 0;
margin-left: 1em;
background-color: #989699;
border: 2px solid #1f0c00;
float: left;
opacity:0.7;
}
#menu {
float: left;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#thing_1">One</a></li>
<li><a href="#thing_2">Two</a></li>
<li><a href="#thing_3">Three</a></li>
<li><a href="#thing_4">Four</a></li>
<li><a href="#thing_5">Five</a></li>
<li><a href="#thing_6">Six</a></li>
</ul>
</div>
<div id="thing_1" class="toggle">
<p>© by
flicr.com<br/><a href="
http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_2" class="toggle">
<p>© by
flicr.com<br/><a href="
http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_3" class="toggle">
<p>© by
flicr.com<br/><a href="
http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_4" class="toggle">
<p>© by
flicr.com<br/><a href="
http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_5" class="toggle">
<p>© by
flicr.com<br/><a href="
http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_6" class="toggle">
<p>© by
flicr.com<br/><a href="
http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<script type="text/javascript">
var toggles = $$('.toggle').invoke('hide');
$('menu').on('mouseover', 'a', function(evt, elm){
evt.stop();
toggles.invoke('hide');
$(elm.href.split('#').last()).show();
});
$('menu').on('mouseout', 'a', function(evt, elm){
evt.stop();
toggles.invoke('show');
$(elm.href.split('#').last()).hide();
toggles = $$('.toggle').invoke('hide');
})
</script>
</body>
</html>
I tried to apply this script to a complete webpage but i trows me an error TypeError the $('') function considers the id i pass to it as a null. My web page is longer.
<!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>
<style type="text/css">
@import url(styles.css);
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7/prototype.js"></script>
<script type="text/javascript">
var toggles = $$('.toggle').invoke('hide');
$('gallery').on('mouseover', 'a', function(evt, elm){
evt.stop();
toggles.invoke('hide');
$(elm.href.split('#').last()).show();
});
$('gallery').on('mouseout', 'a', function(evt, elm){
evt.stop();
toggles.invoke('show');
$(elm.href.split('#').last()).hide();
toggles = $$('.toggle').invoke('hide');
}); </script>
<title>Python Speculative Interface</title>
</head>
<body>
<div class="main"><div id="header">
<div class="primariga">
<div class="tab-active">
<a href="/py/index.php?tabindex=0">
Concept </a>
</div>
<div class="tab">
<a href="/py/index.php?tabindex=1">
Wiki </a>
</div>
</div>
</div></div><div class="main">
<div class="tab-content" >
<div class="main">
<img class="logo" src="images/psi.png" /></div>
<div class="containere">
<div class="boxtab">
<form action="http://joy.indivia.net/py/cgi-bin/OOpoetry.cgi" method="get">
<h>Python from a theoretical point of view</h>
<p>This interface aims to show and explain some communicative and theoretical aspects inscribed in the mechanisms behind a programming language. The programming language named Python is useful to achieve this goal as it provides an interpreter but it can even run source code as object code.</p>
<p>If you search for a command of the python programming language in the form below you will get the description of the logical and communicative process executed by it in the machine. The explanation can be of a logical, mathematical or semiological nature.</p><p> This is an attempt to enhance python programming language as a signifying language, which can execute not only algebrical processes but even what could be defined as meaning.</p><br />
<p>
<input id="example" name="stringx" value="type here"/> <input id="submit" type="submit" value="search"/></form></p>
</div>
<div id="gallery"><ul><li>
<a href="#thing_1"><img class="galleryitem" src="images/gallery1.jpg.jpg"/></a></li><li>
<a href="#thing_2"><img class="galleryitem" src="images/3188832812_573db43c7d.jpg"/></a></li><li>
<a href="#thing_3"><img class="galleryitem" src="images/3188858500_3437070b8f.jpg"/></a></li><li>
<a href="#thing_4"><img class="galleryitem" src="images/3188063503_e2b752444f.jpg"/></a></li><li>
<a href="#thing_5"><img class="galleryitem" src="images/3188039487_5fa50f0d02.jpg"/></a></li><li>
<a href="#thing_6"><img class="galleryitem" src="images/3188061317_d7a4bb7c27.jpg"/></a></li></ul></div>
<div id="thing_1" class="toggle">
<p>© by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_2" class="toggle">
<p>© by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_3" class="toggle">
<p>© by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_4" class="toggle">
<p>© by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_5" class="toggle">
<p>© by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div>
<div id="thing_6" class="toggle">
<p>© by flicr.com<br/><a href="http://tinyurl.com/cwtt2yq">See Photo</a></p>
</div></div></div></div>
</body>
</html>