SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Probably simple...

    Hi,

    I have a slight problem (mostly my brain has stopped working!). All I'm trying to do is have an image which the border is added on click, and removes the border onclick again.

    Code:
    <img src=\"".$targetPath.$file."\" ".imageResize($mysock[0], $mysock[1], 150)." border=\"0\" onClick=\"this.style.border='3px solid #e25e00';\">
    That works fine, but how can I change it back on another click?

    Thanks.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Move the change off to a CSS style, so that you only need to run a function to toggle that class name.

    Code css:
    .active {
        border: 3px solid #e25e00;
    }

    Code javascript:
    "... onClick=\"toggleBorder(this);\">

    Code javascript:
    function toggleBorder(link) {
        if (link.className === 'active') {
            link.className = '';
        } else {
            link.className = 'active';
        }
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru TacMaf's Avatar
    Join Date
    Dec 2005
    Location
    Manchester, United Kingdom
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That worked great. Thanks, much appreciated.


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
  •