SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Location
    New Zealand
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image mouse overs

    a 1 picture mouse over change is easy enough for me, but how do u change another picture when u mouseover some other picture? (like this site)

    grtz sal.
    nz

  2. #2
    My precious!!! astericks's Avatar
    Join Date
    Mar 2002
    Location
    Vancouver, BC
    Posts
    1,971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it's called 'multiple mouseover'

    here are some links that might help you.

    http://www.glassdog.com/design-o-ram...lti-mouseovers

    recommended : http://www.technorealm.co.uk/scripts...mouseover.html

  3. #3
    SitePoint Member
    Join Date
    Sep 2002
    Location
    New Zealand
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, ty for those links

    on the same subject, i was talking to a friend about mouse overs and how some work almost instantly, while others which could be smaller than the 'quick ones', take a long time before giving the mouse over picture

    he said it had some thing to do with a low src script, whats that?

    grtz sal.
    nz

  4. #4
    SitePoint Zealot Taranis's Avatar
    Join Date
    Aug 2002
    Location
    Franklin, TN
    Posts
    197
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, it has to do with the preloading of the images. You should use javascript to preload the on and off versions of each mouseover you have on the page.

    You can do it simply with something like this:
    Code:
    <script language="JavaScript">
    <!-- Begin
    
    image1 = new Image();
    image1.src = "image1.gif";
    
    image2 = new Image();
    image2.src = "image2.gif";
    
    // End -->
    </script>
    listing all the appropriate images. If you do a search on this site or the web, you can probably find one that will automatically preload the correct images for you.

    Here's a mouseover script that I have been using for a while, but it only does the single mouseover.
    Code:
    <script language="JavaScript">
    function initMouseOvers() {
    	var imgs = document.images, osrc
    	for (var i = 0; i < imgs.length; i++) {
    		osrc = imgs[i].getAttribute("osrc")
    		if (osrc != "" && osrc != null) {
    			imgs[i].oimg = new Image()
    			imgs[i].img  = new Image()
    			imgs[i].oimg.src = osrc
    			imgs[i].img.src  = imgs[i].src
    			imgs[i].onmouseover = swapOn
    			imgs[i].onmouseout = swapOff
    		}
    	}
    }
    
    function swapOn() {
    	this.src = this.oimg.src
    }
    
    function swapOff() {
    	this.src = this.img.src
    }
    </script>
    What makes this nice is that you only add one thing to your HTML. Simply put the path to the "on" image in the fake attribute "osrc". Of course, this will cause your code to be "invalid" according to the specs.
    Code:
    <img src="images/myimage_off.gif" osrc="images/myimage_on.gif" height="10" width="35">


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
  •