Image replacement on <div> hover?

Forum Moderators: not2easy

Message Too Old, No Replies

Image replacement on <div> hover?

bigbee

5:06 pm on Sep 22, 2011 (gmt 0)

Hi all,

I have a bit of a problem I am trying to get around.

I have a piece of content containing a title with an image next to it, a tab system with sound cloud embedded audio.

I would like the image to be replaced by another similar image when any of this content is hovered over.

So would I be able to wrap all of this content in a div and then call some CSS to bring another image in place of the existing image when the mouse is over the div? Its basically a slightly more complicated image rollover that is triggered by hovering over the div and not just the image itself.

Any ideas?

I appreciate any help with this!

ps ( this is for a wordpress site, and I know it has issues with javascript within a post, so I am not sure if I can use javascript for this problem)

Paul_o_b

8:29 pm on Sep 22, 2011 (gmt 0)

Hi,

You could create an absolute element within the div and then place that on top of your image when hovered.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
width:450px;
margin:auto;
background:#fcf;
border:1px solid #000;
position:relative;
}
.wrap p.img {
float:right;
margin:10px;
width:200px;
height:200px;
background:red;
border:1px solid #000;
text-align:center;
}
.over {
position:absolute;
top:10px;
left:-999em;
width:200px;
height:200px;
background:yellow;
border:1px solid red;
text-align:center;
z-index:2;
}
.wrap:hover .over{
left:auto;
right:10px;
}
.wrap p{
padding:10px;
margin:0 0 1em;
}
</style>
</head>

<body>
<div class="wrap">
<p class="img">This would be your image</p>
<p>Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text </p>
<p class="over">This would be the rollover image</p>
</div>
</body>
</html>

Or you could even apply a backghround image to the image by setting its width and height to zero and using padding to create the image size and then apply a background image to the image itself.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
width:450px;
margin:auto;
background:#fcf;
border:1px solid #000;
position:relative;
}
.wrap p.img {
float:right;
margin:10px;
border:1px solid #000;
text-align:center;
}
.wrap:hover img{
width:0;
height:0;
padding:67px 0 0 100px;/* height amd width of image*/
background:url(photo-1-over.jpg) no-repeat 0 0;
}
.wrap p{
padding:10px;
margin:0 0 1em;
}
</style>
</head>

<body>
<div class="wrap">
<p class="img"><img src="photo-1.jpg" width="100" height="67" alt="test rollover"></p>
<p>Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text Hover over this text </p>
</div>
</body>
</html>

None of the above will work in IE6 though

bigbee

7:43 am on Sep 23, 2011 (gmt 0)

Paul_o_b You are an absolute legend! Thank you ever so much! I managed to get it functioning from the first code you posted!

I have encountered a different problem now though, I want the image rollover to appear at different points across the page within the div. The idea is basically to have this icon rollover image sit next to the title in that div, and rollover when hover over the div.

The problem is that all of the titles are of different length, I do now have a functional div hover function which is perfect from the below code, how could I duplicate it a few times and point them to separate divs, and adjust the margin for each hover for each div?

<style type="text/css">
.wrap {
margin: auto;
position: relative;
}
.wrap p.img {
float: right;
margin: 10px;
text-align: center;
margin-right: 597px;
}
.over {
height: 200px;
left: -999em;
position: absolute;
text-align: center;
top: 10px;
width: 200px;
z-index: 2;
}
.wrap:hover .over {
left: 173px;
right: 70px;
margin-right: 600px;
}
.wrap p {
margin: 0 0 1em;
padding: 10px;
}
</style>

Paul_o_b

10:03 am on Sep 23, 2011 (gmt 0)

Hi,

It all depends on your structure but I;m huessing you are looking for something like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.wrap {
width:450px;
margin:0 auto;
background:#fcf;
border:1px solid #000;
position:relative;
padding:0;
list-style:none;
}
.wrap li {
width:100%;
clear:both;
overflow:hidden;
position:relative;
border-bottom:5px solid #000;
}
.wrap .img {
margin:10px;
width:200px;
height:200px;
background:red;
border:1px solid #000;
text-align:center;
}
.over {
position:absolute;
top:10px;
left:-999em;
width:200px;
height:200px;
background:yellow;
border:1px solid red;
text-align:center;
z-index:2;
}
.inner:hover .over { left:10px; }
.wrap p {
padding:10px;
margin:0 10px 1em;
}
.caption {
background:#fff;
border:1px solid #000;
float:left;
clear:left;
}
.caption:hover{background:#eee}
</style>
</head>

<body>
<ul class="wrap">
<li>
<div class="img">This would be your main image</div>
<div class="inner">
<p class="caption">This would be the Caption that changes the image when you rollover it.</p>
<div class="over">This would be the rollover image</div>
</div>
</li>
<li>
<div class="img">This would be your main image</div>
<div class="inner">
<p class="caption">This would be the Caption.</p>
<div class="over">This would be the rollover image</div>
</div>
</li><li>
<div class="img">This would be your main image</div>
<div class="inner">
<p class="caption">Caption</p>
<div class="over">This would be the rollover image</div>
</div>
</li>
</ul>
</body>
</html>

It does rely on a certain structure to work but seems to do what you asked.