Swap image, audio, jump menu

I'm going to make this blog entry short and sweet (hopefully) to make up for the hours and hours I spent trying to accomplish the aforementioned tasks.

I incorporated the swap image, embedded audio, and jump menu on my home page that can be accessed via the sidebar to the right. However, rather than do these functions in Dreamweaver, I hard-coded them by hand, which made it a little more difficult to get working properly.

Swap Image
The swap image I used on my page (the main picture) was accomplished a little differently than it would have been in Dreamweaver, but it works exactly the same way. When you choose swap image in Dreamweaver, the program incorporates a Javascript into your HTML code that does the trick. Instead of using Java, I accomplished the swap image with CSS. The main picture on my site is not an <img> tag in HTML, but a background image on a CSS div.

This is accomplished with the following code:

HTML: <div class="picture"></div>

CSS: .picture{ background: url(picture1.jpg) no-repeat;
width: x
height:y }

.picture:hover{ background: url(picture2.jpg) no-repeat;}

...so that the HTML refers to a class in CSS (.picture), which gets changed when the cursor touches it (.picture:hover). Thus, when a user hovers the cursor over the picture, the background property of that div changes -- to create a swap image effect.

Audio Clip
Embedding an audio file took just as long to figure out, but the solution seems much clearer. I'm still not sure that this is the best way to embed an audio file, but it looks clean enough, and -- most importantly -- gives the user a choice about whether or not to play the clip.

I embedded the sound clip with the following code:

HTML: <embed type="audio/wav" src="sound.wav" name="plugin" height="15" width="160">

...this way the sound clip is visible, sized to my specifications (15x30), and user-controlled.

Jump Menu
The jump menu was perhaps the easiest element to incorporate, because there was a relatively simple tutorial on EntheosWeb. I simply copied their Javascript into the head portion of my HTML code, and their HTML code into the body portion of the HTML. After I had incorporated the code, I just went in to change the links and titles to fit my page.



Phew... that was long, as usual, but now I'll know how to do all of those things next time I want to incorporate them in a site.