 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Vanguard
Joined: 08 Nov 2005
Posts: 2
|
 Posted: Tue Nov 08, 2005 9:33 am Rollover trouble |
 |
|
|
| Ok, well I have this site I'm designing for a class project, well, I need to do rollover buttons, well I want to. Is there anyway to do a faster non-Java oriented roll-over image, other then CSS. Also I want a object that looks like a video screen where horizontal lines are scrolling down it, not to many, so as you can't see the scrolling image links, which brings me to my second question does anyone know how I can have a set of images scroll to the left and each image is a different link, kinda like what's at the top of the Grey Cobra page at Grey Cobra |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8748
Location: Castle Pines North, CO USA
|
| Posted: Tue Nov 08, 2005 2:35 pm |
|
|
|
|
Save this as rollover.js
| Code: |
function initRollovers() {
if (!document.getElementById) return
var aPreLoad = new Array();
var sTempSrc;
var aImages = document.getElementsByTagName('img');
for (var i = 0; i < aImages.length; i++) {
if (aImages[i].className == 'imgover') {
var src = aImages[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var hsrc = src.replace(ftype, '_o'+ftype);
aImages[i].setAttribute('hsrc', hsrc);
aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;
aImages[i].onmouseover = function() {
sTempSrc = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('hsrc'));
}
aImages[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
this.setAttribute('src', sTempSrc);
}
}
}
}
window.onload = initRollovers; |
and then insert it into your HTML document (in the <head>), something like:
| Code: |
| <script src="/includes/rollover.js" type="text/javascript"></script> |
. Now create two images, one home.gif & one home_o.gif. And create something like
| Code: |
| <img src="/images/home.gif" alt="Home" width="40" height="48" class="imgover"> |
The above will create a rollover that is compliant |
|
Vanguard
Joined: 08 Nov 2005
Posts: 2
|
| Posted: Tue Nov 08, 2005 6:12 pm |
|
|
|
| Thanks a lot, btw, what program do I use for saving a file as a .js, or can I just save it with notepad? |
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8748
Location: Castle Pines North, CO USA
|
| Posted: Wed Nov 09, 2005 4:20 am |
|
|
|
| Yes - notepad is fine. Most WYSWYG editors will also allow you to save as a js file |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
