View Full Version : Easiest Rollovers on Earth!
Skyzyx
12-18-2002, 06:30 AM
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...
/*******************************************************************
* 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...
<body onLoad="soopaSetup();">
<a href="#"><img src="normal.gif" hsrc="hover.gif" dsrc="down.gif"></a>
</body>
Amazing little suckers... aren't they?
Roelf
12-18-2002, 06:56 AM
beautiful :eek:
Vladdy
12-18-2002, 11:57 AM
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>
Roelf
12-18-2002, 12:57 PM
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
joh6nn
12-18-2002, 02:55 PM
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.
ConfusedOfLife
12-19-2002, 08:45 PM
Thanx for sharing Skyzyx, it's really beautiful!
Check this out for a real rollover!
http://www.arcticpigs.com/demo/RolloverGeorge.html
beetle
12-19-2002, 09:51 PM
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 (http://www.peterbailey.net), this kooky thing (http://www.peterbailey.net/scramble.htm), 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. :D
cg9com
12-20-2002, 08:40 PM
easier?
<a onmouseover="document.image.src='button2.gif'"
onmouseout="document.image.src='button1.gif'">
<img src="button1.gif" border="0" name="image"></a>
ConfusedOfLife
12-20-2002, 09:08 PM
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!
beetle
12-20-2002, 09:46 PM
Originally posted by cg9com
easier?
<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.
Just because it seems you want complete convenience, I propose ditching the Javascript (and namespace pollution entirely):
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:
<?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.
beetle
12-20-2002, 10:55 PM
Now yer talking, jkd.
See, I told you (a general use of 'you') that CSS + XBL would be easy :D
If anyone wants to see the behavior version, I can probably throw it together =)
Originally posted by beetle
Now yer talking, jkd.
See, I told you (a general use of 'you') that CSS + XBL would be easy :D
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.
Skyzyx
12-21-2002, 02:35 AM
JKD, does IE support XBL like Moz does?
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.
Well,
This is all nice coding but all they do is swap images. I hardly ever use image swaps anymore but use Fading Rollovers (http://www.javascript-fx.com/fade_rollovers/demo2.html) instead.
I used to use Animated Rollovers (http://www.javascript-fx.com/menudev/jsfx5.html) (with sound (http://www.javascript-fx.com/post/linksound/jsfx5_snd.html) in IE) but there is a bug in IE5+ that sometimes causes the animation to stop.
I haven't finished it yet but Moving Rollovers (http://www.javascript-fx.com/development/moverollovers/demo1.html) might have some potential.
And if you play with IE filters you can come up with these effects
Filter Rollovers Demo1 (http://www.javascript-fx.com/scriptclips/mmrollovers/demo2.html)
Filter Rollovers Demo2 (http://www.javascript-fx.com/development/mmrollovers/demo2.html)
Just my 2 cents
Reno CF
02-07-2003, 03:54 PM
I am always up for learning more about js, so have a quick question....
The soopa-rollovers.js that Skyzyx posted seems to be a nice rollover, but it does not work in NN 4.7 -- is that because the code requires the "hover" affect, which NN 4.7 does not support?
Skyzyx
02-11-2003, 01:35 AM
Correct. Netscape 4.x doesn't support hardly any of the DOM, and this script relies on DOM scripting to work.
Reno CF
02-11-2003, 01:58 AM
Thanks Skyzyx. Am assuming there is no way to take the basic framework of the script you referenced, and re-work it to be more cross platform compliant?
glenngv
02-11-2003, 03:36 AM
If you make this worked in NS4, this would not be called the Easiest Rollovers on Earth anymore. :D
Reno CF
02-11-2003, 04:01 AM
Oh man, it really is that bad huh? Well then, what IS the Easiest Rollover on Earth (hereafter known as the EROE), that CAN be used with both IE and NN 4.7?
Or is that like looking for unicorns...... :confused:
I am surprised that with all the new w3c standards that are being proposed they didn't build rollovers into the <img> tag. They have a
src="some_img.gif"
and a
lowsrc="some_other.gif"
attribute why not an
oversrc="the_on_img.gif"
Anyway, I always like to be compatabile with NS4 :rolleyes: so take a look at this script (http://www.javascript-fx.com/post/imgswap/index.html) . It is so simple it's stupid :D (e.g. it tries to swap all images on the page :confused: ) but it does work in every browser I have tested with.
Vladdy
02-11-2003, 11:15 AM
They did - it's called hover pseudoclass
Skyzyx
02-13-2003, 04:44 PM
But, unfortunately, in IE the CSS hover pseudoclass only works for links, and not any other elements like it does in Moz.
This script pretty much emulates RoyW's last post, but won't validate properly.
Since Netscape 4 doesn't support the DOM, I don't believe this script could be re-worked for it. You'd have to add "onmouseover" events to every image.
Since Netscape 4 is garbage, and is only used by less than 5% of the public, I'd say it's pretty safe to feed NS4 downlevel scripting...
brothercake
02-13-2003, 05:34 PM
Originally posted by Skyzyx
I'd say it's pretty safe to feed NS4 downlevel scripting...
Since it's impossible to provide dynamic content for ns4 without creating invalid markup and polluting the DOM, I'd say it's bad practise *not* to feed ns4 downlevel scripting ..
But how do you deal with validation using this technique? hsrc and dsrc are invalid attributes, and since you can't append an existing DTD without problems in IE, doesn't this method imply invalidation?
I went with Vladdy's idea, did a little research and came up with
<style>
a.roll {
display: block;
font-family:arial;
font-size:14px;
text-decoration: none;
background: url("images/button_off.gif");
width:92px;
height:22px;
color:#999999;
}
a.roll:hover {
background: url("images/button_on.gif");
color:#FFFFFF;
}
</style>
and use with
<a href = "#" class="roll"> Link1 </a>
I had to use "display:block" to get it to work with NS7.
It doesn't work in Opera 5 and certainly won't work in NS4 but you can see it in action here
CSS Rollovers (http://www.javascript-fx.com/post/jscity/cssrollover/index.html)
The best thing is you only need 2 images for all your rollovers.
Originally posted by RoyW
I had to use "display:block" to get it to work with NS7.
Or to get it to work in any correct browser. <a> is inline by default, and therefore cannot respect any dimensions you explicitly assign to it.
vkidv
02-14-2003, 09:44 PM
why do we webmasters have to be continually be worried about platform. Just tell all the netscape to get IE! If ie supports most of things, why dont we just use that?
Or maybe a browswer which supports EVerything?
i dont care about Netscape users (no offense) i just tell them to get IE to read my site. my site, my rules.
Originally posted by vkidv
why do we webmasters have to be continually be worried about platform. Just tell all the netscape to get IE! If ie supports most of things, why dont we just use that?
Or maybe a browswer which supports EVerything?
i dont care about Netscape users (no offense) i just tell them to get IE to read my site. my site, my rules.
Or tell everyone to use a standards-compliant browser of their choice. Mozilla, Netscape 7, Safari, Konqueror, Opera 7.... they exist, and are infinitely better than what IE has to offer.
cg9com
02-15-2003, 01:17 AM
basically vkidv, if your talking about the best browser, as far as support. you would be talking about mozilla, there ahead of the class right now. however its almost irrelavent anyway because Internet Explorer is so widely used, it almost doesnt matter what mozilla has to offer.
if mozilla could take the place of IE, and continue there support as good as they do now, it would be great.
or at least if IE/win could be at least as good as IE/mac ...
Skyzyx
02-18-2003, 08:57 AM
IE is alright, but I believe only the ignorant (willfully or otherwise) push IE-only sites. If you compare it's standards support against Gecko browsers, it barely holds a candle.
If you like IE, that's fine. But write for both if you're gonna write for any...
Also, remember that at one point, Netscape held over 90% of the browser market (that is, until the disaster known as Netscape 4.x came to be...). Just because IE is the leader now, doesn't mean that Netscape Gecko can't regain the lead...
vBulletin® v3.8.2, Copyright ©2000-2012, Jelsoft Enterprises Ltd.