Web Analytics Made Easy -
StatCounter Semantics when using Javascript - CodingForum

Announcement

Collapse
No announcement yet.

Semantics when using Javascript

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Semantics when using Javascript

    Just a quick question,

    I have images that can be clicked on to pop up a larger image in a new window.

    I am using <a> anchors to achieve this, but since everything is done in Javascript, I leave the href as "#something"... but it occurs to me that this might not be the most semantic way of doing this...

    What's the most "official" way to handle href semantics when using Javascript?

    Alternatively, I could put an "onclick" function on the IMG tag directly and change the cursor for the IMG through CSS... this seems preferable to me, but what do other people think?

  • #2
    I would personally do something like:

    <a href="linktolargerimage.html"><img blabla/></a>

    Then set the onclick handlers dynamically through Javascript to open the image in a new window. Thus, when JS is disabled, the link is still useful.
    jasonkarldavis.com

    Comment


    • #3
      Using return false is the best method; if the user does not have Javascript they are taken to the link, if they do then the function is run.

      <a href="largerimage.jpg" onclick="functiontoshowlargerimage(); return false;"><img src="smallerimage.jpg" /></a>
      markaylward.co.uk

      Comment


      • #4
        Hi... thanks for the reply.

        The only problem with either of these methods is that if Javascript IS enabled, the picture is popped up in a new window AND the link takes takes the user to the new page/pic...I can't figure out how to make the browser ignore the HREF if Javascript works...

        Comment


        • #5
          That's what the "return false" takes care of… if the javascript is executed, then the normal action of the link isn't.
          drums | web

          Comment


          • #6
            ok, got it now... thanks a bunch!

            Comment

            Working...
            X