June 6, 2007 at 12:51 pm #5595
EDIT: all the code dissapeared :S
i know i’m harassing u ppl with all this html/php/java stuff already from a week
but there’s 1 last thing i can’t figure out…
(yes, i know u’ll say there are simpler and more efficient methods to do this.. but this is the only one that seemed to work for me, (even though it doesn’t actually work)…
let me explain this a bit better:
there is a menu at the top of a webpage, made up of 5 images…
i made a copy of all these images and renamed them as follows
image1.jpg –> image1b.jpg etc…
then i pulled up the cotrast and lighting of the midtones to get a brighter look on the “b” images.
now i wanted to make it so that when the mouse is “hovering” or just passing over those 5 images, the images light up (independently of one another)
the code i managed to copy/edit is the following
which goes in the HEAD
and this which goes in the BODY:
(there are websites under the ***)
(the code above from the body is for 2 of the 5 images)
the problem is that none of the image rollovers work 🙁
by chance, in the following script, the first image actually does roll over, don’t ask me why :S (i can’t see any differences with the above code)
(if you read till here i can’t thank you enough !, i know it’s long :S )June 6, 2007 at 3:19 pm #42723
maybe you should start at the beginning? (or is that the beginning?)
*only if you promise to not use it until you completely understand what it does and could do it yourself next time. (you should never copy and paste code without knowing what it does)June 6, 2007 at 3:34 pm #42724
btw, i do understand what it does, even though i wouldn’t be able to write it from scratch
btw, if you could send me the code it would be great
(i’ll use w3schools.com to analyze every bit of it and understand what it does)
i already signed up for a java online class a few days ago, it starts june 15th
I haven’t commented the code, but here are the basics:
Next you check that the client browser supports the features you’re about to use (html DOM).
Then, (this is the bit you were stuck with?)..
You store your img elements in an array and increment though them assigning a function to each ones mouseover/out event, as well as giving each one a number (with “.number”).
I’ve attached a zip file.
Try typing “mouseover” in googleJune 7, 2007 at 4:07 pm #42726
thx lt daddy
that’s a cool way of doing it !
i fianally got it working the other way, but ur’s is definitely smarter, and now that i need to make a second menu i’ll use what u wrote.
(as soon as it’s up i’ll show u how it came out)
i’m also forcing myself to understand every part of the script, 😆
even though i got the main “meaning” of it. 😕
thx againJune 7, 2007 at 4:59 pm #42727
Cool. I’ll look out for it.
If you want to, you can simplify the script I included a little bit by making better use of “this”…
var images0 = new Array('image00.png','image01.png','image02.png');
var images1 = new Array('image10.png','image11.png','image12.png');
var preload = new Array();
for(i=0; i< images1.length; i++)
preload = new Image();
preload.src = 'media/'+images1;
var checkdom = (document.createElement && document.getElementsByTagName);
window.onload = init;
if (!checkdom) return;
var imgGroupId = document.getElementById('imgGroupId');
var imgIds = imgGroupId.getElementsByTagName('img');
for (var i=0;i<imgIds.length;i++)
imgIds.onmouseover = mouseOverImage;
imgIds.onmouseout = mouseOutImage;
imgIds.number = ;
this.src = 'media/'+images1[this.number];
this.style.borderColor = '#8AC4FF';
this.src = 'media/'+images0[this.number];
this.style.borderColor = '#ffffff';
(It’s pretty much the same, just one less array).
You must be logged in to reply to this topic.