Newsgroup: it.comp.lang.javascript
Titolo: mouseout event non funziona

This is the code:
 
<?php
require_once("tabs.php");
?>
<!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">
	   document.observe('dom:loaded', function(){
		    $('thing_1').on('mouseover', 'img', function(evt, elm){
				evt.stop();
				$('thing_1').replace('<div id="thing_1" class="gallerylink"><p><a href="
http://tinyurl.com/cwtt2yq
">See Photo</a></p></div>');
});
			$('thing_2').on('mouseover', 'img', function(evt, elm){
				evt.stop();
				$('thing_2').replace('<div id="thing_2" class="gallerylink"><p><a href="
http://tinyurl.com/cwtt2yq
">See Photo</a></p></div>');
 
});
			$('thing_3').on('mouseover', 'img', function(evt, elm){
				evt.stop();
				$('thing_3').replace('<div id="thing_3" class="gallerylink"><p><a href="
http://tinyurl.com/cwtt2yq
">See Photo</a></p></div>');
 
});		
			$('thing_4').on('mouseover', 'img', function(evt, elm){
				evt.stop();
				$('thing_4').replace('<div id="thing_4" class="gallerylink"><p><a href="
http://tinyurl.com/cwtt2yq
">See Photo</a></p></div>');
 
});
			$('thing_5').on('mouseover', 'img', function(evt, elm){
				evt.stop();
				$('thing_5').replace('<div id="thing_5" class="gallerylink"><p><a href="
http://tinyurl.com/cwtt2yq
">See Photo</a></p></div>');
});	
			$('thing_6').on('mouseover', 'img', function(evt, elm){
				evt.stop();
				$('thing_6').replace('<div id="thing_6" class="gallerylink"><p><a href="
http://tinyurl.com/cwtt2yq
">See Photo</a></p></div>');
 
});
			$('thing_1').on('mouseout', 'a', function(evt, elm){
				evt.stop();
				$('thing_1').replace('<img id="thing_1" class="galleryitem" src="images/gallery1.jpg.jpg" onmouseover="showResult1();" style="position:relative; top:0px; left: 0px;"/>');
});
			$('thing_2').on('mouseout', 'a', function(evt, elm){
				evt.stop();
				$('thing_2').replace('<img id="thing_2" class="galleryitem" src="images/
3188832812
_573db43c7d.jpg" onmouseover="showResult2();"/>');
});
			$('thing_3').on('mouseout', 'a', function(evt, elm){
				evt.stop();
				$('thing_3').replace('<img id="thing_3" class="galleryitem" src="images/
3188858500
_3437070b8f.jpg" onmouseover="showResult3();"/>');
});
			$('thing_4').on('mouseout', 'a', function(evt, elm){
				evt.stop();
				$('thing_4').replace('<img id="thing_4" class="galleryitem" src="images/
3188063503
_e2b752444f.jpg" onmouseover="showResult4();"/>');
});
			$('thing_5').on('mouseout', 'a', function(evt, elm){
				evt.stop();
				$('thing_5').replace('<img id="thing_5" class="galleryitem" src="images/
3188039487
_5fa50f0d02.jpg" onmouseover="showResult5();"/>');
});
			$('thing_6').on('mouseout', 'a', function(evt, elm){
				evt.stop();
				$('thing_6').replace('<img id="thing_6" class="galleryitem" src="images/
3188061317
_d7a4bb7c27.jpg" onmouseover="showResult6();"/>');
});
});			
							</script>
<title>Python Speculative Interface</title>
 
</head>
<body>
 
 
<div class="main"><div id="header">
<?php tabs_start(); ?><div class="main">
		<img class="logo" src="images/psi.png" /></div>
<?php tab( "Concept"); ?>
 
			<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"/>&nbsp;&nbsp;<input id="submit" type="submit" value="search"/></form></p>						
					</div>
<?php tab( "Wiki" ); ?>
		<img class="logo" src="images/psi.png" />
		<div class="main">
			<div class="containere">
				<div class="boxtab">
					<h>Discussing about code and poetry</h>
					<p>The various aspects of python programming language, and more in general of the object 
					oriented programming paradigm as a poetry, are discussed inside this 
					<a href="
http://joy.indivia.net/wiki/index.php
">wiki</a></p>
					<p>Every command will be provided with a discussion about the most trustworthy interpretation 
					you can give of it, and the execution it causes inside the machine. We will end at the level of 
					binary alphabet if it will be necessary. The final definition of every command will be connected 
					to this interface.</p>
<p>	</p>				
						</div>
 
<?php tabs_end(); ?>
						<ul><li>
							<img id="thing_1" class="galleryitem" src="images/gallery1.jpg.jpg" style="position:relative; top:0px; left: 0px;"/>
							</li><li>
							<img id="thing_2" class="galleryitem" src="images/
3188832812
_573db43c7d.jpg"/>
								</li><li>
							<img id="thing_3" class="galleryitem" src="images/
3188858500
_3437070b8f.jpg"/>
							</li><li>
							<img id="thing_4" class="galleryitem" src="images/
3188063503
_e2b752444f.jpg"/>
							</li><li>
							<img id="thing_5" class="galleryitem" src="images/
3188039487
_5fa50f0d02.jpg"/>
							</li><li>
							<img id="thing_6" class="galleryitem" src="images/
3188061317
_d7a4bb7c27.jpg"/>
							</li></ul>
							</div></div></div>
 
</body>
</html>
 
Non è troppo lungo, però ho anche aggiunto un event listener, non dovrebbe dare problemi, e invece riconosce solo le funzioni mouseover e non quelle mouseout...
:(
Qualcuno mi sa aiutare?
Grazie.
tab1ta

 Qualcuno mi sa aiutare?
 
Non conosco molto prototype, ma intuendo quello che cerchi di fare e 
guardando questo:
 
$('thing_1').on('mouseover', 'img', function(evt, elm){
	evt.stop();
	$('thing_1').replace('<div id="thing_1" class="gallerylink"><p><a 
href="
http://tinyurl.com/cwtt2yq
">See Photo</a></p></div>');
});
 
mi viene da pensare che se su mouseover spazzi via con replace 
l'elemento thing_N (al quale avevi associato anche l'evento mouseout) 
per rimpiazzarlo con qualcos'altro è corretto che poi questo non scatti: 
il nuovo thing_N creato al volo non ha eventi associati.
 
L'evento si aggancia agli elementi del DOM corrispondenti al selettore 
(l'ID, nel tuo caso) che erano presenti quando è stata eseguita 
l'associazione, non si estendono automaticamente a tutto quello che ha 
quell'ID che viene aggiunto successivamente.
 
Se proprio vuoi seguire questa strada io penserei ad un elemento 
contenitore, 
p.es
. un div che diventerà il nuovo thing_N e che conterrà 
a seconda dei momenti il div class="gallerylink" oppure l'img. Al div 
esterno agganci mouseover / mouseout e poi negli eventi cambi il 
contenuto invece che eliminare e ricreare anche il contenitore.
 
Ma piuttosto che cambiare i contenuti io creerei già in pagina entrambi 
gli elementi (il div gallerylink e l'immagine) e poi nell'evento mi 
limiterei a gestirne la visibilità: uno dei due nasce nascosto (es. 
style="display:none") e poi su over/out li inverti. In questo modo tra 
l'altro il link "See photo" che adesso apparirebbe solo su over è già 
nel markup ed è quindi indicizzabile, cosa che non sarebbe nell'altro caso.
 
-- 
r--r--r--