Solved

Rollovers connected to a database

Posted on 2004-04-11
10
195 Views
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.
0
Comment
Question by:avaj
  • 4
  • 3
  • 3
10 Comments
 
LVL 19

Expert Comment

by:webwoman
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.
0
 
LVL 8

Expert Comment

by:alexhogan
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.

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
 

Author Comment

by:avaj
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:  

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
 
LVL 19

Expert Comment

by:webwoman
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.
0
 
LVL 8

Accepted Solution

by:
alexhogan earned 500 total points
ID: 10807404
[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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:avaj
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?  

0
 
LVL 8

Expert Comment

by:alexhogan
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.
0
 
LVL 19

Expert Comment

by:webwoman
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.
0
 

Author Comment

by:avaj
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.  
0
 

Author Comment

by:avaj
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.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

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…
In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're interested in additional methods for monitoring bandwidt…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

758 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now