HTML Help

bethanyg · Joined: 25 Mar 2009 Posts: 1

I am trying to a build a website for my retouching business, so I need to be able to effectively show an images before and after the retouching.

I've seen other websites that work well. When you hold the mouse over the image it shows the after, and when you take the mouse off the image it shows the before.

Does anyone know where I can find the coding to do something like this and how to implement into the web page I already have built?

Thank you very much for your time.

Corey Bryant · Posted: Wed Mar 25, 2009 1:59 pm

If you had some examples, that would help. But check out http://www.dynamicdrive.com for some examples.

_________________
Corey
Toll Free Phone Numbers | Processing Credit Cards | Microsoft Expression Web Blog

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Quote: I've seen other websites that work well. When you hold the mouse over the image it shows the after, and when you take the mouse off the image it shows the before.

Do you have a reference url?

sticks464 · Joined: 31 Dec 2006 Posts: 2311

This can be done with pure css using images as the background, it does not work in IE6 or older.

The html
Code: <div id="test">
<span id="sp1">Before</span>
<span id="sp2">After</span>
</div>

The css
Code: #test {
position:relative;
width:165px;
height:154px;
background-image:url(images/imagename.jpg);/*before image*/
background-repeat:no-repeat;
background-position:center 20px;
margin:20px;
}
span {
position:absolute;
bottom:4px;
width:100%;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px;
text-align:center;
}
#sp2 {
display:none;
}
#test:hover {
background-image:url(images/imagename.jpg);/*after image*/
}
#test:hover #sp1 {
display:none;
}
#test:hover #sp2 {
display:block;
color:#000;
}

Adjust the height and width for your needs.