Rollovers connected to a database

Not sure how to ask this.  I have a product database with images.  The images show in one layer using bindings and server behaviors to click through to the next image.  

<img src="<%=(Tees.Fields.Item("ProductPicture").Value)%>">

My problem is that some but not all of the images need to have a rollover.  I tried making the rollover in fireworks and putting the .jsp image under ProductPicture in the database - but when I click next and get to that picture it does not show.  

I can't make the rollover in Dreamweaver becasue the layer is populated from the database.  

Oh - also I'm using Dreamweaver2004, ASP/VBscript and Microsoft Access if that helps.

Is it possible to do this and if so how?

PS: I don't want to use frames because I am also using WA Ecart and Paypal and frames conflict with submitting to Paypal with WA Ecart.  Alternatively - if someone knows a way to use WA Ecart with frames that would also work.

Not sure what is the best way to go.

I hope this makes sense.
avajAsked:
Who is Participating?
 
alexhoganConnect With a Mentor Commented:
[snip]
Alex - I don't think I follow you when you say " select a data source instead of the file from a location".
[/snip]

When you create the rollover DW will ask you for the location of the image that you are going to use for the initial image and then the rollover image.  When you press the 'browse' button next to the textbox on that dialog box you are taken to a standard open dialog box.  At the top of that dialog box there are radio buttons that give you two choices.
Select file name from:  file system
                                  data sources

You will want to select 'data sources'.  You will be given a recordset dialog that shows what fields you have available in the current connection.

Select the desired field.

Below is an example using the initial image as coming from the "Photo" field and the rollover image coming from the "PhotoOvr" field.

<div id="one" align="center">
<a href="index.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ImageTest','','<%=(rsTest.Fields.Item("Photo").Value)%>',1)"><img name="ImageTest" border="0" src="<%=(rsTest.Fields.Item("PhotoOvr))").Value)%>"></a>
</div>

This entire code block can be stored in a field and called by what ever means you like.  All of the funcitonality will be intact.
0
 
webwomanCommented:
You need to use a standard javascript rollover, not what DW or Fireworks generates, and you need to populate it from the database. There also need to be TWO images for each thing you want as a rollover, and they CANNOT be stored in the database itself, though the locations should be.

There are no wizards, no helps, to do this. It's not impossible, but you'll need to know client side and server side scripting, and where everything is.
0
 
alexhoganCommented:
> I can't make the rollover in Dreamweaver becasue the layer is populated from the database.

I'm not sure I understand the nature of this statement.  You can use Dreamweaver to create rollovers using a db.  You just select a data source instead of the file from a location.

This will populate even if it is part of the layer coming from a db.

If you are using a repeat region to display the images then you will have to either;
Make all of the images rollovers - For the images that don't have rollovers associate the same image for both states.

Or

Write a simple branching statement that says;
if rollover then
  rollover image
else
  non-rollover image
endif

This would be the preferred method.  You may have to excuse my syntax if it's wrong.  I haven't used VBScript in a long time.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
avajAuthor Commented:
Alex - I don't think I follow you when you say " select a data source instead of the file from a location".  

It is just one layer or table cell (doesn't matter) that is bound to the field Named: ProductPicture in the db.  Example of the field source in db would be:  

images/picture1.jpg.  

I'm using the server behaviors Move Next; Move Previous to scroll through each picture.

The code used to populate the layer or cell is
<img src="<%=(Tees.Fields.Item("ProductPicture").Value)%>">

I'm not using repeat regions.

Can you show me an example of what you mean by " select a data source instead of the file from a location"?


Webwoman - if I do need to write the javascript code myself  - by image locations stored in the database does that just mean i.e., images/picture1.jpg?

0
 
webwomanCommented:
Yes, exactly. You only want the path to the image, NOT the actual image stored in the database. You'll also need to store TWO paths -- one for on and one for off.
0
 
avajAuthor Commented:
Alex - did not realize I could do that...exept for me it is not working.

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('TestImage','','<%=(rsPhoto.Fields.Item("ProductPictureRollover").Value)%>',1)"><img name="TestImage" border="0" src="<%=(rsPhoto.Fields.Item("ProductPicture").Value)%>"></a>

This is the code that was generated.  I have both a ProductPicture field and a ProductPictureRollover field in the database.  I tried putting the same image in both and a different image in each one (of equal size).
Either way the rollover does not show..Nothing happens in Netscape and in IE6 it goes blank with the small (box and x) underneath it.

I've doubled checked to make sure my images were named correctly in the db - I even cut and pasted so there was no way I could make a typo.

Any ideas?  

0
 
alexhoganCommented:
What are the values in the fields in the db?

Try this;

Create a test page that doesn't connect to the db.
Using the rollover image control create a rollover image.
Insure that the path that works with the test page is the same as you have in the fields in the db.

Also, post the table structure of your db.  I'll create a test file from that and post the code back to you.
0
 
webwomanCommented:
No, no, no.

You need to use a loop to go through the recordset, you need to construct the javascript array for the images from the database, you need to load every image that's a mouseover from the database, and you need to call the script on each link using the on image that you load (again) from the database.

You CANNOT use a wizard of any kind to do this. They WILL NOT do what you need. Just selecting a field from the recordset does NOT generate the array, loop through the recordset, or set up ANYTHING correctly. What has been shown is just ONE image, not many, and it does NOTHING for the javascript array/code. You said not all the images need to be rollovers -- how are you determining what ones need it, how are you going through the database to load the appropriate images?

You need to construct this yourself. It's not impossible, but it is NOT a simple task. The syntax shown is correct, but that's the easy part -- the logic for how to go through the database and pull out the right images, and the javascript array that's needed, are the guts.
0
 
avajAuthor Commented:
 Appreciate both your help!
Alex - Table Structure

ProductID            ProductPicture                           ProductPictureRollover      
1                      images/EasterIsland.jpg         images/EasteIsland_2.jpg
2            images/Sunrise.jpg                    images/Sunrise_2.jpg

Regular rollover no db works fine.

Pictures are in an images folder.  (Tried taking them out and removing the images in the db - same result)


Webwoman - Using another document - I wrote the rollover code using Javascript: (just curious though - doesn't the move next behavior loop thru the recordset?  ) The rollover by itself works fine - but I can't get it to work with the db either.  

 Rollimage = new Array()

  Rollimage[0]= new Image(416,360)
  Rollimage[0].src = "images/Easter Island.jpg" .....etc.

The rollover by itself works fine - but I can't get it to work with the db either.  
0
 
avajAuthor Commented:
Alex - got it...my problem was in the body on load code that was generated - took that out since its coming from db and it works great!  Thanks for pointing out that feature in Dreamweaver.

Thanks - appreciate eveyone's help.  But Alex's suggestion is the one I used.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.