...

View Full Version : disjoint rollovers with image and text



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

vwphillips
08-09-2006, 10:10 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
.imgd {
position:absolute;z-index:1;visibility:hidden;left:0px;top:0px;
}
.divd {
position:absolute;z-index:1;visibility:hidden;left:0px;top:200px;width:100%;height:50px;background-color:#FFFFCC;
}


</style>
<script type="text/javascript">

function SwapImg(id,img){
var imgs=document.getElementById(id).getElementsByTagName('IMG');
var ds=document.getElementById(id).getElementsByTagName('DIV');
for (var zxc0=1;zxc0<imgs.length;zxc0++){
ds[zxc0].style.visibility='hidden';
imgs[zxc0].style.visibility='hidden';
if (imgs[zxc0].src.match(img)){
ds[zxc0].style.visibility='visible';
imgs[zxc0].style.visibility='visible';
}
}
}

</script>
</head>

<body>
<a onmouseout="SwapImg('Grp1','XXX')" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onmouseover="SwapImg('Grp1','One')" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" onmouseover="SwapImg('Grp1','Two')"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50"onmouseover="SwapImg('Grp1','Three')" />
</a>
<br />
<div id="Grp1" style="position:relative;width:200px;height:200px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif" width="200" height="200" />
<img class="imgd" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="200" height="200" />
<img class="imgd" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="200" height="200" />
<img class="imgd" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="200" height="200" />
<div class="divd" style="visibility:visible;z-index:0;" >Text Std</div>
<div class="divd" style="" >Text 1</div>
<div class="divd" style="" >Text 2</div>
<div class="divd" style="" >Text 3</div>
</div>
</body>

</html>

CathyM
08-11-2006, 08:21 AM
Thanks, the code works, now modifying it to work on my site.

CathyM

CathyM
08-11-2006, 09:14 AM
I've tried modifying it, but it requires that I put each of the larger images on the webpage and text and put as hidden. I'm dealing with at least four groups here, which may have between 3 to 12 members. Adding both thumbnails and the images, requires alot of typing on the page, is there a way around that?

vwphillips
08-11-2006, 10:58 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
.imgd {
position:absolute;z-index:1;visibility:hidden;left:0px;top:0px;
}
.divd {
position:absolute;z-index:1;visibility:hidden;left:0px;top:200px;width:100%;height:50px;background-color:#FFFFCC;
}


</style>
<script language="JavaScript" type="text/javascript">
<!--

var Ary=[];
Ary[0]=['http://www.vicsjavascripts.org.uk/StdImages/','One.gif',200,200,'Text 1','divd'];
Ary[1]=[null,'Two.gif',200,200,'Text 2','divd'];
Ary[2]=[null,'Three.gif',200,200,'Text 3','divd'];
Ary[3]=[null,'Four.gif',200,200,'Text 4','divd'];


function zxcCreate(zxcid,zxcary){
var zxcobj=document.getElementById(zxcid);
for (var zxc0=0;zxc0<zxcary.length;zxc0++){
for (var zxc1=0;zxc1<zxcary[zxc0].length;zxc1++){ zxcary[zxc0][zxc1]=(zxcary[zxc0][zxc1]||zxcary[zxc0-1][zxc1]); }
var zxcimg=zxcStyle('IMG',{position:'absolute',zIndex:'1',visibility:'hidden',left:'0px',top:'0px',width :(zxcary[zxc0][2])+'px',height:(zxcary[zxc0][3])+'px'});
zxcimg.src=(zxcary[zxc0][0]||zxcary[zxc0-1][0])+zxcary[zxc0][1];
zxcobj.appendChild(zxcimg);
var zxcd=zxcStyle('DIV',{position:'absolute',zIndex:'1',visibility:'hidden',left:'0px',top:(zxcimg.offse tHeight)+'px'},zxcary[zxc0][4]);
zxcd.className=zxcary[zxc0][5];
zxcobj.appendChild(zxcd);
}
}

function zxcStyle(zxcele,zxcstyle,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}



function SwapImg(id,img){
var imgs=document.getElementById(id).getElementsByTagName('IMG');
var ds=document.getElementById(id).getElementsByTagName('DIV');
for (var zxc0=1;zxc0<imgs.length;zxc0++){
ds[zxc0].style.visibility='hidden';
imgs[zxc0].style.visibility='hidden';
if (imgs[zxc0].src.match(img)){
ds[zxc0].style.visibility='visible';
imgs[zxc0].style.visibility='visible';
}
}
}

//-->
</script>


</head>

<body onload="zxcCreate('Grp1',Ary);" >

<a onmouseout="SwapImg('Grp1','XXX')" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="50" onmouseover="SwapImg('Grp1','One')" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="50" height="50" onmouseover="SwapImg('Grp1','Two')"/>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="50" height="50"onmouseover="SwapImg('Grp1','Three')" />
</a>
<br />


<div id="Grp1" style="position:relative;width:200px;height:200px;" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Nine.gif" width="200" height="200" />
<div class="divd" style="visibility:visible;z-index:0;" >Text Std</div>
</div>
</body>

</html>

CathyM
08-11-2006, 03:26 PM
Thanks,

Before I implement it, I will try to decipher it to make sure I understand it, so when to use something similar or want to modify it, I can do so without pulling out my hair. If I have any questions I will let you know. One question on the script, is the position: absolute necessary, the pictures I am using are interspersed with text, which may flow across the screen based on size and resolution, so where the original pictures appear will differ. I supposed I can create a script to obtain the position of the images on the page and use that, but that can be obtained after the page has loaded.

CathyM



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum