We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now


Rollovers connected to a database

avaj asked
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.
Watch Question

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.
> 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.


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?

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.
Unlock this solution and get a sample of our free trial.
(No credit card required)


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?  

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.

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.


 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.  


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.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.