I want to make it where when someone hovers over the img, it moves to a certain place. how do i do this. do i use the hover attribute or the onmouseover and how?

1 answer

0
points
This was chosen as the best answer

The short answer is, I'd probably use javascript, not css for this sort of thing. For a css-only solution, I haven't tested, but this might work:

html:

<a href="#" class="moveme"><img src="foo.jpg" /></a>

css

.moveme:hover { position: absolute; top: 100px; left: 100px; }

I would test the :hover state directly on the img tag as well. I'm not sure that'd be cross-browser, though.

Hmm... thinking a little further: the problem with this approach is unless the image is still under the mouse when moved, it's going to go out of it's hover state as soon as it moves and flicker back and forth. You might be able to do something more complex like this (assuming the image is 60x40px):

a.moveme, a.moveme img { height: 60px; width: 40px; display: block }
a.moveme:hover img { position: absolute; top: 100px; left: 100px; }

Note: without the display: block, it works (in FF), but it's a bit hurky-jerky.


the JS solution is more like this:

html:

<img onmouseover="moveme(this)" src="foo.jpg" />

JS:

function moveme (that) {
    that.style.position='absolute'; 
    that.style.top='200px'; 
    that.style.left='300px';
}
Answered almost 7 years ago by sprugman
  • I tried the css one with the a.moveme, a.moveme and it worked but can you explain it better and show me how i would do this with multiple pictures. im gonna make this a type of slideshow thing. so im gonna have to do this every time i get a pic i need to update. canyonchase1 almost 7 years ago
  • if i wanted all pics on the page to do this then what would i do? canyonchase1 almost 7 years ago