I'm a bit rusty on my javascript.

I have an image map where I have rollovers working. It's a pie shaped map and the slices pop out on rollover. That part is working.

However, I'd like to get a fade in effect for the pop out.

  • The site is a joomla site with jquery helper running
  • I'm calling the image map from the img tag

I am preloading the images

<script language="javascript" type="text/javascript">// <![CDATA[
     Image0 = new Image(800, 659)
		   Image0.src = "images/360.jpg"
		 Image1 = new Image(800, 659)
		   Image1.src = "/images/360-slice-1.jpg"

// ]]></script>
I have these functions to display the pop out.

<script language="javascript" type="text/javascript">// <![CDATA[

(code for slices 2-6)

		function slice1() {
			document.circle.src = Image1.src;
			return true;
		function original() {
			document.circle.src = Image0.src;
			return true;
// ]]></script>

My image map looks like

<map name="360-map"> 
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:chris -->
<area shape="poly" coords="397,278,476,140,530,182,565,238,577,284,580,318,421,319,415,293" alt="National Training Team" href="/images/360-slice-1.jpg" onmouseover="slice1()" onmouseout="original()">

code for slices 2-6

<AREA SHAPE="default" nohref>

I tried a lot of different combos of fadein commands but just can't seem to make it work.


  • Can anyone help me out with this?
  • Jquery helper is running on Joomla. As far as I know, the jquery librarys are loaded for each article (page) . Is there a way to test for jquery if I need it??

Thanks - I'd really appreciate any ideas...