I've got this page with a Spry collapsible panel in
it. No problems getting that to work, but I'd like to be able to
use an image in the tab and have that image 1) change on click to
expand text and then 2) change back again on collapse text. I've
got #1 figured out but can't get the image to return back to its
original state on collapse. Basically, I'm using the image as a
"show detail" "hide detail" function. HELP! I know there must be a
way to do it. Or maybe a different way than Spry. You can view the
page at
http://www.ivy-design.com/tip/people.html
TOPICS
Extensions
2
Replies
2
2
Replies
LEGEND
,
ivydesign123 wrote:
> I've got this page with a Spry collapsible panel in
it. No problems
> getting that to work, but I'd like to be able to use an image in the tab and
> have that image 1) change on click to expand text and then 2) change back again
> on collapse text. I've got #1 figured out but can't get the image to return
> back to its original state on collapse. Basically, I'm using the image as a
> "show detail" "hide detail" function. HELP! I know there must be a way to do
> it. Or maybe a different way than Spry. You can view the page at
> http://www.ivy-design.com/tip/people.html
Looks like you want to use a toggle image. Try adding this to the script block at the top of the page:
function toggleShowHideImages(imgID, personName){
var img = MM_findObj(imgID);
if(img.src.indexOf('-hide') > -1){ // if showing the hidden image
MM_swapImage(imgID,'','images/bio-'+ personName +'-show.jpg',1);
}
else{ // if showing the show image
MM_swapImage(imgID,'','images/bio-'+ personName +'-hide.jpg',1);
}
}
Then replace the current onmousedown with:
onmousedown="toggleShowHideImages('tmShow', 'mccleary');"
Also to get better/quicker responses, you should probably post questions that have to to with Dreamweaver and general web issues in the Dreamweaver group:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=12&catid=189&entercat=y
And ask questions that are specific to Spry in the Spry forums:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
--
Danilo Celic
| http://blog.extensioneering.com/
| Adobe Community Expert
>
I've got this page with a Spry collapsible panel in
it. No problems
> getting that to work, but I'd like to be able to use an image in the tab and
> have that image 1) change on click to expand text and then 2) change back again
> on collapse text. I've got #1 figured out but can't get the image to return
> back to its original state on collapse. Basically, I'm using the image as a
> "show detail" "hide detail" function. HELP! I know there must be a way to do
> it. Or maybe a different way than Spry. You can view the page at
> http://www.ivy-design.com/tip/people.html
Looks like you want to use a toggle image. Try adding this to the script block at the top of the page:
function toggleShowHideImages(imgID, personName){
var img = MM_findObj(imgID);
if(img.src.indexOf('-hide') > -1){ // if showing the hidden image
MM_swapImage(imgID,'','images/bio-'+ personName +'-show.jpg',1);
}
else{ // if showing the show image
MM_swapImage(imgID,'','images/bio-'+ personName +'-hide.jpg',1);
}
}
Then replace the current onmousedown with:
onmousedown="toggleShowHideImages('tmShow', 'mccleary');"
Also to get better/quicker responses, you should probably post questions that have to to with Dreamweaver and general web issues in the Dreamweaver group:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=12&catid=189&entercat=y
And ask questions that are specific to Spry in the Spry forums:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
--
Danilo Celic
| http://blog.extensioneering.com/
| Adobe Community Expert
AdChoices