CSS, JS questions on (1) improving JS code through CSS and (2) removing blue dotted borders around hyperlinked images

Question

div.img
{   
    margin:7px;
    border:3px solid gray;
    height:110px;
    width:110px;
    float:left;
    text-align:center;
}   


div.img img 
{   
    display:inline;
    margin:3px;
    border:1px solid white;
}   


div.img a:hover img 
{   
    border:3px solid yellow;
}   


function handleMouseClick(imageName)
{
    document.getElementById(imageName).style.borderWidth = '3';
    document.getElementById(imageName).style.borderStyle = 'solid';
    document.getElementById(imageName).style.borderColor = 'yellow';
}

I have some JS and CSS code pasted above which renders borders images with borders and changes the image border on mouseclick to '3px solid yellow'. This code works as expected but I would like to know if there is a better way to do this through CSS instead of the JS code I have in handleMouseClick(...).

Secondly, when I select my image, the image border changes as expected to '3px solid yellow' but since the img element is a child of "<a href...> </a>", I also see a dotted blue border around the image. How do I get rid of the blue border?

Answer 1

You could alter your div.img a:hover img to apply to an additional case

div.img a:hover img, div.img img.selected
{   
    border:3px solid yellow;
} 

and then just add the selected with javascript upon click..

function handleMouseClick(imageName)
{
    document.getElementById(imageName).className  = 'selected';
}

Answer 2

The cleanest way for js to manipulate html styles is by setting the class attribute. In your case have a class defined in CSS to have dotted border and set it using js when mouse click is detected. I quite didn't get the second question

Answer 3

Hi there,

A few issues here:

1. Is your <A> tag really an anchor? Does it lead to something? If not, then you probably do not want/need to wrap your <IMG> in an anchor.
2. As hinted in a previous answer, you would probably want to use CSS classes.

An example merging these suggestions is here:

<style type="text/css">
  img.myimage {
    border: 3px solid blue; /* assuming you want the blue border by default */
    cursor: pointer; /* Hint the user that the image may be clicked */
  }
  img.myimage-clicked {
    border: 3px solid yellow;
  }
</style>
<script type="text/javascript">
  function handleMouseClick() {
    document.getElementById("whatever").className = "myimage-clicked";
  }
</script>
...
<img id="whatever" src="" class="myimage" onclick="handleMouseClick()">

Answer 4

eh, people still use the DOM?

Use jquery instead:

//CSS:
.selected {
 border:3px solid yellow;
}

//Java Script
$("#myImgId").click(function(){
  $(this).addClass("selected");
});

Answer 5

The CSS value is outline. Use

a:active {outline: none;}

to remove the outline.