Rollovers connected to a database

Posted on 2004-04-11
Medium Priority
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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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 2000 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 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.

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

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.

Join & Write a Comment

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…
Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
Hi, this video explains a free download that you can incorporate into your Access databases, or use stand-alone for contact management. Contacts -- Names, Addresses, Phone Numbers, eMail Addresses, Websites, Lists, Projects, Notes, Attachments…
If you are looking for an automated solution for backup single or multiple Office 365 user mailboxes to Outlook data file, then you can use Kernel Office 365 Backup & Restore tool. Go through the video to check out the steps to backup single or mult…

624 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