0

I have some circle buttons on my website that I want to get a blue outline when you mouseover.

<img src="/images/example.png" onmouseover="JavascriptHere">

How would I do this? The website I am trying to do this on is http://www.inglesfield.com/. I already have a mousedown event to prevent image dragging, would it be possible to have both events (mousedown and mouseover) independently?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
william44isme
  • 877
  • 2
  • 13
  • 25
  • Don't use tables for styling, don't use inline styles, don't use inline scripts, indent your scripts, don't use the center tag, don't duplicate ids. Do read: https://developer.mozilla.org/en-US/docs/HTML/Introduction – howderek Mar 04 '13 at 17:49
  • I am aware of that, the center tag, however, was necessary. I tried many other CSS techniques but the easiest and most effective way was
    . Even google uses it (sparingly), check their code :)
     – william44isme Mar 04 '13 at 17:55
  • The difference is that Google needs to save bandwidth because every byte counts for them, where your site probably won't have enough visitors to justify the use of deprecated tags. It's better to learn to do things the right way early on, then change your ways in the future. http://stackoverflow.com/questions/1967191/why-would-google-use-a-font-tag – howderek Mar 04 '13 at 19:25
  • And also, you should check your validation results: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.inglesfield.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 – howderek Mar 04 '13 at 19:27

2 Answers2

2

you can add a css hover style on the images

#content:hover { border: 2px solid blue; border-radius: 100px; }

by the way: instead of using ids for the images, use class="content", because ids should be unique on a html page

mansur
  • 248
  • 2
  • 9
  • By the way, check the website now. While it does add a border, it seems to make the image a tiny bit smaller disturbing the other images on the row... Is this normal? I tried it in Chrome and Safari and it acts the same. – william44isme Mar 04 '13 at 18:04
  • yeah its because the border needs space. for example you can initially add a transparent border in #content { border: 2px solid transparent; } which reserves the space – mansur Mar 04 '13 at 18:20
  • Great, thanks, I'm learning a lot here on Stack Overflow, I'm new to HTML and CSS :) – william44isme Mar 04 '13 at 18:23
  • i see :) just don't give up. and don't forget to change id="content" to class="content" and then #content to .content ;) – mansur Mar 04 '13 at 18:25
1

just use css :hover pseudo class.. you dont need javascript for this

<img class="hover" src="http://www.hollywoodreporter.com/sites/default/files/2012/12/img_logo_blue.jpg"/>
<style> img.hover:hover {border:5px solid #555;} </style>

example: http://jsfiddle.net/orlando/Y3Ux6/

Orlando
  • 9,374
  • 3
  • 56
  • 53