SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting onfocus='this.blur()' in the css

    Hi,

    I would like all images and links to have property:

    onfocus='this.blur()'

    is this possible through CSS?

    The onfocus should get rid of the dotted line that appears around an anchor image/link when they are clicked (I think IE6 does this by default). I have read somewhere that the onfocus attribute can only be used in forms, but I have seen it used in links too... hope someone can clarify

    DH

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortuneately you can not do this in CSS.

    onfocus can be used on any element that can receive the input focus.

  3. #3
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dhtmlhelp
    Hi,

    I would like all images and links to have property:

    onfocus='this.blur()'

    is this possible through CSS?

    The onfocus should get rid of the dotted line that appears around an anchor image/link when they are clicked (I think IE6 does this by default). I have read somewhere that the onfocus attribute can only be used in forms, but I have seen it used in links too... hope someone can clarify

    DH
    You can use onfocus for links (actually, it's very good to use onfocus, since users may not always be using the mouse to navigate through your site ). However, the :focus pseudo-class doesn't work in IE/Windows. It works in Mozilla and Opera though.

  4. #4
    SitePoint Evangelist dhtmlhelp's Avatar
    Join Date
    May 2003
    Posts
    575
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good point Vinnie,

    never mind then, thanks for the feedback.

    DH

  5. #5
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    However, the :focus pseudo-class doesn't work in IE/Windows. It works in Mozilla and Opera though.
    Even if it did work in IE though it could only be used to set CSS styles which are layout and presentational, not to assign a snipet of Javascript to all links etc surely ?

  6. #6
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BenANFA
    Even if it did work in IE though it could only be used to set CSS styles which are layout and presentational, not to assign a snipet of Javascript to all links etc surely ?
    According to current CSS specs (CSS 2.1) yes. However, there's a planned behavior module for CSS3 which may be able to help there. In the meantime, IE/Windows has a similar concept implemented.
    "Behaviors" is Microsoft's term for its method of attaching certain characteristics and functions to elements within a Web page--such as formatting, boundary-checking, color or the magnification of a graphic as the mouse passes over it.
    http://news.com.com/2100-1023-243144.html?legacy=cnet

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just in case the effect is more important than the method used to implement it, here's a javascript method for removing it site-wide.

    Place the following into an external (linked) .js file.
    Code:
    function unblur() {
    this.blur();
    }
    
    function getLinksToBlur() {
    if (!document.getElementById) return
    links = document.getElementsByTagName("a");
    for(i=0; i<links.length; i++) {
    links[i].onfocus = unblur
    }
    }
    
    window.onload=getLinksToBlur
    This should automatically kill the 'focus border' on text links and image links when each page is loaded.


    Read Me
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •