Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Easiest Rollovers on Earth!

    I didn't write this, but my head just about exploded when I realized how easy these were. I got it from http://www.youngpup.net.

    This part would be the contents of a JS file...
    Code:
    /*******************************************************************
     * soopa-rollovers.js
     * 7/28/2001
     * www.youngpup.net
     *
     * easiest rollovers on earth, baby!
     * see www.youngpup.net for documentation.
     *******************************************************************/
    
    
    function soopaSetup() {
    	var img, sh, sn, sd
    	for (var i = 0; (img = document.images[i]); i++) {
    		if (img.getAttribute) {
    
    			sn = img.getAttribute("src");
    			sh = img.getAttribute("hsrc");
    			sd = img.getAttribute("dsrc");
    
    			if (sn != "" && sn != null) {
    				img.n = new Image();
    				img.n.src = img.src;
    			
    				if (sh != "" && sh != null) {
    					img.h = new Image();
    					img.h.src = sh;
    					img.onmouseover = soopaSwapOn
    					img.onmouseout  = soopaSwapOff
    				}
    
    				if (sd != "" && sd != null) {
    					img.d = new Image();
    					img.d.src = sd;
    					img.onmousedown = soopaSwapDown
    				}
    			}
    		}
    	}
    }
    
    function soopaSwapOn() {
    	this.src = this.h.src;
    }
    
    function soopaSwapOff() {
    	this.src  = this.n.src;
    }
    
    function soopaSwapDown() {
    	this.src  = this.d.src;
    	this.temp = typeof(document.onmouseup) != 'undefined' && typeof(document.onmouseup) != 'unknown' ? document.onmouseup : "";
    	soopaSwapUp.img = this;
    	document.onmouseup = soopaSwapUp;
    }
    
    function soopaSwapUp() {
    	var ths = soopaSwapUp.img;
    	ths.src = ths.n.src;
    	if (ths.temp) document.onmouseup = ths.temp;
    }
    Meanwhile, this is what you'd do to use them...
    Code:
    <body onLoad="soopaSetup();">
    
    <a href="#"><img src="normal.gif" hsrc="hover.gif" dsrc="down.gif"></a>
    
    </body>
    Amazing little suckers... aren't they?

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts
    beautiful
    I am the luckiest man in the world

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the EASIEST rollover would be:


    <style>
    #link1:link, #link1:visited, #link1:active, #link1:hover
    { height: 50px;
    width: 200px;
    background: url("link1off.gif");
    }

    #link1:hover
    { background: url("link1on.gif");
    }
    </style>
    ....

    ....
    <a href = " ... " id = "link1"> </a>
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Zwolle, The Netherlands
    Posts
    1,120
    Thanks
    2
    Thanked 31 Times in 31 Posts
    but that would require a lot of css-coding for more links the first solution is a one time coding, and each link specify only the over, off , down and up image. I like that better
    I am the luckiest man in the world

  • #5
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    i don't think that's "easiest". i think that's arguably better ( assuming your target browsers support it ), but not necessarily easier.

    there's always room for improvement, and that holds true in this script, too, even as neat as it is.
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanx for sharing Skyzyx, it's really beautiful!
    Check this out for a real rollover!
    http://www.arcticpigs.com/demo/RolloverGeorge.html

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yessir, Skyzyx. Mr. Aaron Broodman does some cool stuff. In fact, observing his code has a small part in my development of stuff like NavMenu, this kooky thing, and fInteract (no released yet, but uses the same principle).

    Since XHTML, I've come to have an affinity for scripts that use HTML markup (attributes, specifically) to talk to or provide information for scripts. It's a great way to do it.

    Vladdy, if you combine your concept with XBL or Behaviors, NOW you're talkin easy.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    easier?
    Code:
    <a onmouseover="document.image.src='button2.gif'" 
    onmouseout="document.image.src='button1.gif'"> 
    <img src="button1.gif" border="0" name="image"></a>

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #9
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, come on guys! We all know that it's always a better way, but the code is nice and beautiful, ok?! I don't think that Skyzyx wants to share anything else with us!

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by cg9com
    easier?
    Code:
    <a onmouseover="document.image.src='button2.gif'" 
    onmouseout="document.image.src='button1.gif'"> 
    <img src="button1.gif" border="0" name="image"></a>
    No, not by a long shot. Scripts like the one above are designed to make it 'easier' by reducing the amount of time spent coding each rollover image. No contest.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #11
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Just because it seems you want complete convenience, I propose ditching the Javascript (and namespace pollution entirely):

    Code:
    img[hsrc] {
    	-moz-binding: url(/rollover.xml#hover);
    }
    img[dsrc] {
    	-moz-binding: url(/rollover.xml#down);
    }
    img[hsrc][dsrc] {
    	-moz-binding: url(/rollover.xml#both);
    }
    Have every page you want include that somehow (external CSS maybe), and have:
    Code:
    <?xml version="1.0"?>
    <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml">
    	<binding id="all">
    		<implementation>
    			<field name="originalSrc" readonly="true">this.src</field>
    		</implementation>
    	</binding>
    	<binding id="hover" extends="#all">
    		<handlers>
    			<handler event="mouseover" action="this.src = this.getAttribute('hsrc')"/>
    			<handler event="mouseout"  action="this.src = this.originalSrc"/>
    		</handlers>
    	</binding>
    	<binding id="down" extends="#all">
    		<handlers>
    			<handler event="mousedown" action="this.src = this.getAttribute('dsrc')"/>
    			<handler event="mouseup"   action="this.src = this.originalSrc"/>
    		</handlers>
    	</binding>
    	<binding id="both" extends="#all">
    		<handlers>
    			<handler event="mouseover" action="this.src = this.getAttribute('hsrc')"/>
    			<handler event="mouseout"  action="this.src = this.originalSrc"/>
    			<handler event="mousedown" action="this.src = this.getAttribute('dsrc')"/>
    			<handler event="mouseup"   action="this.src = this.getAttribute('hsrc')"/>
    		</handlers>
    	</binding>
    </bindings>
    In your root directory. You're done. No need to wastefully iterate through every single image on page load (the original script posted on this thread doesn't apply the hsrc and dsrc behavior to dynamically created elements), nor does this one take up the onload event or onmouseup, let alone expose anything at all.

  • #12
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now yer talking, jkd.

    See, I told you (a general use of 'you') that CSS + XBL would be easy

    If anyone wants to see the behavior version, I can probably throw it together =)
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #13
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by beetle
    Now yer talking, jkd.

    See, I told you (a general use of 'you') that CSS + XBL would be easy

    If anyone wants to see the behavior version, I can probably throw it together =)
    I would have, but I decided I didn't want to bother writing less "clean" code by checking which attributes are present (as since IE doesn't support attribute selectors, I can't assign specific behaviors based on which attributes are present, like I'm doing with Moz).

    Easy enough though if you want to do it.

  • #14
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    JKD, does IE support XBL like Moz does?

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #15
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Skyzyx
    JKD, does IE support XBL like Moz does?
    No, hence the need for behaviors. I don't like writing them, but they are actually easier to write (albeit less powerful) than an XBL binding, and if you really want the equivalent behavior, I suppose I could whip one up.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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