...

View Full Version : 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...

<!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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum