5 Replies Latest reply on Nov 17, 2008 10:59 AM by bcovalt

    blue/purple frame around link after clicking

    bcovalt
      I've got a rollover ap div that is getting a blue (red when clicked on) and purple (when I go back) frame around the image. I've read around and have seen people say that you just need to set the border to "0", but in my properties it says "0".

      Anyone have an idea of how to get rid of this?
        • 1. Re: blue/purple frame around link after clicking
          Level 7
          Add this to your stylesheet:

          a img {border: none;}

          --
          Jo


          "bcovalt" <webforumsuser@macromedia.com> wrote in message
          news:gfrd81$qei$1@forums.macromedia.com...
          > I've got a rollover ap div that is getting a blue (red when clicked on)
          > and
          > purple (when I go back) frame around the image. I've read around and have
          > seen
          > people say that you just need to set the border to "0", but in my
          > properties it
          > says "0".
          >
          > Anyone have an idea of how to get rid of this?
          >
          > <body
          > onload="MM_preloadImages('images/enterB.png');MM_effectAppearFade('master',
          > 2000, 0, 100, false)">
          > <div id="master">
          > <div align="center"><img src="images/BlueWash_b.jpg" alt="welcomeBG"
          > width="1000" height="800" align="top" /></div>
          > <div id="apDiv1"><a href="resume.html" onmouseout="MM_swapImgRestore()"
          > onmouseover="MM_swapImage('enter','','images/enterB.png',1)"><img
          > src="images/enterA.png" name="enter" width="225" height="136" border="0"
          > id="enter" /></a></div>
          > </div>
          > </body>
          >


          • 2. blue/purple frame around link after clicking
            martcol Level 4
            You can put border="0" inside your image tag.

            < div align="center">
            < img src="images/BlueWash_b.jpg"
            alt="welcomeBG" width="1000" height="800" align="top" border="0"/></div>

            You can also do it with your CSS and if you google something
            about "remove borders img link css" it should turn up the way to do it.

            Sorry, I looked again at your code and you have the other
            image set as a link so, border="0" should go in that tag.
            Same principle though.

            The CSS way above is probably better.

            • 3. Re: blue/purple frame around link after clicking
              Level 7
              Don't do the border="0" thing. It's the wrong approach really, because -

              1. You would have to do it explicitly to all such images on the page, and
              2. It will cause your page to fail validation if you have elected to use an
              XHTML doctype

              The CSS approach is the right approach.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "martcol" <webforumsuser@macromedia.com> wrote in message
              news:gfrgvk$1lt$1@forums.macromedia.com...
              > You can put border="0" inside your image tag.
              >
              > < div align="center">< img src="images/BlueWash_b.jpg" alt="welcomeBG"
              > width="1000" height="800" align="top" border="0"/></div>
              >
              > You can also do it with your CSS and if you google something about "remove
              > borders img link css" it should turn up the way to do it.
              >
              >
              >

              • 4. Re: blue/purple frame around link after clicking
                bcovalt Level 1
                Thanks for those tips, but somehow it's not working for me, and I've tried both.
                Unless the CSS needs to be an external style sheet. Right now I'm just specifying at the top of my page.
                I'll attach my complete code so you can see.
                Thanks again.

                <title>Welcome Page</title>
                <style type="text/css">
                <!--
                body {
                background-color: #000000;
                margin-top: 0px;
                margin-left: 0px;
                padding-top: 0px;
                padding-left: 0px;
                }
                #apDiv1 {
                position:relative;
                left:0px;
                top:-280px;
                width:100%;
                height:136px;
                z-index:1;
                text-align: center;
                }
                a img {
                border:none;
                }
                -->
                </style>
                <script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
                <script type="text/javascript">
                <!--
                function MM_swapImgRestore() { //v3.0
                var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a )&&x.oSrc;i++) x.src=x.oSrc;
                }
                function MM_preloadImages() { //v3.0
                var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
                var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
                if (a
                .indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a ;}}
                }
                function MM_swapImage() { //v3.0
                var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
                if ((x=MM_findObj(a
                ))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
                }
                function MM_effectAppearFade(targetElement, duration, from, to, toggle)
                {
                Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
                }
                function MM_findObj(n, d) { //v4.01
                var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
                d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
                if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms [n];
                for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers
                .document);
                if(!x && d.getElementById) x=d.getElementById(n); return x;
                }
                //-->
                </script>
                </head>

                <body onload="MM_preloadImages('images/enterB.png');MM_effectAppearFade('master', 2000, 0, 100, false)">
                <div id="master">
                <div align="center"><img src="images/BlueWash_b.jpg" alt="welcomeBG" width="1000" height="800" align="top" /></div>
                <div id="apDiv1"><a href="resume.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','images/enterB.png',1)"><img src="images/enterA.png" name="enter" width="225" height="136" id="enter" /></a></div>
                </div>
                </body>
                </html>
                • 5. Re: blue/purple frame around link after clicking
                  bcovalt Level 1
                  One more note. When I removed both:
                  border=0
                  and the style at the top
                  a img {border:none;}
                  I noticed that I got a blue border around my image in my design view in Dreamweaver..which was not there before. So I thought I should point out that the border only shows up when I click on the image - which is contained in an ap div.
                  Not sure how that changes things, but thought I should point it out.