Okay, by providing the onMouseOut element, you specify what happens to the image when the cursor leaves the image (typically, designers will have the set the onMouseOut element to MM_swapImgRestore(), which, simply, restores the original image by calling on the Restore() javascript function. To really let your web page know who's boss and specify what happens when the user's curson enters the image, speak your mind to the onMouseOver element. Although a little more spicy (that is, complicated) than the onMouseOut, you really get to tell it to your browser what happens. This is really the meat of the roll-over image because a roll-over is typically thought of as something that happens to it when...it is rolled-over by the cursor. So this is where "naming" your image, remember back in the good old fashioned "img" source tag, comes into play. The "name" of your image is utilized, here, right now, by the javascript code. It doesn't pop as alternate text if your image doesn't load (that element would, craftily enough, be "alternate") nor does it provide the user with ANY information to help them navigate your site. It's sole purpose is to be used in code, specifically by javacript. To employ that, oh so sacred, onMouseOver element set it equal to "MM_swapImage('Image1','','Image_to_be_swapped.gif',1)". The whole code bit should look like:
onMouseOver="MM_swapImage('Original_image','','Image_to_be_swapped.gif',1)">
Okay....!@#$# Thanks, you say. Jibberish and a bunch of swapped-combo, gobbley-gook. Well, don't worry, I'll take you through it. First off, the MM_swapImage is just another "given" in javascript. If you get into that field, you'll find the more "nice" programming languages give you a lot of freebies (such as the pre-defined function for swapping images as with here). By "pre-defined" I mean something that you don't have to code yourself, you have to provide the parameters (that is programming speak for "specifics") of the MM_swapImage() function, but you don't have to create it -- just call it (that is again, programming speak, I'll try to stop this from now on. don't want to scare of graphic guru's or people who are afraid of programming horror movies such as Attack of the Infinite "While-Loop", of the "Else-if" that Struck Back, or, "Or Indiana Jones and the Debugged Temple of Unix End brackets", okay, must STOP, sorry, took it a little too far that time. woah). Anyways, I'll try to avoid those horrifying tangents from now on. Basically, just write the function, provide the parameters, and use it. Now, to break up the MM_swapImage() a little more, you'll need to observe that it calls for to things for you to specify -- the image you're swapping from and the image your swapping to. In the sample code, the "name" (remember this is the "name" attribute specified in the image source tag of the original image. This is different from the actuall img src location of the image, making this bit a tad bit confusing, eh?) is the "name" you gave your image with the "name" attribute. So if the original image is yellowstar.jpg, that's all fine and dandy, what matters is what name you gave yellowstar.jpg, because that's what goes between quotations, as the first parameter of MM_swapImage. Just a reminder, the name of any image can be defined 1)In code with <img src"images/yellowstar.jpg" name="Original_image"> or by defining the name in the nifty, handy Dreamweaver dialog box that pops up when you create a new image: PIC.
Knowing the code is kind of cool because you can show-off to programming gurus, and you may actually be able to decipher some of that gibberish if you ever embark on an adventure into the "Code View.." hemisphere of the Dreamweaver window. So anyways, plug in the "name" of the image, in this case it was defined as "Original_image" as the first parameter for MM_swapImage(), then enter:
,'','Image_to_be_swapped.gif',1)
Where Image_to_be_swapped.gif is the actual img src location of the new image that you want to flicker on your, now, extremely and excruciatingly fancy java web-page roll-over image. Enter it just as you would with an <img src="image_location">" tag, where image_location is the local location of the image. Why the new image to be swapped, in this case, 'Image_to_be_swapped.gif', is buffered with the double qotations, two commas, and the digit, 1, only the Javascript god knows.....The interesting thing about these onMouseOut (or Over) attributes is that, like the <img src> attributes of "name" or "alternate", they are simply more detailed attributes of the extremely well-known <a href> tag. But wait, how can something as simplistic and fundamental to basic, boring webpages, be used to create my modern javascript roll-over image? Well, what can I say, you build upon the simply, make it complex, and then the simple tags allow your pages to look, well, quite simply, cool as heck. Now, you can avoid all of this code by simply clicking on the "Roll-Over Image" button in the "Common" tab of the Dreamweaver menu bar: PIC. Arg, you say? Why did I just tell you all the specifics of javascript code, when Dreamweaver does it all for you? Well, in addition to preparing you embark on that voyage into the "Code View..." tab, if you choose to take it, there are all kinds of additionally cool gizmos you apply to rollovers, such as making things pop up in other windows, menus, or different areas of the page, that Dreamweaver can't do. Remember, Dreamweaver is quicker and faster, but the code does EVERYTHING:
If it can't be done in code, dreamweaver can't do it, but if it can't be done in Dreamweaver, it may be able to be done in code....Ancient Chinese Proverb.
Just kidding about the Ancient Chinese proverb there; don't want to get in to any Copyright issues with the Chinese government...ahem, *cough*, thank you, thank you. You can hold the applause for that joke.
And with all the new, burgeoning elements to javascript, you may want to do a little bit of coding and bring in the new stuff in "Code View" just for the sake of feeling "cool as heck" or if Dreamweaver doesn't offer that feature yet. The internet and it's protocal and primary languages for display web pages -- html, javascript, etc -- are changes rapidly and explosively. I just wanted to give you a little programming, and a little more detailed edge into all of this internet growth. Besides, its about time you stopped calling yourself a "html-newbie", and graduated to "html-savvy", en route to html webmaster!
As for the elements of what happens when a user presses down or exits an image, these are more specifically used with Cascading Style Sheets. This becomes an entirely different lesson, but still within the conversation of roll-overs, so don't drift to far into slumber. Stay awake and tuned for the Cascading Style Sheet roll-overs!
