Is there a behavior that can swap a text field?

Question

I am creating a portfolio page for a client.  It currently has a 9 block of thumbs and another area where the thumb images appear enlarged when rolled over.  The client would also like to be able to add text beneath the large area telling about each project.  Is there a way to change the content in the text field on thumb rollover as well or is my only option to make the text part of the larger image?
Thanks in advance for the help!

Answer 1

Hi
You could use a simple css rollover similar to -
HTML -
<div class="imagegallery">
<a class="thumbnail" href="#thumb"><img src="../images/rosesthumb.jpg" width="100" height="68" border="0" /><span><img src="../images/roses.jpg" /><br />Simply beautiful.</span></a>
CSS -
.imagegallery{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
.thumbnail:hover{
background-color: transparent;
.thumbnail:hover img{
border: 1px solid blue;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
Replace the items in red with your values.
If this is not the effect you wish, can you explain a little more.
PZ