Photo Album script

[rabbits2]

http://www.dynamicdrive.com/dynamici...photoalbum.htm

I am wanting to use your photo album script but add to it some On MouseOver Behaviours to create mouseover effects on each image file in the album, see below:

I wish to use your:

function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
return tempcontainer
}

but some how add in something like this:

<a href="#" onMouseOver="window.document.first_form.first_text.value=<%=rs_pics("product_name")%>;window.document.first_form.second_text.value=<%=rs_pics("product_id")%>;wi ndow.document.images['imageBig'].src = '<%=rs_pics("medium_media_file_name")%>'"><img name="<%=rs_pics("menufile")%>" border="0" src="<%=rs_pics("menufile")%>"></a>

rs_pics is a declared recordset.

Any help with this would be great, thanks

[jscheuer1]

There are too many things about this line of code:

<a href="#" onMouseOver="window.document.first_form.first_text.value=<%=rs_pics("product_name")%>;window.document.first_form.second_text.value=<%=rs_pics("product_id")%>;window.document.images['imageBig'].src = '<%=rs_pics("medium_media_file_name")%>'"><img name="<%=rs_pics("menufile")%>" border="0" src="<%=rs_pics("menufile")%>"></a>

That I do not understand. Could you write for example a normal link that would launch one of those record images in a new window. The normal HTML code for something like that would be:

<a href="some.jpg" target="_blank">Click to see some.jpg</a>

How would that be written using:

<%=rs_pics("medium_media_file_name")%>

instead of "some.jpg"? Get something simple like that working and show me what the correct syntax for that would be and I should be able to figure most of it out.

[rabbits2]

If I use nasty dreamweaver code it looks like this:

<a href="#" onMouseOver="MM_swapImage('image_big','','<%=rs_pics("medium_media_file_name")%>',1);MM_setTextOfTextfield('txt_itemdescription','','<%=rs_pics("product_name")% ><% Response.write rs_pics("product_short_description")%>Price:<%=(rs_pics("product_price"))%>Catalogue No : <%=rs_pics("catalog_id")%>No Delivery Charge with this item!');MM_setTextOfTextfield('txt_productid','','<%=rs_pics("product_id")%>')" onClick="MM_swapImage('image_big','','<%=rs_pics("menufile")%>',1);">
<img name="<%=rs_pics("menufile")%>" border="0" src="<%=rs_pics("menufile")%>"></a>

[rabbits2]

All I am after is including a MouseOver Behaviour within your function:

function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
return tempcontainer
}

If you could show me how you would include a simple mouseover behaviour to change the text of a textbox called txt_productdescription I would appreciate it. Thanks.

[jscheuer1]

Well, adding a mouse over function in that code is relatively easy, I have taken your code as you supplied it (not what I asked for, BTW), turned it into a function and added a call to that function from the DD code you quoted (it is not 'my code', I am not working for DD):

function mOver1(){MM_swapImage('image_big','','<%=rs_pics("medium_media_file_name")%>',1);MM_setTextOfTextfield('txt_itemdescription','','<%=rs_pics("product_name")%><% Response.write rs_pics("product_short_description")%>Price:<%=(rs_pics("product_price"))%>Catalogue No : <%=rs_pics("catalog_id")%>No Delivery Charge with this item!');MM_setTextOfTextfield('txt_productid','','<%=rs_pics("product_id")%>')" onClick="MM_swapImage('image_big','','<%=rs_pics("menufile")%>',1);"> 
<img name="<%=rs_pics("menufile")%>" border="0" src="<%=rs_pics("menufile")%>"}


function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" onmouseover="mOver1();" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
return tempcontainer
}

You will notice the red highlighted part. That is one way to add any function to the DD code onmouseover. A neat trick may be used:

function buildimage(i){
var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" onmouseover="mOver2(this, \''+i+'\');" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
return tempcontainer
}

Here the function mOver2(el, num) would receive two parameters from each unique image the above code writes. The first parameter would be the element (as an object) that contains the image. The second parameter would be the unique number that identifies the image's source and other features (if any) in the primary galleryarray. What you do with them in the new mOver2(el, num) function is to to you but, as a simple demo try:

function mOver2(el, num){
alert ('Image source is '+el.src+'\nIt\'s number in the primary array is '+num+'\nOther values in the array, if any, are:\n '+galleryarray[num].toString().substr(galleryarray[num].toString().indexOf(galleryarray[num][0])+galleryarray[num][0].length+1))
}

[rabbits2]

If I write the gallery array like this using a recordset called rs_pics:

"<%
dim counter
counter = 0
Do while not rs_pics.EOF
%>"
galleryarray[<%=counter%>] = ["<%=rs_pics("menufile")%>", "<%=rs_pics("product_name")%>", "optional url","<%=rs_pics("product_id")%>","<%=rs_pics("large_media_file_name")%>"]

"<% counter = counter + 1
rs_pics.moveNext
Loop
%>"

I can see how it is meant to work, The nearest I have got is the code below, the problem with the code below is that for some reason the product_id being passed remains the same for all images in the gallery and the textchange fucntion changes the text to the same product_name every mouseOver, so I am not understanding why the correct record for each image is being accessed. Could it be anything to do with the other part of this code that deals with specifying dimension of gallery (number of images shown), such as 4x2, 3x1 etc.
Thanks for your help with this. Huge thanks.

function buildimage(i){
var tempcontainer=galleryarray[i][2]!=""? '<a href="javascript:void();" >' : ""
tempcontainer+='<img src="'+galleryarray[i][0]+'" onclick="productwindow(galleryarray[i][3])" onMouseOver="changetext(galleryarray[i][1]);" border="1" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
return tempcontainer
}

function changetext(productName) {
document.form1.txt_itemdescription.value= productName;
}

function productwindow(product) {
open("productpicB.asp?product=" + product ,null,
"height=500,width=500,status=yes,toolbar=no,menubar=no,location=no");
}