Dreamweaver Behaviours.

kasio99 · 02-07-2010, 11:50 PM

Hi I'm new to web development. I'm just working through a few exercises to practise my skills.
I'm currently working on an image viewer exercise. Using divs I have a large image and several thumbs positioned on the page. The image swap works great. My problem is with the fade/appear behaviour. I want it so that when I select thumb1 it fades to 50% and when I select thumb2, thumb1 returns to 100% and thumb2 fades to 50% and so on.

Currently when I select thumb1 it fades to 50% and when I select thumb2 thumb1 appears at 25% and returns to 50%.

Can anyone help me?

PixelPusher · 02-08-2010, 02:42 PM

Sounds like you are using javascript to accomplish this, can you post the script?

kasio99 · 02-08-2010, 11:35 PM

After a massive head ache I think I may have solved my problem though it's not exactly how I want it.

Your help on any improvements I can make would be much appreciated!

</head>

<body onload="MM_preloadImages('Images/Forks.jpg','Images/Forks2.jpg','Images/Forks3.jpg','Images/Oldbike.jpg')">
<div id="container">
<div id="photo1"><img src="Images/Oldbike.jpg" alt="Old bike pic" name="large" width="900" height="600" id="large" /></div>
<div id="photo2"><img src="Images/Oldbike-thumb.jpg" alt="oldbike thumb" name="thumb1" width="120" id="thumb1" onclick="MM_swapImage('large','','Images/Oldbike.jpg',1);MM_effectAppearFade(this, 1000, 100, 50, false);MM_effectAppearFade('thumb2', 1000, 50, 100, false)" /></div>
<div id="photo3"><img src="Images/Forks-thumb.jpg" alt="forks" name="thumb2" width="120" height="80" id="thumb2" onclick="MM_swapImage('large','','Images/Forks.jpg',1);MM_effectAppearFade(this, 1000, 50, 100, false);MM_effectAppearFade('thumb1', 1000, 50, 100, false)" /></div>
<div id="photo4"><img src="Images/Forks2-thumb.jpg" alt="forks2" name="thumb3" width="120" height="80" id="thumb3" onclick="MM_swapImage('large','','Images/Forks2.jpg',1)" /></div>
<div id="photo5"><img src="Images/Forks3-thumb.jpg" alt="fork3" name="thumb4" width="120" height="80" id="thumb4" onclick="MM_swapImage('large','','Images/Forks3.jpg',1)" /></div>
</div>
</body>
</html>

02-07-2010, 11:50 PM	#1
kasio99 New Member Join Date: Feb 2010 Posts: 10	Dreamweaver Behaviours. Hi I'm new to web development. I'm just working through a few exercises to practise my skills. I'm currently working on an image viewer exercise. Using divs I have a large image and several thumbs positioned on the page. The image swap works great. My problem is with the fade/appear behaviour. I want it so that when I select thumb1 it fades to 50% and when I select thumb2, thumb1 returns to 100% and thumb2 fades to 50% and so on. Currently when I select thumb1 it fades to 50% and when I select thumb2 thumb1 appears at 25% and returns to 50%. Can anyone help me?

02-08-2010, 02:42 PM	#2
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Sounds like you are using javascript to accomplish this, can you post the script? __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

02-08-2010, 11:35 PM	#3
kasio99 New Member Join Date: Feb 2010 Posts: 10	script After a massive head ache I think I may have solved my problem though it's not exactly how I want it. Your help on any improvements I can make would be much appreciated! </head> <body onload="MM_preloadImages('Images/Forks.jpg','Images/Forks2.jpg','Images/Forks3.jpg','Images/Oldbike.jpg')"> <div id="container"> <div id="photo1"><img src="Images/Oldbike.jpg" alt="Old bike pic" name="large" width="900" height="600" id="large" /></div> <div id="photo2"><img src="Images/Oldbike-thumb.jpg" alt="oldbike thumb" name="thumb1" width="120" id="thumb1" onclick="MM_swapImage('large','','Images/Oldbike.jpg',1);MM_effectAppearFade(this, 1000, 100, 50, false);MM_effectAppearFade('thumb2', 1000, 50, 100, false)" /></div> <div id="photo3"><img src="Images/Forks-thumb.jpg" alt="forks" name="thumb2" width="120" height="80" id="thumb2" onclick="MM_swapImage('large','','Images/Forks.jpg',1);MM_effectAppearFade(this, 1000, 50, 100, false);MM_effectAppearFade('thumb1', 1000, 50, 100, false)" /></div> <div id="photo4"><img src="Images/Forks2-thumb.jpg" alt="forks2" name="thumb3" width="120" height="80" id="thumb3" onclick="MM_swapImage('large','','Images/Forks2.jpg',1)" /></div> <div id="photo5"><img src="Images/Forks3-thumb.jpg" alt="fork3" name="thumb4" width="120" height="80" id="thumb4" onclick="MM_swapImage('large','','Images/Forks3.jpg',1)" /></div> </div> </body> </html>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode