Results 1 to 2 of 2

Thread: Animated Collapsible DIV - broken images

  1. #1
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Animated Collapsible DIV - broken images

    Using : animated collapsible div v2.4

    Link to site : http://www.cwitsolutions.com/sample/test.html

    Basically I've got all the toggles working and everything appears fine when i preview it in Dreamweaver CS5. But when I upload the page to my server all the images are broken. I've checked all of the urls. Everything is correct. I've even tried using the full image path. Any one have any issues with this?? Feel free to check out the code on the page.... Thanks for any help guys (or girls.)....

    [code]

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CWIT Solutions</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/animatedcollapse.js"></script>
    <script type="text/javascript">
    animatedcollapse.addDiv('maintoggle', 'speed=400,fade=0,group=links')
    animatedcollapse.addDiv('aboutustoggle', 'speed=400,fade=0,group=links')
    animatedcollapse.addDiv('graphicdesigntoggle', 'speed=400,fade=0,group=links')
    animatedcollapse.addDiv('webdesigntoggle', 'speed=400,fade=0,group=links')
    animatedcollapse.addDiv('computersupporttoggle', 'speed=400,fade=0,group=links')
    animatedcollapse.addDiv('contacttoggle', 'speed=400,fade=0,group=links')
    animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
    //$: Access to jQuery
    //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
    //state: "block" or "none", depending on state
    }
    animatedcollapse.init()
    </script>


    </head>

    <body>

    <div id="container" align="center">
    <div id="header">
    <div><a href="#" rel="toggle[maintoggle]"><img src="images/header.jpg" width="700" height="154" alt="header.jpg" border="0" /></a></div>
    </div>


    <div id="container2" align="center" >
    <div id="maintoggle" class="toggle" align="center">
    ALL THE INFO GOES HERE
    </div>

    <div id="aboutus">
    <div><a href="#" rel="toggle[aboutustoggle]"><img src="images/aboutus.jpg" width="700px" height="40px" alt="aboutus.jpg" "border="0" /></a></div>
    <div id="aboutustoggle" class="toggle" align="center">
    ALL THE INFO GOES HERE
    </div>
    </div>



    <div id="graphicdesign">
    <div><a href="#" rel="toggle[graphicdesigntoggle]"><img src="images/graphicdesign.jpg" width="700px" height="40px" alt="graphicdesign.jpg" border="0" /></a></div>
    <div id="graphicdesigntoggle" class="toggle" align="center">
    ALL THE INFO GOES HERE
    </div>
    </div>


    <div id="webdesign">
    <div><a href="#" rel="toggle[webdesigntoggle]"><img src="images/webdesign.jpg" width="700px" height="40px" alt="webdesign.jpg" border="0" /></a></div>
    <div id="webdesigntoggle" class="toggle" align="center">
    ALL THE INFO GOES HERE
    </div>
    </div>


    <div id="computersupport">
    <div><a href="#" rel="toggle[computersupporttoggle]"><img src="images/computersupport.jpg" width="700px" height="40px" alt="computersupport.jpg" border="0" /></a></div>
    <div id="computersupporttoggle" class="toggle" align="center">
    ALL THE INFO GOES HERE
    </div>
    </div>
    <div id="contact">
    <div><a href="#" rel="toggle[contacttoggle]"><img src="images/contact.jpg" width="700px" height="40px" alt="contact.jpg" border="0" /></a></div>
    <div id="contacttoggle" class="toggle" align="center">
    ALL THE INFO GOES HERE
    </div>
    </div>

    </div>
    </div>

    </body>
    </html>

    [code]
    Last edited by geofffranklin1; 11-10-2010 at 08:21 PM.

  2. #2
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I fixed the issue..... I was missing the image link toggle....

    [code]

    <div><a href="#" rel="toggle[maintoggle]" data-openimage="images/header.jpg" data-closedimage="images/header.jpg"><img src="images/header.jpg" width="700" height="154" alt="header.jpg" border="0" /></a></div>

Bookmarks

Posting Permissions

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