Links & Pictures

Discussion in 'Javascript' started by Mikaël Hautin, Jun 1, 2005.

  1. Hi there,

    I'm Mikaël Hautin, a new one to this newsgroup. I will show you how to
    get rid of <a> tags to put links on pictures.

    When you want to put a link to another page on a picture, you type this
    kind of HTML code :

    <a href="page.html" style="text-decoration:none;" alt="funny things
    ....">
    <img src="img12.gif" alt="funny things ..." border="0">
    </a>

    But when you click on the image, you can see a dotted border around it.

    If you type this instead :

    <img src="img12.gif" alt="funny things ..." border="0"
    onclick="this.location='page.html';" style="cursor:hand;">

    I think it is better, especially when you have frames in your website.

    Voilà !

    PS : forgive my english.
     
    Mikaël Hautin, Jun 1, 2005
    #1
    1. Advertising

  2. Mikaël Hautin

    Random Guest

    Re: Links & Pictures

    Mikaël Hautin wrote:
    > Hi there,
    >
    > I'm Mikaël Hautin, a new one to this newsgroup. I will show you how to
    > get rid of <a> tags to put links on pictures.
    >
    > When you want to put a link to another page on a picture, you type this
    > kind of HTML code :
    >
    > <a href="page.html" style="text-decoration:none;" alt="funny things
    > ...">
    > <img src="img12.gif" alt="funny things ..." border="0">
    > </a>
    >
    > But when you click on the image, you can see a dotted border around it.
    >
    > If you type this instead :
    >
    > <img src="img12.gif" alt="funny things ..." border="0"
    > onclick="this.location='page.html';" style="cursor:hand;">
    >
    > I think it is better, especially when you have frames in your website.
    >
    > Voilà !
    >
    > PS : forgive my english.


    Bad idea as it reduces the accesibility of the web page to people who
    are not using pointing devices, have textual browsers, turned off
    images, et cetera.

    What's wrong with dotted borders? They show up even on textual links,
    you know, and they do serve a purpose.

    But if you really want to get rid of it:
    <a href=my.uri onClick=this.blur() ><img ... /></a>
     
    Random, Jun 1, 2005
    #2
    1. Advertising

  3. Mikaël Hautin wrote:

    > When you want to put a link to another page on a picture, you type this
    > kind of HTML code :
    >
    > <a href="page.html" style="text-decoration:none;" alt="funny things
    > ...">


    No I don't. For a start its almost always a really bad idea to remove
    underlines from text links, secondly inline style is nasty and hard to
    maintain, funally there is no alt attribute for the <a> element in any
    version of HTML.

    > <img src="img12.gif" alt="funny things ..." border="0">


    Again, no. I wouldn't use the border attribute, its presentational and its
    task should be relegated to CSS. I would, on the other hand, specify the
    width and the height so that browsers can produce a suitably sized
    placeholder until they have the image downloaded.

    > But when you click on the image, you can see a dotted border around it.


    The shock! The horror! The user agent tells the user that the image has
    focus, thus giving them helpful visual feedback to let them know that they
    have clicked on the image (as opposed to missing with the pointer or not
    pressing the mouse button hard enough). Then, half a second later, it goes
    away as the next page loads.

    > If you type this instead :
    >
    > <img src="img12.gif" alt="funny things ..." border="0"
    > onclick="this.location='page.html';" style="cursor:hand;">


    Still missing the height and width, and still using inline style. "Hand"
    isn't among the values that the cursor property takes in CSS, you probably
    mean "pointer". Of course now, as the image isn't a link, you can't give it
    the focus, so anybody using a non-pointing device (such as a keyboard)
    won't be able to activate it.

    .... and GoogleBot won't be able to follow it.

    .... and it won't appear in a list of links with many browsers can generate
    for their users on demand.

    .... and it won't work if the user can't or won't use JavaScript.

    > I think it is better, especially when you have frames in your website.


    http://www.allmyfaqs.com/faq.pl?Problems_with_using_frames

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
     
    David Dorward, Jun 1, 2005
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Charles A. Lackman

    My Pictures and Setup Project

    Charles A. Lackman, Dec 10, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    401
    Anushi
    Dec 10, 2004
  2. www.westerncartooncards.ca

    Exchange Links < Western Cartoon Cards > Exchange Links

    www.westerncartooncards.ca, Jul 12, 2004, in forum: HTML
    Replies:
    2
    Views:
    1,261
    Toby Inkster
    Jul 12, 2004
  3. Zadig Galbaras

    Lines under links, not under pictures...

    Zadig Galbaras, Mar 18, 2008, in forum: HTML
    Replies:
    8
    Views:
    430
    Zadig Galbaras
    Mar 18, 2008
  4. Martin Raychev
    Replies:
    1
    Views:
    290
    Alvin Bruney [MVP]
    Mar 2, 2004
  5. Garrett Smith
    Replies:
    14
    Views:
    322
    David Mark
    May 26, 2009
Loading...

Share This Page