CodingForums.com - Resolved Setting background image onmouseover/hover.

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Resolved Setting background image onmouseover/hover. (http://www.codingforums.com/showthread.php?t=283465)

Setting background image onmouseover/hover.

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?

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

Very simple, thank you.

No problem, you're very welcome. ;)

coothead