Page 1 of 4 123 ... LastLast
Results 1 to 10 of 32

Thread: Keep a border on an image when clicked on it

  1. #1
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Keep a border on an image when clicked on it

    Hi,

    I have this code. When I click on the image, it will show the img url. Now I want when I click on the image, it will also show a border around the image. This way I can see which (seleted) image belongs to the code underneeth it. I tried some stuff with css but had no luck.

    In short: click image, show border around it. Click other image, show border on the image (the other border dissappears again).

    Hope someone can help me out!

    The code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    .border img{
    border: 2px solid white;
    }
    
    .border:hover img{
    border: 2px solid lightgrey;
    }
    
    .border:active img{
    border: 2px solid red;
    }
    
    </style>
    <script language="JavaScript">
    
    var isReady = false;
    
    function showAddress(What){
      if (isReady){
        document.Which.Where.value = What;
      }else{
        alert("Not so fast...\nPlease wait for the page to finish loading.");
      }
    }
    
    function clearAddress(){
      if (isReady){
        document.Which.Where.value = '';
      }else{
        alert("Not so fast...\nPlease wait for the page to finish loading.");  
      }
    }
    
    </script>
    </head>
    
    <body onload="isReady=true">
    
    <a class="border"><img src="dir/a.png"
         width="60"
         height="60"
         border="0"
         onMouseDown="showAddress(this.src)"></a>
    
    <a class="border"><img src="dir/b.png"
         width="60"
         height="60"
         border="0"
         onMouseDown="showAddress(this.src)"></a>
    
    <form name="Which">
    <input type="text" size="360" name="Where">
    </form>
    
    </body>
    </html>

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    <script type="text/javascript">
    Array.prototype.indexOf = function(o) {
      for(var i=0;i<this.length;i++) if(this[i] == o) return i;
      return -1;
    }
    
    document.borderedImages = new Array();
    function borderImage(img) {
      if(document.borderedImages.indexOf(img) == -1) document.borderedImages.push(img);
      for(var i=0;i<document.borderedImages.length;i++) document.borderedImages[i].style.borderStyle = "none";
      img.style.border = "solid 1px red";
    }
    HTML Code:
    <img src="imageone.png" onclick="borderImage(this);">
    <img src="imagetwo.png" onclick="borderImage(this);">
    Should work, but untested.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Must the scipt part be in the header or in the body?

    Thx

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Head would be best, but body will work too so long as it's above the images.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Okay tested it, got some things not working:

    1)mouse hover doesn't work any more
    2)the images "move" a bit when clicking them
    3)the other script stopped working, the image url isn't shown anymore...

    The script you gave does work, but cancels a lot of other things.

    My code now:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    .border img{
    border: 2px solid white;
    }
    
    .border:hover img{
    border: 2px solid lightgrey;
    }
    
    .border:active img{
    border: 2px solid red;
    }
    
    </style>
    
    <script type="text/javascript">
    Array.prototype.indexOf = function(o) {
      for(var i=0;i<this.length;i++) if(this[i] == o) return i;
      return -1;
    }
    
    document.borderedImages = new Array();
    function borderImage(img) {
      if(document.borderedImages.indexOf(img) == -1) document.borderedImages.push(img);
      for(var i=0;i<document.borderedImages.length;i++) document.borderedImages[i].style.borderStyle = "none";
      img.style.border = "solid 2px red";
    }
    </script
    
    <script language="JavaScript">
    var isReady = false;
    
    function showAddress(What){
      if (isReady){
        document.Which.Where.value = What;
      }else{
        alert("Not so fast...\nPlease wait for the page to finish loading.");
      }
    }
    
    function clearAddress(){
      if (isReady){
        document.Which.Where.value = '';
      }else{
        alert("Not so fast...\nPlease wait for the page to finish loading.");  
      }
    }
    
    </script>
    </head>
    
    <body onload="isReady=true">
    
    <a class="border"><img src="dir/a.png"
         width="60"
         height="60"
         border="0"
    	 onclick="borderImage(this);"
         onMouseDown="showAddress(this.src)"></a>
    
    <a class="border"><img src="dir/b.png"
         width="60"
         height="60"
         border="0"
    	 onclick="borderImage(this);"
         onMouseDown="showAddress(this.src)"></a>
    
    <form name="Which">
    <input type="text" size="360" name="Where">
    </form>
    
    </body>
    </html>
    Greetz

    edit: ow and this code is displayed:
    Code:
    var isReady = false; function showAddress(What){ if (isReady){ document.Which.Where.value = What; }else{ alert("Not so fast...\nPlease wait for the page to finish loading."); } } function clearAddress(){ if (isReady){ document.Which.Where.value = ''; }else{ alert("Not so fast...\nPlease wait for the page to finish loading."); } }

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    You missed the ending > off of the </script> tag. In fact, I missed the </script> tag completely. So I suppose I can't complain. But you can remove all this:
    Code:
    </script
    
    <script language="JavaScript">
    It's unnecessary, and the language attribute is deprecated in favour of type.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ahh ok that fixed the errors.

    Still 2 problems:
    1) when loading the page, the mouse hover works (onmouse over lightgrey border, see style). But after clicking an image this function doesn't work anymore
    2) the images still "move" a little when cliking them.. how to fix this?

    Thx for the quick replies!

    Null

  8. #8
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    1) when loading the page, the mouse hover works (onmouse over lightgrey border, see style). But after clicking an image this function doesn't work anymore
    Because it's overridden. Try using a class instead:
    Code:
    .border:active img, img.bordered {
    border: 2px solid red;
    }
    
    </style>
    
    <script type="text/javascript">
    Array.prototype.indexOf = function(o) {
      for(var i=0;i<this.length;i++) if(this[i] == o) return i;
      return -1;
    }
    
    document.borderedImages = new Array();
    function borderImage(img) {
      if(document.borderedImages.indexOf(img) == -1) document.borderedImages.push(img);
      for(var i=0;i<document.borderedImages.length;i++) document.borderedImages[i].className = "";
      img.className = "bordered";
    }
    The second is less easily fixed. Try setting a 1px border the same colour as the background.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  9. #9
    Join Date
    Aug 2005
    Posts
    94
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Perfect, that code also fixed the moving images.

    Got 1 little request left. At the moment the selected image has a red border, but the hover overides this one too. Is it possible to keep the mouse over on all the other images EXCEPT the one selected (with the red border)? So this one stays with the red border even when the mouse goes over it?

    Thx again

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    <script type="text/javascript">
    Array.prototype.indexOf = function(o) {
      for(var i=0;i<this.length;i++) if(this[i] == o) return i;
      return -1;
    }
    
    document.borderedImages = new Array();
    var oldmo = null;
    function borderImage(img) {
      if(document.borderedImages.indexOf(img) == -1) {
        document.borderedImages.push(img);
        if(oldmo == null) oldmo = img.onmouseover;
      }
      for(var i=0;i<document.borderedImages.length;i++) {
        document.borderedImages[i].className = "";
        document.borderedImages[i].onmouseover = oldmo;
      }
      img.className = "bordered";
      img.onmouseover = function(){return true;};
    }
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

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
  •