Gooey Menu Script

[chadlexmorgan]

The DD script is Jquery Gooey Menu:http://www.dynamicdrive.com/dynamicindex1/gooeymenu.htm

I am wanting to use the gooeymenu 4 except instead of text using images. Can this be done? What I have tried so far the orange box does not go around the image but slightly lower and to the right. I have tried adjusting the css file but nothing I've tried has worked. Thank you for any suggestions!

[jscheuer1]

Following the instructions on the demo page I set up the four menus. I then created an image from one of the menu items:



I called it csscodes.png and edited the markup for the fourth menu like so (addition/change highlighted):

<ul id="gooeymenu4" class="framemenu">
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/"><img style="vertical-align: middle; border-width: 0;" src="csscodes.png"  alt="original image" title=""></a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.javascriptkit.com/">JavaScript</a></li>
<li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu4', snapdelay:500})
</script>

Works good here. The trick is the vertical-align middle; - the border width thing is because some browsers will by default put a border around any image that's linked. Another key factor is that the image is about the size that the text was. Also I made the image's background transparent. That allows the outline to show through. But I could probably also have made the image a little less tall and that probably would have worked as well for that part.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.