Multiple Mouseovers in VSD? Or Alt....

User 451118 Photo


Registered User
57 posts

New user. Looked all over forums. Looking for good solutions!
What I'd like to achieve:
For an apparel site, I have up to 10 fabric choices for products. I have small squares (36px) of colors on a page--due to page size, the squares are fairly close together.
Would like mouse to rollover a color square and have a good sized photo of the fabric swatch appear.
Using the plain mouseover menu doesn't work because it says items overlap.

Can I achieve this in the newest version of VSD? Using the html tool? Or putting code in the header????

Also looking for a solution to show product nicely--on the same page as the fabric swatches. Would like to have a large-ish photo of say, front view. Thumbnail of back view. Toggle between the two with a mouseover.

Anyone have ideas on how best to achieve this? It's not so much the getting the coding as figuring out what VSD is capable of.
Would love to see some examples of apparel sites that use CC.....
THANKS!
windy
User 355448 Photo


Ambassador
3,144 posts

Windy,

Here is a link to one I have used, and still use for many of my photo pages.

http://www.dynamicdrive.com/dynamicinde … bnail2.htm
User 451118 Photo


Registered User
57 posts

Thanks to both of you!
Am I correct that it is a matter of clicking on the html tool and putting the proper code & photo references, etc. into the head section and the body section?

And it seems like it should not be a problem having a number of them close together.

And I can control the size of the enlarged photo

Can you let me know if I'm understanding it correctly?

If so, then....perfect!
Thanks!
windy
User 355448 Photo


Ambassador
3,144 posts

Windy,

There are different ways to control the displayed size of a photo. If you have an image that is very large (2576x1932). If you just display it with no controls, it will display full size. If you specify the width and height, you can make it display any size (even larger), but unless you are careful, you can distort the image. Also, the very large image will take time to load and if you have several on a page, the page will be slow to load.

Because of the time required to load web pages, it is a good idea to resize the photo to the size you want to display. There are many photo programs that will resize, and I generally resize may large photos to 640x480. On some of my photo pages, I have the photos loaded in memory at the 640x480 size, but they are displayed as a 64x48 thumbnail until the mouse is placed over the thumbnail. I get my thumbnails by using the width and height parameters set at 64 and 48 (the code was originally set to 50x50).

I have set a specific width to my website, so my thumbnails fill in one row and then start on the next. I try to limit the number of thumbnails so I have three rows of thumbnails, but with a few changes in my code, I could have thumbnails above and below the photo full size display.

As for how you do this in VSD, I would not be the one to ask. I use the HTML editor, and if you are using that, the Thumbnail Viewer II is what I use and it is just follow the directions on the Dynamic Drive website.
User 451118 Photo


Registered User
57 posts

Just want to thank again billr and Bojan for getting me to dynamicdrive.com. I found lightbox tool tip code that went right into my html tool box and with some editing I've got it! I spent numerous days trying to find a solution, so thanks so. Great advice....
Now, anybody know a slide show better than cc's photo gallery? I'd like something free/inexpensive and with a smoother/nice fade between photos. Don't need any other bells and whistles. Just simple, not doing thumbnails or text...Thanks!
windy
User 392459 Photo


Registered User
17 posts

What do you do with the code that references the external .js file.?
User 355448 Photo


Ambassador
3,144 posts

Aspen,

You put that code where you would place the entire javascript.

You can place the entire code for something directly on the page, as is sometimes done with the DHTML Menu, or you can put a short bit of code on the page, and have the code separate.

In this case, it would be more work to make an external .js file. Each photo page is different and thus uses different code.

If I have misunderstood your question, please elaborate and I can try again.
User 392459 Photo


Registered User
17 posts

Thanks, I guess I should explain a little more because I'm not sure I understand.. In VSD I can insert a HTML box and then copy the code from the Dynamic Drive site as referenced above into the Header and body section. It says you should download the .js file, but it is just code, nothing to really download. Since I am using VSD rather than the Editor, what do I do with that .js code within the confines of VSD. I don't see any reference to the DHTML, within the HTML box.
User 355448 Photo


Ambassador
3,144 posts

Aspen,

There are two parts to the dynamic drive code. There is the part that goes in the head, and starts with <script type="text/javascript"> and ends with </script>. That is the .js file. You can copy it and paste it into the VSD file inside the head of the page, but you need to modify it before you paste it into VSD. There is additional code that you also modify and paste in the body of your VSD page.

In the javascript portion, you need to specify the location of each photo that you are wanting to view. Then in the body section you ne3ed to place the same information inside the thumbnail code.

Hope this helps.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.