I am trying to enlarge an image contained in the accordion panel tab when a user clicks on the tab to expand the accordion. I would also like the image to return to original size when the accordion contracts. This needs to happen not only when the user clicks on the tab that contains the image...but also that image needs to reduce to original size if they click on another accordion tab. I have tried the grow/shrink behavior and the swap image behavior but I can't seem to control how it effects the images in the other accordion tabs. Any Ideas?
you can find the page at:
I used the swap image behavior on the first tab (Stephen Kennedy) and the fourth tab (Jane Du). I don't like the way the text wraps around the image when it is small (the png's have the same dimensions its just that the small one has a larger transparency area). Also if you collapse the first tab the image stays large until you click on the fourth tab....and vise versa.
I used the grow/shrink behavior on the second tab (Steven Clark) and the third tab (Steven Williams). I like the way the text wraps and moves around the image (even though the image gets a bit on the pixely side [hope to use a higher res pict in the final]). But it doesn't quite work right. If you click the second tab and third tab back and forth, the image changes in size but eventually the image is small when the tab is expanded.
Any help would be greatly appreciated.
Never Mind....I figured it out. It's not as fluid as a Grow/Shrink behavior, though. I ended up changing the CSS in the "accordion panel tab img" box dimensions to be a smaller size. Then I changed the "accordion panel tab open img" box dimensions to be a larger size. Now the image changes size when opening and closing any tab. The image file was the size of the ending large size in the open panel so it didn't get pixely.