AnyLink JS Drop Down Menu on top of an image

[ronnie3912]

The script iam using is Ultimate Fade-in slideshow (v2.4)


How would I be able to put a table (of arranged headings/texts) on top of this slide show?


I know how to put text ontop of a image which i specify as background but with this slideshow, the image links are contained in the header not in the body of the page.

[jscheuer1]

Set the z-index of the text's container to over 1001 and make sure the text's container is positioned either relatively or absolutely over the slideshow.

If you want more help:

• Do you want text over it, or to drop the menu over it?
  
  
• Please post a link to the demo page here on Dynamic Drive of the menu script you're using.
  
  
• Please post a link to a page on your site that contains the problematic code so we can check it out.

[ronnie3912]

I would like to have this drop down menu sit on top of the image. something similar to this page http://reluctantpanther.com/


I have implemented the drop down menu and image slide show script on my page

however, they do not overlap but are only adjacent to each other.




what i want is to have drop down links on the top of the photo and a slideshow for the photos. I am having trouble implementing the 2 scripts together.

here is my page

thanks for the help.

[ronnie3912]

div.table{
	z-index:1002;
	position:absolute;
	width:500px;
	left: 206px;
	top: 199px;
}

div.fadeshow2{
	z-index:999;
	
	width:622px;
	left: 188px;
	top: 170px;
	height: 205px;
}

 <div class="table">
      <div class="fadeshow2">
        <table width="100%" height="30" border="0">
	  <tr>
	   <h2>
        <td width="56"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu1"></a></td>
	    <td width="112"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu2"></a></td>
	    <td width="91"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu3"></a></td>
	    <td width="92"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu4"></a></td>
	    <td width="116"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu5"></a></td>
	    <td width="100"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu6"></a></td>
	    <td width="103"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu7"></a></td>
	    <td width="100"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu8"></a></td>
	    <td width="102"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu9"></a></td>
	    <td width="76"><a href="http://www.dynamicdrive.com" class="menuanchorclass" rel="anylinkmenu10"></a></td>
      </h2>
      </tr></table>
 

<div id="fadeshow2"></div>

<div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
<a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" style="border-width:0" /></a>  <span class="status" style="margin:0 50px; font-weight:bold"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" style="border-width:0" /></a>
</div>

</div>
</div>
 
      
</div>

This is what i have done, i think i am having problems of linking the div id tag

[jscheuer1]

As far as I can see, you've achieved that effect, such that it is on your demo, cuiwei.byethost15.com/Untitled-1.html page. However, there are no scripts. So the first step would be to add the scripts.

The page you refer to that has the effect you want uses jQuery Suckerfish Drop Downs (possibly http://users.tpg.com.au/j_birch/plugins/superfish/) for the menu and Galleria (also jQuery based, modified to use background images) for the slideshow.

In addition to that, the slideshow is absolutely positioned behind the menu. That's an oversimplification, but is part of how the effect is achieved.

So the menu script would have to be configured, at least as far as content and css goes, and the slideshow script at least as far as its markup and styles go. Then the two would need to be laid out as mentioned in relation to each other.

Quite a project. This could possibly be done with Dynamic Drive scripts instead. I'm not sure if the AnyLink JS Drop Down Menu is the best choice for the menu. But the slideshow you mention - Ultimate Fade-in slideshow (v2.4), which would require modification could be employed. Galleria looks to be more easily adapted for this purpose though.

So, this is more like "Looking for such a script or service" or "General Paid Work Requests" than help with a specific Dynamic Drive script.

On the other hand, if you were to set this up with some scripts, and just needed a little help tweaking things, if they were Dynamic Drive scripts, then you could post about it here in this forum, or if it used non-Dynamic Drive scripts - it could go in the JavaScript forum or perhaps the CSS forum, depending upon what the main problem was.

So please, only open a new thread in here in "Dynamic Drive scripts help" if you have this thing mostly setup using only Dynamic Drive scripts and just need a little guidance. Otherwise - find an appropriate forum for it and post one new thread there.

If you do open a new thread in another forum. Open only one new thread in only one other forum. If you open up multiple threads, things will get really confusing, and you may get an infraction for it. It's a general guideline here - only one thread at a time for a particular issue.

To avoid said confusion, I'm closing this thread.