Hello!

I was wondering if anyone has a smarter solution to my problem than I do. I'm using VSD to create my website and I want it to look a particular way. Basically, the front page is an image of a shelf with various bottles on it that are links to other pages. When you mouseover the bottles, monsters pop out.

At the moment, the way I've done it is to have the shelf as a page background image. Since I haven't been able to find a way to import images into VSD with transparent backgrounds, I've been adding parts of the shelf to the background of the images, and then when I open the images I line them up with the page background image of the shelf, like this:

http://i788.photobucket.com/albums/yy170/hollyjaye/Example1.jpg
This is the image with part of the shelf as the background.


http://i788.photobucket.com/albums/yy170/hollyjaye/Example2.jpg
This is the image pasted into the larger shelf background. (The red lines are just there to show the outline of the image. They won't really be there in the final image)

http://i788.photobucket.com/albums/yy170/hollyjaye/Example3.jpg
This is what it looks like when the image has been lined up with the background.


From there I make the image into a mouseover to create the popping up effect. This works fine for me on my computer, but I've just realised that for anyone with a different screen size the images will be all over the place.

Does anyone have any suggestions on a better way to do this? Or even a solution on how to make the backgrounds of the images transparent so I don't have to do the annoying step of lining them up with the shelf? I've tried saving them as GIFs and PNGs with transparent backgrounds but when I open them in VSD the backgrounds become solid.

Any suggestions? Thanks!

This might be a dumb question, but I don't use VSD so I don't know exactly what features are in it.... ok ok I'll take some time in the next couple weeks and see if I can at least see what features it has lol.

Anyways, the question is, does VSD allow image mapping? If so then you wouldn't need to have the base images as separate images you could put it all in one solid background image (or a few smaller sections that would be easier to manage) and then use an image mapper to map out the bottles for the purpose of using the popups of the monsters or whatever other images.

I don't know if VSD has this capability, but I do know it allows you to insert code with the tools so maybe it's something that can be done that way? Just some food for thought if someone else doesn't have a better idea of course

Great Idea Jo Ann,
However I'm up for a challenge-so HJ if you would send me the files your using, I'd like to give it a go in VSD.

my first thought would be to use the image mapper and insert the code to the page.. I would have to try it..

I just tried it with image mapper and it works just fine.
On this map, each lake area is mapped to a link in the site.
I used the code from this page
http://www.lakesidecanvas.com/ohio_lakes.html
and inserted it using the html tool in VSD

I posted a test site with the VSD, here is the map page
http://www.onelakesideweb.com/demo_site … r/map.html

This is a test site and links may lead to outside sites and the menu is not complete...yet
http://www.onelakesideweb.com/demo_site … teDesigner

Would PNG images work for this also? If not, it's still good to know you can use PNG files in VSD if you want to use images with a transparent background - for instance, the bottle above by itself with no shelf so it could be placed anywhere.

@paintbrush,
I haven't tried png images, but I am sure they will work.
@HJ Harper,
I would make your images into one image and then map the image so it will work in all browsers and resolutions.
I am not real sure what the result is that you want...

If you have any trouble with it, send me the images and I will work it up for you..
support (at) onelakesideweb.com
And tell me what you need it to do.
I would be using GIMP to set up the images and CoffeeCup Image mapper to map it and then add it to VSD.

BTW, for a png image to be transparent, the alpha layer has to be in there too.

Is there a way to place code into HTML for allowing pictures to be clicked on to create a new page with the new larger photo popping up to view..???
Not sure how to do this at all? or what type of code to use...
I have ried to use Photo Gallery but I have to add so many photo image .jpg files to my web site..
How does any one do this an easier way.
Thanks

Hiya Doodles,

How many images are you trying to do? If it's just a handful give http://lightbox2.com a try and see if that is what you need. It opens a specific image in a separate box pretty nicely. They have some examples on their page which show you how it works, and you can see it on my home page for my shop at http://accessoriesoftheworld.com which shows you how you can add multiple images to a setup also. It's done very nicely in tables which works pretty slick for this.

If you're looking for something more robust then the PhotoGallery would be the way to go. Not sure what the issue with uploading the images is, so maybe you have a problem there that I'm unaware of. I do upload a lot of images here and there and it's not all too much hassle. I start the upload and walk away and get some coffee, take a bathroom break, read forums here or my email or the mail or whatever lol. Before I know it they are all uploaded and good to go

Lemme know if you need assistance with either lighbox or anything else on this and I or someone else here will be glad to give you a hand on it

@DOODLES, do you have a URL to see what your doing..
what program are you using?
and more details about what you are wanting to do. I understand about opening to a new page or window. There are many different ways to do this....

open in same window
<a href="www.example.com/myimage.jpg" target="_self"><img src="myimage_thumbnail.jpg"></a>
open in new window
<a href="www.example.com/myimage.jpg" target="_blank"><img src="myimage_thumbnail.jpg"></a>

EDIT: looks like Jo Ann is on in..