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
<view-source: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
<view-source:http://localhost/py/index.php?tabindex=0>">Concept
</a> </div>
<div class="tab"> <a
href="/py/index.php?tabindex=1
<view-source:http://localhost/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
<view-source:http://localhost/py/images/psi.png>" /></div>
<div class="containere"> <div
class="boxtab"> <form
action="http://joy.indivia.net/py/cgi-bin/OOpoetry.cgi
<view-source: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
<view-source:http://localhost/py/index.php#thing_1>"><img class="galleryitem"
src="images/gallery1.jpg.jpg
<view-source:http://localhost/py/images/gallery1.jpg.jpg>"/></a></li><li>
<a href="#thing_2
<view-source:http://localhost/py/index.php#thing_2>"><img class="galleryitem"
src="images/3188832812_573db43c7d.jpg
<view-source:http://localhost/py/images/3188832812_573db43c7d.jpg>"/></a></li><li>
<a href="#thing_3
<view-source:http://localhost/py/index.php#thing_3>"><img class="galleryitem"
src="images/3188858500_3437070b8f.jpg
<view-source:http://localhost/py/images/3188858500_3437070b8f.jpg>"/></a></li><li>
<a href="#thing_4
<view-source:http://localhost/py/index.php#thing_4>"><img class="galleryitem"
src="images/3188063503_e2b752444f.jpg
<view-source:http://localhost/py/images/3188063503_e2b752444f.jpg>"/></a></li><li>
<a href="#thing_5
<view-source:http://localhost/py/index.php#thing_5>"><img class="galleryitem"
src="images/3188039487_5fa50f0d02.jpg
<view-source:http://localhost/py/images/3188039487_5fa50f0d02.jpg>"/></a></li><li>
<a href="#thing_6
<view-source:http://localhost/py/index.php#thing_6>"><img class="galleryitem"
src="images/3188061317_d7a4bb7c27.jpg
<view-source:http://localhost/py/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
<view-source: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 <view-source: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
<view-source: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 <view-source: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
<view-source: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 <view-source:http://tinyurl.com/cwtt2yq>">See
Photo</a></p>
</div></div></div></div></body></html>
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/prototype-scriptaculous/-/uxHIYaSumLsJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
