Databases
StackOverflow2013
Postsdbo
POchange mouse out event parameter in onclick
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POchange mouse out event parameter in onclick
    text
    copied!<p>I have the html structure like </p> <pre><code>&lt;tr&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="1" href="#"&gt; &lt;img alt="ebony" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/ebony2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/ebony2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/ebony1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="2" href="#" class="selected"&gt; &lt;img alt="iceglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/iceglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/iceglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/iceglass2.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="3" href="#"&gt; &lt;img alt="glimmerglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/glimmerglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/glimmerglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/glimmerglass1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="4" href="#"&gt; &lt;img alt="purpleglass" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/purpleglass2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/purpleglass2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/purpleglass1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="5" href="#"&gt; &lt;img alt="shorestone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/shorestone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/shorestone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/shorestone1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="6" href="#"&gt; &lt;img alt="lavastone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/lavastone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/lavastone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/lavastone1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="7" href="#"&gt; &lt;img alt="moonstone/dark" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-dark1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="8" href="#"&gt; &lt;img alt="moonstone/pale" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone-pale2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/moonstone-pale2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/moonstone-pale1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;td valign="top"&gt; &lt;div class="thumbnails"&gt; &lt;a id="9" href="#"&gt; &lt;img alt="pebblestone" rel2="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg" onmouseout="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg')" rel1="http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/pebblestone2.jpg" onmouseover="swap_image( event, 'http://localhost/sample/wp-content/gallery/fire-objects-mouseover-thumb-images/pebblestone2.jpg')" src="http://localhost/sample/wp-content/gallery/fire-objects-thumb-images/pebblestone1.jpg"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/td&gt; &lt;/tr&gt; </code></pre> <p>and i have added a coding to change the image on mouse over </p> <pre><code>function swap_image( event, image_url ) { var e = event || window.event; if( e.target ) var node = e.target; else var node = e.srcElement; if( node ) if( node.tagName == "IMG" ){ node.src = image_url; } else{ node.getElementsByTagName("img")[0].src = image_url; } return false; } </code></pre> <p>and i want to display the image which is selected for that i want to change the mouseout function parameter. Every thing is working fine but the mouseout function param is not changed</p> <pre><code>jQuery(".thumbnails a").live('click' ,function(){ var selectedclass = jQuery('#portfolio tr td .thumbnails a').hasClass('selected'); //alert(selectedclass); if(selectedclass) { var small_img = jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('rel2'); var big_img = jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('rel1'); jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('src',small_img); jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('onmouseover',swap_image( 'event',big_img)); jQuery('#portfolio tr td .thumbnails .selected').find('img').attr('onmouseout',swap_image( 'event',small_img)); jQuery('#portfolio tr td .thumbnails .selected').removeClass('selected'); } var img_url = jQuery(this).find('img').attr('rel1'); jQuery(this).find('img').attr('src',img_url); jQuery(this).find('img').bind('onmouseout',swap_image( 'event',img_url)); jQuery(this).addClass('selected'); id = jQuery(this).attr("id"); jQuery("#large-img img").hide(); jQuery('#large_'+id).show(); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload