CathyM
08-09-2006, 06:07 AM
Hello,
I am trying to create some rollovers using the following scenario. I have four groups, let’s say hearts, diamonds, clubs and spades. Each of these groups have a varied amount of members. For each group, there is a short description of what the group is supposed to do, and then thumbnails of each of the members. To the right of the thumbnails is an image that holds a standard image, but would change to the enlarged picture of the member when the mouse is over the member's thumbnail, and below that image is another area which will hold the person name and position if any within that group. Basically there are four rollover groups. I can do the rollover for an image okay as in this code, adding more variables and images as necessary using something like this.
var h1_on = new Image();
h1_on.src = "images/hearts1.jpg";
var h1_desc = new Image();
h1_desc.src = "images/heartsDesc1.jpg";
//categ determines the category either hearts, diamonds, clubs or spades, while shows determines
//the category and actual number h1, h2,h3, etc
function over(categ,shows) {
var descriptions = [categ]+"below";
document[categ].src = eval(shows + "_on.src");
document[descriptions].src = eval(shows + "_below.src");
}
//picName determines the category, the same picture appears for each thumbnail in the same category
function out(picName) {
var descript = [picName]+"below";
document[picName].src = "images/member6.jpg";
document[descrip].src = "images/member5.jpg";
}
However, I want to preload the images, and use arrays to hold the descriptions and images of the four groups. I figure out I have to put in four separate arrays each for the descriptions and images. I checked out scripts on the net, and got something like this.
if (document.images){
var flippedH = new Array();
for(i=0; i<6; i++){
flippedH(i)=new image();
flippedH(i).src = "images/hearts"+[i+1]+".jpg";
}
}
but I figure out using - if(document.images){ - would utilize all the images on the page, but I need to put the different images in different arrays, how can I capture only a specific set of images for each array, should I put each group in separate divs and then utilize the id of the div?
Also for the functions, as listed below, flipped+[categ][num] should evaluated as flippedS[2] for example, but I am not sure if how I place the square brackets will work.
//categ takes on values of H, D, C or S while num takes on values of 1, 2, 3, etc
function over(categ, num){
if (document.images){
document.images.holdings[categ].scr = flipped+[categ][num].src;
}
document.descrip[categ] = descrip[categ][num]
}
//categ2 takes on values of H, D, C and S
function out(categ2){
document.images.holdings[categ2].src = flipped[categ2][0];
document.descrip[categ2] = descrip[categ][0]
}
Any help appreciated.
CathyM
I am trying to create some rollovers using the following scenario. I have four groups, let’s say hearts, diamonds, clubs and spades. Each of these groups have a varied amount of members. For each group, there is a short description of what the group is supposed to do, and then thumbnails of each of the members. To the right of the thumbnails is an image that holds a standard image, but would change to the enlarged picture of the member when the mouse is over the member's thumbnail, and below that image is another area which will hold the person name and position if any within that group. Basically there are four rollover groups. I can do the rollover for an image okay as in this code, adding more variables and images as necessary using something like this.
var h1_on = new Image();
h1_on.src = "images/hearts1.jpg";
var h1_desc = new Image();
h1_desc.src = "images/heartsDesc1.jpg";
//categ determines the category either hearts, diamonds, clubs or spades, while shows determines
//the category and actual number h1, h2,h3, etc
function over(categ,shows) {
var descriptions = [categ]+"below";
document[categ].src = eval(shows + "_on.src");
document[descriptions].src = eval(shows + "_below.src");
}
//picName determines the category, the same picture appears for each thumbnail in the same category
function out(picName) {
var descript = [picName]+"below";
document[picName].src = "images/member6.jpg";
document[descrip].src = "images/member5.jpg";
}
However, I want to preload the images, and use arrays to hold the descriptions and images of the four groups. I figure out I have to put in four separate arrays each for the descriptions and images. I checked out scripts on the net, and got something like this.
if (document.images){
var flippedH = new Array();
for(i=0; i<6; i++){
flippedH(i)=new image();
flippedH(i).src = "images/hearts"+[i+1]+".jpg";
}
}
but I figure out using - if(document.images){ - would utilize all the images on the page, but I need to put the different images in different arrays, how can I capture only a specific set of images for each array, should I put each group in separate divs and then utilize the id of the div?
Also for the functions, as listed below, flipped+[categ][num] should evaluated as flippedS[2] for example, but I am not sure if how I place the square brackets will work.
//categ takes on values of H, D, C or S while num takes on values of 1, 2, 3, etc
function over(categ, num){
if (document.images){
document.images.holdings[categ].scr = flipped+[categ][num].src;
}
document.descrip[categ] = descrip[categ][num]
}
//categ2 takes on values of H, D, C and S
function out(categ2){
document.images.holdings[categ2].src = flipped[categ2][0];
document.descrip[categ2] = descrip[categ][0]
}
Any help appreciated.
CathyM