[lancealot]

Hi

I am working on a website with a jcarousel set to circular mode.
When you hover over the pictures there should be a hidden div showing up.

This works fine for the first round of jcarousel but when the pictures are repeated it doesnt.

I Guess it is because jcarousel makes up new id's for the new pictures (or divs).
But I am not really familiar with javascript in general so it might be something totally different as well.

Here is a jcarousel-part and the script for showing and hiding visibility:

 
	
  (...)


	jQuery(document).ready(function() {
   	 	jQuery('#mycarousel').jcarousel({
		auto: 5,
		wrap: 'circular',
		scroll: 1,
        initCallback: mycarousel_initCallback,
		});
	});

    </script>
    
    <script>
	
 	function show(Zahl) {
		document.getElementById('showtext'+Zahl).style.visibility = 'visible'
	}
	function hide(Zahl) {
		document.getElementById('showtext'+Zahl).style.visibility = 'hidden'
	}
    
    </script>

jcarousel gets included in html-file:

<ul id="mycarousel">

<li>
<a href="#" onmouseover="show(1)" onmouseout="hide(1)">
<div class="preview_box">	
<div class="preview_image"><img src="first.jpg"></div>
<div class="preview_text" id="showtext1"><h1>Headline</h1></div>
</div>
</a>
</li>   

<li>
<a href="#" onmouseover="show(2)" onmouseout="hide(2)">
<div class="preview_box">	
<div class="preview_image"><img src="second.jpg"></div>
<div class="preview_text" id="showtext2"><h1>Headline</h1></div>
</div>
</a>
</li>  

<li>
<a href="#" onmouseover="show(3)" onmouseout="hide(3)">
<div class="preview_box">	
<div class="preview_image"><img src="third.jpg"></div>
<div class="preview_text" id="showtext3"><h1>Headline</h1></div>
</div>
</a>
</li>  

</ul>

Maybe theres some other way than working with the show- and hide-functions?
And is jcarousel repeating everything inside the <li>-tags or just getting the <img>-tag?

Hope someone here can help me out with this.

[rajesh.kakawat]

Hope this will help you
you can do in this way
I am just showing you changed code in shortcut

javascript code :

<script>
 function show(obj) {
   $($(obj).find(".preview")).show()
 }
 function hide(obj) {
   $($(obj).find(".preview")).hide()
 }
</script>

html code :

<a href="#" onmouseover="show(this)" onmouseout="hide(this)">
  <div class="preview_box">	
     <div class="preview_image">
        <img src="first.jpg">
     </div>
     <div class="preview">
        <h1>Headline</h1>
      </div>
   </div>
</a>