Class 19
580 x 450
Today’s Exercise
1. Interactive Header Logo
a. Use Behavior to Swap Image
2. Interactive Gallery
a. Resize Images
b. Use C...
Using Behaviors
You can use the preset
Behaviors in Dreamweaver to
add effects to your text or
image.
So what comes along with adding behaviors?
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d...
How do I use it?
1. You need to have an ID assigned to the image or text you want to apply
Behaviors. Select the text/ ima...
1. Interactive Header Logo
http://www.idsigner.com/
Using Swap Image Behavior for Header Logo
Roll up your sleeves! We’re doing this now.
Interactive Gallery
Sizing
Gallery Size
600px  620px
Large Image
580px  450px
Thumb Image
120px  93px
CSS Style
#gallery {
background-
color:#999;
width: 600px;
height: 620px;
}
.thumbBox {
width:120px;
float:left;
margin:10...
Let’s Do This!
Upcoming SlideShare
Loading in …5
×

Class19

444 views
379 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
444
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Class19

  1. 1. Class 19
  2. 2. 580 x 450
  3. 3. Today’s Exercise 1. Interactive Header Logo a. Use Behavior to Swap Image 2. Interactive Gallery a. Resize Images b. Use CSS to create Gallery c. Add Interactivity using Behaviors 3. Interactive Gallery with Tooltips a. Insert Spry Tooltips b. Style Tooltips
  4. 4. Using Behaviors You can use the preset Behaviors in Dreamweaver to add effects to your text or image.
  5. 5. So what comes along with adding behaviors? <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script>
  6. 6. How do I use it? 1. You need to have an ID assigned to the image or text you want to apply Behaviors. Select the text/ image. 2. In the Properties panel, type in a unique ID for your object 3. In your Behaviors window, click on the + icon to choose the effects.
  7. 7. 1. Interactive Header Logo http://www.idsigner.com/
  8. 8. Using Swap Image Behavior for Header Logo Roll up your sleeves! We’re doing this now.
  9. 9. Interactive Gallery
  10. 10. Sizing Gallery Size 600px  620px Large Image 580px  450px Thumb Image 120px  93px
  11. 11. CSS Style #gallery { background- color:#999; width: 600px; height: 620px; } .thumbBox { width:120px; float:left; margin:10px 15px; } .largeImage img{ padding: 10px; } .info { float:right; color:#FFF; padding- right:3px; cursor:pointer; }
  12. 12. Let’s Do This!

×