SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict goma's Avatar
    Join Date
    Jan 2002
    Location
    smelly armpit of Asia
    Posts
    305
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    multiple rollover madness

    I've been hired to make a site for a video production company's client. Problem is that the guys in the video shop have their own ideas about making sites.

    After struggling to get some web design basics through to them, I've given up and just want to get the job done and get paid.

    But before I get that paycheck and walk away from all this, I need to make their "vision" come to life.

    They want me to have 18 images on the splash page swap on rolling over the four buttons on the menu. So upon loading the page, there are 18 images on the page. when the user rolls over a menu item, those 18 images swap with another set of 18. Then upon rollout the images change back again to the original set seen when the splash page loaded. There are 4 pages so that's 72 images I have to preload.

    I told them that it would be a huge file but they never listened. So how do I do this rollover madness? My javascript is a bit rusty and I've got Dreamweaver MX and Fireworks MX to use. Can I do this with these two programs?
    http://www.soapbox101.com

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In Dreamweaver, creating 18 image swaps is as simple as creating just one.

    Did you check in Dreamweaver's help files?

    Open up Dreamweaver and press F1 (or go to the Help menu and select Using Dreamweaver) and search for the phrase swap image.

    This should return a number of helper pages that cover the processes you will be using.


    When you have a nifty piece of software at your disposal it's worth looking through the help files and manuals as they will give you a step by step guide for most common techniques.
    Dreamweaver is well stocked when it comes to help files. You should try checking them out first.
    All the guidance you need to do your multiple rollover madness is already at your fingertips.

    What's more, you won't have to wait hours for the help files to post a response to your question.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Zealot Atirez's Avatar
    Join Date
    Nov 2000
    Location
    England
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can try my Rollover script

    Code:
    <!--
    // RollOver Images and Preloader
    // By Barry Jones
    // Version: 1.1
    
    d 		= 	window.document;
    d.preload 	= 	new Array();
    var oldName 	= 	new Array();
    var pictureSrc;
    var oldSrc 	= 	new Array();
    var tempName;
    var count;
    
    
    // Creates an array to hold all of the pre-loaded images
    //
    // You pass path information into this function, this can
    // be a relative path:
    //	e.g.
    //	getImages('images/myImage.gif','images/anotherImage.gif')
    //
    // There is no function limit on the amount of images you can preload
    // on one document.
    //
    function getImages()
    {
    		
    	// Check if the document actually contains images.
    	if (d.images)
    	{
    		// If preload function does not exist
    		// create it.
    		if (!d.preload)
    		{
    			d.preload = new Array();
    		}
    		
    		// Declare variables
    		var i;
    		var j 		= 	d.preload.length;
    		var args 	= 	getImages.arguments;
    
    		// for each of the images in the arguments,
    		// create a new Image() type and place the
    		// src arg into it.
    		for (i=0; i<args.length; i++)
    		{
    			d.preload[j] = new Image();
    			d.preload[j].src = args[i];
    			j++;
    		}
    	}
    }
    
    
    // RollOver function, this can handle multiple rollovers, just pass
    // the image name and the new image path to be placed into the image
    // holder.
    //
    //	e.g.
    //	rollOver('thisImage','images/myImage.gif','thatImage','images/anotherImage.gif')
    //
    function rollOver()
    {		
    	
    	// Declare local variables
      	var count 	= 	0;
      	var i		=	0;	
      	
      	for (i = 0; i < rollOver.arguments.length; i++)
      	{
    		// hold old names for rollOut function
    		oldName[count] = rollOver.arguments[i];
    		tempName = rollOver.arguments[i];
    
    		// get the src from the arguments
    		i++;
    		oldSrc[count] = d.images[tempName].src;
    
    		// swap the image
    		d.images[tempName].src = rollOver.arguments[i];
    		count++;
      	}
    }
    
    
    function rollOut()
    {
    	// Local variable decleration
    	var i		=	0;
    	
    	for (i = 0; i < oldName.length; i++)
    	{
    		// get the first image space from the array
    		name = oldName[i];
    		d.images[name].src = oldSrc[i];
      	}
    }
    
    
    // End of RollOver
    //-->

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2000
    Location
    Lauderdale & Philly
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The bad part is after you do all the work they'll probably say: "You were right the load time is way to long", and make you change it again. At least that's what always happens to be when I warn a client about how their idea won't work. Make sure you state that if you have to change it again their will be an extra charge (if you're not getting paid hourly)
    Bill Clients - invoice software for web designers & consultants


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •