Javascript – image swap and preload

Posted in javascript on June 30th, 2009 by Cindy

What You Want To Do: you have a menu of items or a set of images that need to change when they are hovered over.

How To Do It: Use the MM Image Swap!

Put the following code between the <head> tags or a Javascript file that is called on whichever page(s) you want to swap images on.

Now, for the section that has the menu items (or images) that you want to swap, you need to call the functions. The example I'm going to give is the menu list I used, so adjust accordingly. If you didn't use a <ul> list, then don't copy my code exactly. Also, you'll need to swap out the image file names, height and width, etc. to your own.

    

  • Home
    • 

  • Create Map
    • 

  • Create Table
    • 

  • Data Downloads
    • 

  • Research Findings
    •

Finally, go to the <body> tag and preload the images. Again, change the image file names to your own.

<body onLoad="MM_preloadImages('home.jpg', 'home_on.jpg', 'createMap.jpg', 'createMap_on.jpg', 'createTable.jpg', 'createTable_on.jpg', 'dataDownloads.jpg', 'dataDownloads_on.jpg', 'researchFindings.jpg', 'researchFindings_on.jpg')">
Tags:

2 Comments »

CSS – overflow: hidden; FTW!

Posted in css on June 29th, 2009 by Cindy

The Problem: The outer container was not wrapping around some text. It was clear in my code that the text should be inside the area with the grey border.

The Solution: Use the style “overflow: hidden;”


The CSS looked like this:

.container {
border: 1px solid #cccccc;
border-top: none;
}

So then, I was like: SHAZAM! and used “overflow: hidden;” and here is the result:


The CSS now looks like this:

.container {
border: 1px solid #cccccc;
border-top: none;
overflow: hidden;
}

Basically, whenever you have some type of content (image, text, div, anything!) that is outside of where it is supposed to be (like a container div), check that the code is correct. Check that there are proper opening/closing tags. If all else fails, try “overflow: hidden;” on the container div and it should do the trick!

乾杯!
Cheers!

Tags:

Leave A Comment »