Preserved Topic: How do I make an anchor image not seem selected?

I have an ancor image that switches a frame. The button is round, with a matching square of bacground around it to make it blend in.
(Its also in a table I dont know if this makes a difference)

When you click on the button, the jpeg (or perhaps the whole cell in the table) gets a fine grey line around it, showing its got the "focus". If I click on another button, the focus switches to that one. (and hence the fine grey surrounding line).

Is there anything I can do to NOT show this line? something in onclick= or something that will allow me my same functionality but not the highlighting of the jpeg. It look sloppy, especialy since the jpeg (or table cell) is square, and the button the picture represents is supposed to be round.

Thanks!

Foley

That whole "Those annoying outlines" post is about this,I found you can't get rid of the outline completely but one way to take the edge off is to put onClick="blur()" in your HREF satement


Walking the Earth like Kane

bitdamaged is correct, but you may have to make it onClick="this.blur()". not trying to step on your toes there bitdamaged!

hmm, the onClick="this.blur()" didn't seem to work 4 me when i tried it some time ago, but io found one method that worked 4 me by looking at the code of a page made with dw3
it does it like this: onFocus="if (this.blur) this.blur"

There is no spoon...sort of speaking

[This message has been edited by Chris Bala (edited 30-06-2000).]

for the love of god...

i've tried all 3 of those and none of them will work for me, what the heck?

argh, is it browser related or just stupidity on my part?

cheers.mikey.milker

Hmm anyone else think there is not a definative answer to this?

Here is what I use. If I am using an anchor that goes nowhere but calls a script, the first line is
focus()
Thats it.
Actually there is one way of doing it without the annoying outline. Dont use an anchor tag!

I have an example of what I mean up http://www.bitdamaged.com/testpages/Sliders
(Grab and drag the colored squares)
It's not complete but it's a cool trick!


Walking the Earth like Kane

[This message has been edited by bitdamaged (edited 30-06-2000).]

Ack! Bitdamaged, I tried your drag and drop demo in IE and it worked great. When I tried it in Netscape I got a javascript error <img border=0 align=absmiddle src="http://www.ozones.com/forum/frown.gif">

The error I got was:
JavaScript Error: http://www.bitdamaged.com/testpages/Sliders/main.htm, line 63: event is not defined.

Milker, what browser and version are you using? The onBlur() method should work for anything version 4 and up.

i am using internet explorer 5.0... i wish i could run netscape, but evil things happen on my new computer when i try to download and run it. *sigh*

cheers.mikey.milker

to bitdamaged: ns doesn't add the events without the anchor tag
browsers over 4.0 have blur() but for window
only ie has for anchor
my method really works


There is no spoon...sort of speaking

Actually, the trick used in the example doesn't use Anchor tags at all. It tracks the mouse positon on mouse events and if it is within the area then it grabs it. So it's not using either of the blur or focus methods.

Sorry if I was unclear it was mostly a joke

Bugimus, I'll take a look at that and make it work in NN, I use IE pretty much exclusively when I develop, with an eye for NN. That page is just a toy I've been playing with so since I haven't used it Ii haven't really QA'd it. but thanks! I thought it was ok in both browsers


Walking the Earth like Kane

sorry dude, just looked at the code <img border=0 align=absmiddle src="http://www.ozones.com/forum/biggrin.gif"> nice

There is no spoon...sort of speaking

I am still having this problem.

Bitdammaged, your example is quite impressive, however I am a complete newbie to Javascript, and it seems a bit complicated for what I want. I would like to keep using anchor tags, because I am calling another page in a frame. Like this:

--------------------------------
*

Well damn, I should probably just show you as my example did not turn out. (Frickin whitespace). Here is what I am trying to do:
http://home.carolina.rr.com/irishman/mainnews.html

As each button is pushed, the text in the adjacent frame is changed. However that anoying square stays around the button. How do I do this, while KEEPING the rollover? Is there some direction I can do onClick?

Please remember I am very new to this and keep all flames to a low char-broil. Thanks!

Foley

Try this,

In the pages that load on the right try putting this in the top:
<SCRIPT>
focus()
</SCRIPT>


Walking the Earth like Kane

Can't help with Javascript at all, but I was wondering if you made the "jewel" graphics on your page yourself? They look somewhat familiar <img border=0 align=absmiddle src="http://www.ozones.com/forum/wink.gif">

This question (the original question that is) gets asked so frequently that it's getting on my nerves a bit.

Did you know that in IE, even though 'blur()' does take the focus away from the object in the software, it leaves that border behind! (It's daft I know). So, if you have a text box, and you 'blur()' it, you can't type in the text box, but you can still see the cursor inside it!

One way around this (and I have never tried this out in practice), is to create a dummy object. Then, every time you focus on any other object, you can simply say 'dummyobject.focus()', thus releaving any other objects of the gray box! Sounds plausable enough to me! Can someone tell me if it works?
If you're really clever, you could place the dummy object off the screen (say left:-10; top:-10), and put the attribute SCROLLING=NO in the <body> tag of the page.

BUT BEWARE: Some people (who work on skanky computers with no mice), use this gray box and the tab button to navigate about a page. I did it myself for a couple of days when my mouse broke! It would be impossible to navigate without a mouse if you blur everything.
However, I'm sure that enough people use mice these days so that you can ignore this warning!

osh

half this game is ninety percent mental...

Err.. No! I did not make the jewels. I did get them off of Ozone's site. These are only temporary untill I can get a good graphics program capable of making my own. I am very new at this, and 3d rendering is the next step of my education.

Foley

It works! It works!

Thanks guys! Thanks a bunch Bitddammaged.

Now I have to get onto creating graphics. Is there a freeware program that can do jewels similar to the ones on this site? I dont mind paying for software, Im just a bit strapped for cash this quarter.

Foley

I've seen some people do some pretty nice work with Paint Shop Pro, but nothing is going to come close to Photoshop's power.


Just a note: you will find that using other people's images (even if it is only temporary) will not go over very well....especially with the people who made them and have a copyright on them.

Well, if its a social fo' pa, then I will take them down. There are enough freeware graphic sites to give me something to use in the interim. I guess I will start looking into pricing photoshop.

Foley

Ive just had a thought.. untested as of yet but it might just work.

Make the image 2 pixels larger than the desired display size i.e. add two pixels all round the edge. Now clip the image by two pixels. This will remove the extra pixels from view. Now when the grey box appears, it will appear around the large edges and will not be visible to the user as the box is outside the viewable area.

Well, it might just work !

I meant 'clip' as in clipping the DIV the images sits within...

Jewels are gone,
I swapped them out with some free graphics I found on-line. I hope no offense was taken.

Foley