Changing border colour on click?

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • cmcdermo
    New Member
    • May 2007
    • 27
    #16
    many thanks for your help . . . but still no border colour change ??

    <script language="javas cript">

    var highlight_color = '#336699';

    function toggle_highligh t(id) {

    var images = document.getEle mentsByTagName( 'img');

    for (var i = 0; i < images.length; i++) {

    var image = images[i];
    image.style['border-Color'] = image.id == id ? highlight_color : '';

    }

    }

    </script>







    <body>



    <img src="imagescanv as/canvas_taupe_sm all.gif" name="taupe_sma ll" id="taupe_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onClick="toggle _highlight(this .id);"/>

    <img src="imagescanv as/canvas_pink_sma ll.gif" onClick="toggle _highlight(this .id);" style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_smal l" id="pink_small "/>

      Comment

      • gits
        Recognized Expert Moderator Expert
        • May 2007
        • 5390
        #17
        ... and change the line

        image.style['border-Color'] = image.id == id ? highlight_color : '';

        to:

        image.style.bor derColor = image.id == id ? color : 'white';

        then it works ... sorry for not testing it ... i'm at the office right now ... and have little time ...

        kind regards ...

          Comment

          • cmcdermo
            New Member
            • May 2007
            • 27
            #18
            I appreciate your help.

            but still not working, i wish i could fix this myself but i'm pretty novice at this.

            I get 'color' is undefined.

            <script language="javas cript">

            var highlight_color = '#336699';

            function toggle_highligh t(id) {

            var images = document.getEle mentsByTagName( 'img');

            for (var i = 0; i < images.length; i++) {

            var image = images[i];
            image.style.bor derColor = image.id == id ? color : 'white';


            }

            }

            </script>

              Comment

              • gits
                Recognized Expert Moderator Expert
                • May 2007
                • 5390
                #19
                ... yes ... aaaaargh ... whats wrong today ;) use highlight_color instead of color in the last changed line ... color = undefined gives you that hint

                kind regards

                  Comment

                  • gits
                    Recognized Expert Moderator Expert
                    • May 2007
                    • 5390
                    #20
                    explaination:

                    ... have a close look at the function: it only receives an id ... the one of the image that should colorchange ... we pass it from onclick with this.id ...

                    the first solution received the color as well ... and set it to the image-style ... the second and the actual one uses a global variable highlight_color instead of color ... and the function doesn't know about a variable color any longer ... so javascript tells you that color is undefined ...

                      Comment

                      • cmcdermo
                        New Member
                        • May 2007
                        • 27
                        #21
                        sorry, but i'm completely lost.

                          Comment

                          • gits
                            Recognized Expert Moderator Expert
                            • May 2007
                            • 5390
                            #22
                            Originally posted by cmcdermo
                            sorry, but i'm completely lost.
                            the line:

                            image.style.bor derColor = image.id == id ? color : 'white';

                            has to be:

                            image.style.bor derColor = image.id == id ? highlight_color : 'white';

                              Comment

                              • cmcdermo
                                New Member
                                • May 2007
                                • 27
                                #23
                                Thank you very much for you time and patience :-)

                                  Comment

                                  • gits
                                    Recognized Expert Moderator Expert
                                    • May 2007
                                    • 5390
                                    #24
                                    ... at last we have it ;) ... and now here is the working version:

                                    [HTML]
                                    <script>
                                    var highlight_color = '#336699';

                                    function toggle_highligh t(id) {
                                    var images = document.getEle mentsByTagName( 'img');

                                    for (var i = 0; i < images.length; i++) {
                                    var image = images[i];

                                    image.style.bor derColor = image.id == id ? highlight_color : 'white';
                                    }
                                    }
                                    </script>

                                    <img src="images/canvas_colours/images/canvas_taupe_sm all.gif" name="taupe_sma ll" id="taupe_small " style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" onClick="toggle _highlight(this .id);"/>

                                    <img src="images/canvas_colours/images/canvas_pink_sma ll.gif" onClick="toggle _highlight(this .id);" style="cursor:h and; border-Style:solid; border-Width:2px; border-Color:white;" name="pink_smal l" id="pink_small "/>
                                    [/HTML]

                                      Comment

                                      Previous 1 2 template Next
                                      Working...