Rollovers connected to a database

Posted on 2004-04-11
Last Modified: 2010-05-18
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.
Question by:avaj
  • 4
  • 3
  • 3
LVL 19

Expert Comment

ID: 10805242
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.

Expert Comment

ID: 10805468
> 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.


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

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.

Author Comment

ID: 10806150
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:  


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?

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

LVL 19

Expert Comment

ID: 10806898
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.

Accepted Solution

alexhogan earned 500 total points
ID: 10807404
Alex - I don't think I follow you when you say " select a data source instead of the file from a location".

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>

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.

Author Comment

ID: 10808397
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?  


Expert Comment

ID: 10809538
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.
LVL 19

Expert Comment

ID: 10809889
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.

Author Comment

ID: 10809964
 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.  

Author Comment

ID: 10810077
Alex - got 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.

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
I still run into .cgi files every now and then. In some instances, I actually prefer the simplicity of a .cgi script to other options. Since I use DreamWeaver extensively, what I needed was a way to open .cgi scripts in Dreamweaver. And I wanted to …
In an interesting question ( here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question