PDA

View Full Version : Question regarding placing images where I want in dreamweaver and how to get this background right?


12084182
05-22-2011, 11:20 PM
Sorry if this has been asked before, which I'm sure it has, but I went through a couple of the pages in the forums and couldn't find a similar thread.

I have a class project to make a website about recycling. I've been taught stuff in class but there's one thing I can't figure out and I didn't need it until now. I have everything else, but the one thing I can't figure out.

First of all, this is my background image:

http://i.imgur.com/kWfLc.jpg

I'm hoping to keep it the way it is, but it seems I'll have to edit it to make it be a suitable size for the browser as it seems no matter what I do, the image comes out wrong. Either I place it as background and then I can't see the bottom, it wont let me scroll to it or anything (no matter what I chose when I try to edit the body style) and when I place it just as an image, it shows a white border around the top.

I need the lighter space inside to place my text there. The various plastic bottles are going to be my links, my second problem however is making those links.
I know how to make a hotspot, but I want that when you hover over, the bottle changes, so I made separate images for that, but it's not working.

Here are examples so you get the idea what should happen when you hover over
http://i.imgur.com/mimiA.png
http://i.imgur.com/GZOJ5.png

I want to place them on top of the bottles already present but can't seem to do it. Dreamweaver won't let me place images where I want but only lets me align them against another object/text.

How stupid is this? I can use other programs that let me do that, but I don't want to because dreamweaver is required for my class.

Any suggestions how I can fix this? Or other ideas... I just thought that picture looked cool the way it was and the bottles would serve as nice links.

johnMoss
05-24-2011, 05:34 AM
The bottles can serve as links, here's a stunt you can pull, but by now i would assume you have the issue solved... If not:
1) Yes, you need to fix the picture... If you didn't declare a size for it in your css then it will post the actual size. You have access to photoshop, right? Or some program similar... Resize the picture to dimensions which you are happy with.
2) Create png images of roughly 50 x 50 pixels and simply put a single dot in the middle of the image, matching the color of your requisite bottle at the overlay position precisely, set property to transparent, and then absolutely position it over your bottle.
3) Each image, use an a hover css rule to hyperlink to the desired page...