PDA

View Full Version : Roll Over Image Link ( Annoying Squares )



vynum
Jul 19th, 2009, 04:33 PM
I have a small problem and I use to know how to fix it.

I have created all my links on my main index page with image roll overs. They have 3 states;


Bimage0_normal = new Image();
Bimage0_normal.src = "images/index_C4_R2.jpg";
Bimage0_over = new Image();
Bimage0_over.src = "images/index_C4_R2_1.jpg";
Bimage0_click = new Image();
Bimage0_click.src = "images/index_C4_R2_2.jpg";

The problem is when I roll over and "ONclick" the image link a "RED" square appears.

http://img190.imageshack.us/img190/3776/onclickredsquare.png

Then when I "OFFclick" the image, I get a "PURPLE" square.

http://img40.imageshack.us/img40/157/offclickpurplesquare.png

How do I get rid of these two annoying squares?

I know it has something to do with 'active' and 'visited' links, but I don't know were in dreamweaver to change this. I already looked in windows>behaviors but can't seem to find anything. or is there some html or java/script code I could use to disable the squares?

I use firefox.

vynum

abduraooft
Jul 19th, 2009, 05:51 PM
It's due to the the outline property, which is used for enhancing the accessibility. You may set outline:none; to your links, see http://webaim.org/blog/plague-of-outline-0/

Bigstacks077
Jul 19th, 2009, 07:10 PM
a {
outline:none;
}

vynum
Jul 19th, 2009, 08:03 PM
Thanks for responding guys. Both of your suggestions worked great!

1st suggestion by abduraooft located here Here (http://webaim.org/blog/plague-of-outline-0/) works:


/* remember to define focus styles! */
:focus {
outline: 0;
}

2nd Suggestion by Bigstacks077 works as well:


a {
outline:none;
}

So for others wondering just were to place this I placed it in my CSS declared in my index page itself:


<style type="text/css">
<!--
body {
background-color: #0C2D40;
}
/* postion for IFrame */
#MainBody {
position:absolute;
left:224px;
top:254px;
width:769px;
height:505px;
z-index:1;
background-color: #0C2D40;
overflow: auto;
}
#apDiv1 {
position:absolute;
left:223px;
top:251px;
width:770px;
height:541px;
z-index:1;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}
-->
</style>

If you noticed I tried setting all my "text-decorations" to none;

link
visited
hover
active

And that didn't work, so that is what let me to this forum for help. Now i can leave the text-decoration there or remove it, it makes no difference in my situation because I have no text to decorate..:)

So, in in closing both code snippets worked as I tried both of them.


Thanks for the tip guys

P.S. This only worked for Firefox, IE7 never displayed the red and purple squares anyways.

ollieking
Jul 20th, 2009, 08:49 AM
great information on that!! Always good that there is more than one solution posted.