Resolved Setting background image onmouseover/hover.

Ax3l · 12-03-2012, 02:50 PM

I have a container div that has a number of images in it. What I am trying to do is give each image a "wrapper" on a mouseover or hover by setting a background image that will extend beyond the height and width of the images. What I want is for a background image to be set dynamically depending on what image the mouse is over.

I've read that there might be something I can do with the anchor tag.

So is there any way that I can set a background image dynamically?

coothead · 12-03-2012, 03:17 PM

Hi there Ax3l,

no need for javascript, CSS will do the trick.

Here is a basic example...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http://www.coothead.co.uk/images/">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
    background-color:#f0f0f0;
 }
#image0 {
    display:block;
    width:100px;
    height:100px;
    padding:20px;
    margin:auto;
    border:1px solid transparent;
    cursor:pointer;
 }
#image0:hover {
    border-color:#909;
    background-image:url(anim2.gif);
    background-position:center center;
    box-shadow:4px 4px 4px #999;
 }
</style>

</head>
<body>

<div>
 <img id="image0" src="anim1.gif" alt="">
</div>

</body>
</html>

coothead

Ax3l · 12-03-2012, 06:23 PM

Very simple, thank you.

coothead · 12-03-2012, 06:29 PM

No problem, you're very welcome.

coothead