dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Javascript fadein question

Hybrid View

  1. #1
    Join Date
    Nov 2013
    Posts
    1

    Javascript fadein question

    Hello

    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

    Code:
    <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"
    etc...
    
    // ]]></script>
    I have these functions to display the pop out.

    Code:
    <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

    Code:
    <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>
     </map></p>
    <p>&nbsp;</p>

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

    Questions

    • 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...

    chris

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,589
    Sounds like you need some CSS to do that, I did have a link to CSS3 and transitions, try googling about CSS tricks and transitions.
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,589
    Here you go, this might be the thing to help you http://css-tricks.com/almanac/properties/t/transition/
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,589
    If your post falls off the page, bump it. ...
    Please remember to wrap any code you have in forum tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles