www.webdeveloper.com
Results 1 to 5 of 5

Thread: HTML Goodie's Dual Image Flip Script

  1. #1
    Join Date
    May 2004
    Location
    Wisconsin, USA
    Posts
    47

    Unhappy HTML Goodies' Dual Image Flip Script

    I was going to bug the guys at my host's support forum for help, but I decided they need a break from me. So now you get me and my usually easily solved problems. Woohoo.

    Anyway, I'm using the Dual Image flip script from HTMLGoodies much to my dismay (I like doing things myself, having to ask for help is very humbling ), which is supposed to
    1. Change the buttons on mouse over
    and
    2. Change another image (In my case the picture frame) when you hover over one of the buttons.

    My page does neither X_x I've tried to follow their direction best I could, and I just can't see why it's not working, and I've no idea what might be causing this problem (Bet you just love questions like these, eh?).

    Here's my page: http://stellmond.bravepages.com/testing.html

    I modified the code to try and get it to work with my four buttons, but I've also tried narrowing it down to two like it has it on HTMLGoodie's page, and still no success

    Page with two buttons: http://stellmond.bravepages.com/testing2.html

    When you put your mouse over one of the buttons, the status bar says there's an error, but I'm having problems understanding what it's trying to tell me.

    Any suggestions are appreciated by me and my little sister who I forced to run around the yard in a cape for a few hours, much to her annoyance, to get that perfect picture to use as part of this script, and would be very upset if all that work was for nothing. Thanks in advance >.<

    Edit: I guess I'll post the code too, I wasn't thinking too since the codes dealing with those images take up about 80% of the page, but I guess it might be easier to look at this way. Lesse how these tags work, I'm not used to this board...

    PHP Code:
    <script type="javascript">

    //Below is the code that pre-loads the graphics 
    {

    //These are the large images
    alt0 = new Image();
    alt0.src "/images/frame/castle.gif";

    alt1 = new Image();
    alt1.src "/images/frame/newbies.gif";

    alt2 = new Image();
    alt2.src "/images/frame/school.gif";

    alt3 = new Image();
    alt3.src "/images/frame/site.gif";

    alt4 = new Image();
    alt4.src "/images/frame/news.gif";

    //These are the first button graphics

    graphic1= new Image();
    graphic1.src "/images/buttons/newbies.gif";
    graphic1on = new Image();
    graphic1on.src "/images/buttons/newbies2.gif";

    //These are the second button graphics 

    graphic2= new Image();
    graphic2.src "/images/buttons/school.gif";
    graphic2on = new Image();
    graphic2on.src "/images/buttons/school2.gif";

    graphic3= new Image();
    graphic3.src "/images/buttons/site.gif";
    graphic3on = new Image();
    graphic3on.src "/images/buttons/site2.gif";

    graphic4= new Image();
    graphic4.src "/images/buttons/news.gif";
    graphic4on = new Image();
    graphic4on.src "/images/buttons/news2.gif";

    //This is the function that calls for
    //the change in the buttons 

    }
    function 
    imageChange(imageID,imageName,imageID2,imageName2) { 

    {
    document.images[imageID].src = eval(imageName ".src");
    document.images[imageID2].src = eval(imageName2 ".src");
    }

    }
    </script> 
    That's in the head.
    And here's where the stuff actually displays in the page:
    <table><tr><td><a href="/char.html" onMouseOver="imageChange('global','alt1','one','graphic1on')" onMouseOut="imageChange('global','alt0','one','graphic1')"><img src="/images/buttons/newbies.gif" name="one" /></a>&nbsp;&nbsp;&nbsp;
    <a href="http://www.javagoodies.com" onMouseOver="imageChange('global','alt2','two','graphic2on')" onMouseOut="imageChange('global','alt0','two','graphic2')">
    <img src="/images/buttons/school.gif" name="two" /></a></td><td>&nbsp;&nbsp;&nbsp;
    <a href="http://www.javagoodies.com" onMouseOver="imageChange('global','alt3','three','graphic3on')" onMouseOut="imageChange('global','alt0','three','graphic3')">
    <img src="/images/buttons/site.gif" name="three" /></a>&nbsp;&nbsp;&nbsp;
    <a href="http://www.javagoodies.com" onMouseOver="imageChange('global','alt4','four','graphic4on')" onMouseOut="imageChange('global','alt0','four','graphic4')">
    <img src="/images/buttons\news.gif" name="four" /></a>
    </td><tr><td>
    <img src="/images/frame/castle.gif" name="global" /></td><td>
    Last edited by Arqueete; 05-30-2004 at 01:04 AM.

  2. #2
    Join Date
    Mar 2004
    Location
    TN, United States
    Posts
    250
    No wonder it has been bothering you so much... Technically, it's not a screw up in the script or the html in the body tag... It's the <script> tag itself. The type is supposed to be "text/javascript" not "javascript". And some of those brackets(correct term? the {'s and }'s) are unnecessary. The first {, the first }, the third {, and second }. You don't have to surround the var's with brackets, and you only need to surround a function with one set of brackets. You also use brackets on statements that have more than one line of code that needs to be inside it. It wouldn't hurt adding comment tags (<!-- and -->, but inside the script tag --> would be //-->) inside your script tag so really old browsers don't see it (it's a good habbit) Your code should look like this...
    PHP Code:
    <script type="text/javascript">
    <!--
    //Below is the code that pre-loads the graphics

    //These are the large images
    alt0 = new Image();
    alt0.src "/images/frame/castle.gif";

    alt1 = new Image();
    alt1.src "/images/frame/newbies.gif";

    alt2 = new Image();
    alt2.src "/images/frame/school.gif";

    alt3 = new Image();
    alt3.src "/images/frame/site.gif";

    alt4 = new Image();
    alt4.src "/images/frame/news.gif";

    //These are the first button graphics

    graphic1= new Image();
    graphic1.src "/images/buttons/newbies.gif";
    graphic1on = new Image();
    graphic1on.src "/images/buttons/newbies2.gif";

    //These are the second button graphics

    graphic2= new Image();
    graphic2.src "/images/buttons/school.gif";
    graphic2on = new Image();
    graphic2on.src "/images/buttons/school2.gif";

    graphic3= new Image();
    graphic3.src "/images/buttons/site.gif";
    graphic3on = new Image();
    graphic3on.src "/images/buttons/site2.gif";

    graphic4= new Image();
    graphic4.src "/images/buttons/news.gif";
    graphic4on = new Image();
    graphic4on.src "/images/buttons/news2.gif";

    //This is the function that calls for
    //the change in the buttons

    function imageChange(imageID,imageName,imageID2,imageName2){
        
    document.images[imageID].src = eval(imageName ".src");
        
    document.images[imageID2].src = eval(imageName2 ".src");}
    //-->
    </script> 
    Hope this helps, and hopefully her hard work wasn't for nothing, lol. Good luck to you all.

    Tage
    Last edited by Tage; 05-30-2004 at 03:02 AM.

  3. #3
    Join Date
    May 2004
    Location
    Wisconsin, USA
    Posts
    47
    I knew it was something simple like that It's always just little things I miss. I don't know why I didn't think text/javascript, since style sheets are always text/css.

    I never touched the brackets, they were that way when I got it... Brackets confuse me so I try and avoid touching them for fear I'll mess something up and not know what I did (Like now )

    Anyway, enough of me kicking myself, I'll go see if that works. Thank you

    Edit: Yaaaaaaay!
    Last edited by Arqueete; 05-30-2004 at 03:22 AM.

  4. #4
    Join Date
    Mar 2004
    Location
    TN, United States
    Posts
    250
    No problem I'll do a very quick explanation of brackets...
    Use them to surround functions
    Code:
    function functionName(){
    codeHere}
    Use them to surround statements that have more than one line to enclose, like if statements
    Code:
    if(1==1){
    doThis;
    andThis}
    But if there is only one line, you don't need to (..supposedly. I use them anyway )
    Code:
    if(1<2)onlyDoThis;
    There you go.

    Tage

  5. #5
    Join Date
    May 2004
    Location
    Wisconsin, USA
    Posts
    47
    Thanks

Thread Information

Users Browsing this Thread

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

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