Hi there, I'm in the early stages of cobbling together this website for a friend;
http://dave-cunningham.com/imt/imthome.html
I'm happy with how it's going so far except that I'd like the t shirt thumbnails to change when rolled over. I know how to insert a rollover image, but not sure how to do it with these thumbnails as they are part of some lightbox code.
Can anyone help me to convert these thumnails to rollovers while retaining the lightbox feature?
This is the code for the t shirts table so far;
%26lt;table width=''200'' border=''0'' align=''center'' cellpadding=''0''%26gt;
?%26lt;tr%26gt;
?%26lt;td%26gt;%26lt;img src=''timages/title.gif'' width=''680'' height=''105'' /%26gt;%26lt;/td%26gt;
?%26lt;/tr%26gt;
%26lt;/table%26gt;
%26lt;p align=''center'' class=''style1''%26gt;click on a t shirt to see an enlarged view %26lt;/p%26gt;
%26lt;table width=''791'' height=''1108'' border=''0'' align=''center'' cellpadding=''1'' bordercolor=''#666666''%26gt;
?%26lt;tr%26gt;
?%26lt;td width=''259'' height=''365''%26gt;%26lt;a href=''timages/jo1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/jo2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td width=''259''%26gt;%26lt;a href=''timages/cranes1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/crane2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td width=''259''%26gt;%26lt;a href=''timages/love1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/love2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
?%26lt;tr%26gt;
?%26lt;td height=''365''%26gt;%26lt;a href=''timages/kishore1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/kishore2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td%26gt;%26lt;a href=''timages/kishoregirls1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/kishoregirls2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td%26gt;%26lt;a href=''timages/giraffe1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/giraffe2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
?%26lt;tr%26gt;
?%26lt;td height=''365''%26gt;%26lt;a href=''timages/dragonfly1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/dragonfly2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td%26gt;%26lt;a href=''timages/leaves1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/leaves2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
?%26lt;td%26gt;%26lt;a href=''timages/elephant1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/elephant2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
%26lt;/tr%26gt;
%26lt;/table%26gt;
Many many thanks!
converting an image to a rolloverYou can just use an image rollover with what you have
Here is a tutorial how to do it with javascript, and another one with css
Hope it helps..
converting an image to a rolloverThanks for your help!
I am aware of how to make rollover buttons. But since I am not good with code at all, I'm not sure how to combine this code with the lightbox code.
Can anyne help?
Cheers!
any takers?
Add this into the %26lt;head%26gt; section of your page
%26lt;script language=''JavaScript'' type=''text/JavaScript''%26gt;
%26lt;!--
function MM_preloadImages() { //v3.0
?var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
?var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i%26lt;a.length; i++)
?if (a[i].indexOf(''#'')!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
?var i,x,a=document.MM_sr; for(i=0;a%26amp;%26amp;i%26lt;a.length%26amp;%26amp;(x=a[i])%26amp;%26amp;x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
?var p,i,x;?if(!d) d=document; if((p=n.indexOf(''?''))%26gt;0%26amp;%26amp;parent.frames.length) {
?d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
?if(!(x=d[n])%26amp;%26amp;d.all) x=d.all[n]; for (i=0;!x%26amp;%26amp;i%26lt;d.forms.length;i++) x=d.forms[i][n];
?for(i=0;!x%26amp;%26amp;d.layers%26amp;%26amp;i%26lt;d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
?if(!x %26amp;%26amp; d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
?var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i%26lt;(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//--%26gt;
%26lt;/script%26gt;
And then add this into your %26lt;a href%26gt; tag
onMouseOut=''MM_swapImgRestore()'' onMouseOver=''MM_swapImage('Image','','image_over.gif',1)''
Where it has image in quotes, you have to add name=''Image'' to your %26lt;img%26gt; tag for it to work
thanks for your reply. But, I'm still struggling with this sorry.
I'm not sure where I insert this:
%26lt;td width=''259'' height=''365''%26gt;%26lt;a href=''timages/jo1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/jo2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
and which bits (if any) of the original code (below) I should remove.
%26lt;td width=''259'' height=''365''%26gt;%26lt;a href=''timages/jo1.jpg'' rel=''lightbox'' title=''my caption''%26gt;%26lt;img src=''timages/jo2.jpg'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
I only have a very rudimentry understanding of code, so, while I can pretty much figure out what parts mean, I'm not sure about syntax etc.
Can anyone help?
Cheers
The script code has to go inbetween the %26lt;head%26gt;%26lt;/head%26gt; tags in your html code and then what is in red has to go into the code you posted
%26lt;td width=''259'' height=''365''%26gt;%26lt;a href=''timages/jo1.jpg'' rel=''lightbox'' title=''my caption'' onMouseOut=''MM_swapImgRestore()'' onMouseOver=''MM_swapImage('Jo','','timages/jo1.jpg',1)''%26gt;%26lt;img src=''timages/jo2.jpg'' name=''Jo'' width=''259'' height=''363'' border=''0'' /%26gt;%26lt;/a%26gt;%26lt;/td%26gt;
So this link is just going to bring the user to an image correct? is that what you want?
yes! that's perfect. Thanks a million.
Glad I could help!
Cheers
No comments:
Post a Comment