...

View Full Version : rollover multiple images: almost done!



steezjjc
08-18-2005, 05:07 PM
hi all;
i'm almost done with this little script but i can't figure out the finishing touch. basically i have an image gallery. there's like 8 thumbnails and then a main image holder. so when you rollover the thumbnails, the main image changes. now, i have the rollovers working and the main image chaning to correspond, BUT I CAN'T get the thumnails to stay on, if you rollout to blank space. also, i want the first thumbnail to appear on when the user comes to the page so they know which one is selected, and then to turn off when the user rolls over another thumbnail.
am i making sense?

here's my code so far:
the main javascript in the header:
<script>
function chngMain(name){
document.images['main'].src = "images/" + name + ".jpg";
}
</script>


for the thumbnail images:
<a href="#" onMouseOver="imgAdjJ('thm2', 'on');chngMain('imgGallery2')" onMouseOut="imgAdjJ('thm2', 'off');" onclick="javascript:chngMain('imgGallery2')"><img src="images/thm2_off.jpg" width="66" height="75" border="0" name="thm2"></a>


and finally the main image:
<img src="images/imgGallery1.jpg" width="329" height="384" border="0" name="main">

can someone give me some direction?
thanks so much.
best,
j

bloome
08-19-2005, 06:32 AM
I'm looking to do the same thing. I'd love to see your example in action. Do you have a URL?
bloome

Kor
08-19-2005, 01:22 PM
try this shorter (a single function, for both events and for both actions, using id instead of names and this as self reference) variant:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var r1 ='images/';var r2='.jpg';
function roll(obj){
var p = obj.src.split('/')[obj.src.split('/').length-1].split('_');
var q = p[0].split('thm')[1];
obj.src=(p[1].indexOf('off')==0)?r1+p[0]+'_on'+r2:r1+p[0]+'_off'+r2;//rollover effect
document.getElementById('main').src=r1+'imgGallery'+q+r2;//changes the picture in main
}
onload=function(){//sets onload the first thumb on
roll(document.getElementById('thm1'))
}
</script>
</head>
<body>
<img src="images/thm1_off.jpg" id="thm1" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
<br>
<img src="images/thm2_off.jpg" id="thm2" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
<br>
<img src="images/thm3_off.jpg" id="thm3" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
....
....
<img src="images/imgGallery1.jpg" id="main" width="329" height="384" border="0">
</body>
</html>

vwphillips
08-19-2005, 01:51 PM
or


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body onload="sssInit('ThumbNails','sssMainImg','*Message*');" >
<table border=1 cellspacing=1 cell padding=1 bgcolor=#FFCC66>
<tr height="20" >
<td colspan="3" align="center" style="font-Size:12px;" >
Click the Thumb Image to Enlarge<br>
Click the Large Image<br>
to View in Picture Frames
</td>
</tr>
<tr height="200" >
<td colspan="3" align="center" >
<img id="sssMainImg" src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/Initial.gif" >
</td>
</tr>
<tr>
<td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" ></td>
<td id="sssMessage" width=60 align="center" style="font-Size:12px;" >&nbsp;</td>
<td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" ></td>
</tr>
</table>
<table id="ThumbNails" >
<tr>
<td align="center" width="70"><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
<td align="center" width="70"><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
<td align="center" width="70"><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
</tr>
<tr>
<td align="center"><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
<td align="center" ><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
<td align="center" ><img src="http://www.vicsjavascripts.org.uk/FramePicSSlideShow/ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script language="JavaScript" type="text/javascript">
<!--
// Simple Slide Show sssPart1 (02-07-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// A Simple Slide Show which includes
// Display of a Large Image on Slide Show Forward or Back
// Display of a Large Image on Clicking The Thumb Nail Image
// Preloading of the Large Image before Displaying
// Directory Swapping when preloading the large image.

// The Thumb Nail and Large Image must have the same file name but different directories.
// Directory Swapping is carried outwhen preloading the large image.

// Application Notes

// The ThumbNail Images are defined in HTML Code and nested within an Element
// e.g.
//<table id="*ThumbNails*" >
// <tr>
// <td align="center" width="70"><img src="ThumbPortrait/picasso.jpg" width=50 height=60 ></td>
// <td align="center" width="70"><img src="ThumbPortrait/Pic1.jpg" width=50 height=60 ></td>
// <td align="center" width="70"><img src="ThumbPortrait/Pic2.jpg" width=50 height=60 ></td>
// </tr>
// <tr>
// <td align="center"><img src="ThumbLandScape/picasso.jpg" width=60 height=50 ></td>
// <td align="center" ><img src="ThumbLandScape/Pic1.jpg" width=60 height=50 ></td>
// <td align="center" ><img src="ThumbLandScape/Pic2.jpg" width=60 height=50 ></td>
// </tr>
// </table>

// where:
// *ThumbNails* = a unique id name (string)

// The Large Image is Defined in HTML Code
// e.g. <img id="*LargeImageID*" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" >

// where:
// *LargeImage* = a unique id name (string)
// A 'Blank' .gif is the initial image src.

// The Slide Show Controls are Defined in HTML Code
// e.g.
// <table>
// <tr>
// <td width=70 align="center" >
// <img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="sssSSBack();" >
// </td>
// <td id="*Message*" width=60 align="center" style="font-Size:12px;" ></td>
// <td width=70 align="center" >
// <img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="sssSSFwd();" >
// </td>
// </tr>
// </table>

// The onclick event call functions 'sssSSBack();' and 'sssSSFwd();' control the Side Show
// A message to advise on Large Image preload statue is optional
// where:
// *Message* = a unique id name (string)

// The Script is initalised from a <BODY> on load event
// e.g. <body onload="sssInit('*ThumbNails*','*LargeImage*','*Message*');" >
// where:
// *ThumbNails* = a unique id name (string)
// *LargeImage* = a unique id name (string)
// *Message* = a unique id name (string)

// Directory Swapping
// The Thumb Nail and Large Image must have the same file name
// but different directories.
// These Directories are defined in customising variables 'sssThumbDirectory' and 'sssLargeDirectory'
// To allow a number of directory applications the directories are specified in dimensioned arrays.
// When the directory of the Thumb Nail image matches a directory in 'sssThumbDirectory'

// the location of the Large image will be the corresponding field of 'sssLargeDirectory'

// All variable, function etc. names are prefixed with 'sss' to minimise conflicts with other JavaScripts.

// The Functional Code sssPart2(less than 1.5K) is best as an Extenal JavaScript


// Tested with IE6 and Mozilla FoxFire



// Customising Variables

var sssThumbDirectory = new Array('ThumbPortrait','ThumbLandScape');
var sssMainDirectory = new Array('LargePortrait','LargeLandScape');


//-->
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Simple Slide Show sssPart2 (02-07-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk


// Functional Code - NO Need to change
var sssTarget,sssImg,sssMess;
var sssImgAry=new Array();
var sssImage=new Array();

var sssCnt=-1;

function sssInit(tn,li,m){
sssTarget=document.getElementById(li);
sssImg=document.getElementById(tn).getElementsByTagName('IMG');
sssMess=document.getElementById(m);
for (sss0=0;sss0<sssImg.length;sss0++){
sssImgAry[sss0]=sssImg[sss0];
sssImg[sss0].nu=sss0-1;
// sssImg[sss0].onclick=function(){ sssCnt=this.nu; sssSSFwd(); }
sssImg[sss0].onmouseover=function(){ sssCnt=this.nu; sssSSFwd(); }
}
}

function sssSSBack(){
sssCnt--;
if (sssCnt<0){ sssCnt=sssImg.length-1; }
sssLoad();
}

function sssSSFwd(){
sssCnt++;
if (sssCnt==sssImg.length){ sssCnt=0; }
sssLoad();
}

function sssLoad(){
if (sssImage[sssCnt]){
sssTarget.src=sssImage[sssCnt].src;
}
else {
if (sssMess){ sssMess.innerHTML='Please Wait'; }
sssThisImg=sssImg[sssCnt];
for (sss0=0;sss0<sssThumbDirectory.length;sss0++){
sssImg[sssCnt].src=sssImg[sssCnt].src.replace(sssThumbDirectory[sss0],sssMainDirectory[sss0]);
}
sssImage[sssCnt]=new Image();
sssImage[sssCnt].onload=function(){
if (sssMess){ sssMess.innerHTML='&nbsp;'; }
sssTarget.src=sssImage[sssCnt].src;
}
sssImage[sssCnt].src=sssImg[sssCnt].src;
}
}



//-->
</script>

</body>

</html>



edited to allow mouseover and onclick operation

iota
08-19-2005, 02:01 PM
why don't you use CSS for this ?

http://forum.flashband.net/viewtopic.php?t=300

SpirtOfGrandeur
08-19-2005, 02:46 PM
why don't you use CSS for this ?

http://forum.flashband.net/viewtopic.php?t=300

Because CSS cannot change another objects properties on hover.

steezjjc
08-19-2005, 05:26 PM
thanks for all of your responses! i have a lot of feedback to put into use; thanks so much

steezjjc
08-19-2005, 06:04 PM
thanks for all your time in helping me with the mouse over issue. i just have two issues that i need to figure out. just to let you know i've utilized the code provided by Kor; i've pasted that below. i'm trying to modify it to conquer these two issues:

1.) right now the first thumbnail loads, that's great, but is there a way to have it turn off when another thumbnail is rolled over?


2.) and is there a way to have the thumbnails stay "on" until another thumb is rolled over?

again, thanks so much for your help...
best,
j

HERE IS THE CODE!!!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
var r1 ='images/';var r2='.jpg';
function roll(obj){
var p = obj.src.split('/')[obj.src.split('/').length-1].split('_');
var q = p[0].split('thm')[1];
obj.src=(p[1].indexOf('off')==0)?r1+p[0]+'_on'+r2:r1+p[0]+'_off'+r2;//rollover effect
document.getElementById('main').src=r1+'imgGallery'+q+r2;//changes the picture in main
}
onload=function(){//sets onload the first thumb on
roll(document.getElementById('thm1'))
}
</script>
</head>
<body>
<img src="images/thm1_off.jpg" id="thm1" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
<br>
<img src="images/thm2_off.jpg" id="thm2" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
<br>
<img src="images/thm3_off.jpg" id="thm3" width="66" height="75" border="0" style="cursor:pointer" onmouseover="roll(this)" onmouseout="roll(this)">
....
....
<img src="images/imgGallery1.jpg" id="main" width="329" height="384" border="0">
</body>
</html>

Kor
08-22-2005, 10:52 AM
try:


<script type="text/javascript">
var r1 ='images/';var r2='.jpg';
function roll(obj){
if(document.getElementById('thm1')!=obj){document.getElementById('thm1').src=r1+'thm1_off'+r2}
var p = obj.src.split('/')[obj.src.split('/').length-1].split('_');
var q = p[0].split('thm')[1];
if(p[1].indexOf('off')==0){document.getElementById('main').src=r1+'imgGallery'+q+r2;}
obj.src=(p[1].indexOf('off')==0)?r1+p[0]+'_on'+r2:r1+p[0]+'_off'+r2;//rollover effect
}
onload=function(){//sets onload the first thumb on
roll(document.getElementById('thm1'))
}
</script>

glenngv
08-22-2005, 01:04 PM
Because CSS cannot change another objects properties on hover.
http://www.meyerweb.com/eric/css/edge/popups/demo2.html

SpirtOfGrandeur
08-22-2005, 02:52 PM
http://www.meyerweb.com/eric/css/edge/popups/demo2.html


True you can get child elements to change, but in a document of this type and layout that he is looking for, there would be no way to get it to work.

glenngv
08-22-2005, 03:25 PM
True you can get child elements to change, but in a document of this type and layout that he is looking for, there would be no way to get it to work.
It might or might not be possible. But I just thought it seemed you "generalized" it. :p :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum