Keep a border on an image when clicked on it

**Null** · 03-21-2006, 05:14 PM

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>

**Twey** · 03-21-2006, 05:38 PM

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.

**Null** · 03-21-2006, 05:52 PM

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

Thx

**Twey** · 03-21-2006, 05:55 PM

Head would be best, but body will work too so long as it's above the images.

**Null** · 03-21-2006, 07:06 PM

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."); } }

**Twey** · 03-21-2006, 07:18 PM

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.

**Null** · 03-21-2006, 07:23 PM

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

**Twey** · 03-21-2006, 07:29 PM

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.

**Null** · 03-21-2006, 07:40 PM

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

**Twey** · 03-21-2006, 07:59 PM

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;};
}

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

Thread Tools

Search Thread

Keep a border on an image when clicked on it

Bookmarks

Bookmarks

Posting Permissions