PDA

View Full Version : rollover images using layers


wheelie2
12-11-2005, 04:31 PM
Hello, I wonder if anyone could give me some advice please?

I'm re-doing my business website having taught myself the basics on Dreamweaver. I now want it to be a bit flashier and more user-friendly.

I want to have 5 jpeg images across the top and when you roll over each of them in turn they reveal a different jpeg image in the bottom right hand corner of the table.

I have tried using layers to do this and adding behaviours to them and this seems to work ok. BUT I'm having a problem positioning the layers with the table so when the window is resized they move together. I know there's loads of info out there on this subject and I have tried using an extension called "Studio VII Layout designer" which is supposed to allow you to align the layers with the screen but this doesn't work for me for some reason... I have also tried altering the code

<div id="portabletoolslayer" style="position:absolute; width:280px; height:307px; z-index:1; left: 510px; top: 250px;">../Images/portable-marketing-tools.jpg</div></th>

by removing the "position:absolute; "from the code - but this seems to just delete the layer and prevent me from overlapping them, although it does solve the positioning issue.

Am I wasting my time with layers - will they be different in every browser? Is there a lot more complicated code I need to understand to be able to use them and should I just stick to tables? I need the site to be as accessible as possible as it's a business site. Any thoughts would be great and I thank you for your time spent reading this...

I have attached the file in question... By the way - I've been told that dreamweaver places a lot of unneccesary code on pages which isn't good for SEO - is there any way of knowing which code is unnessecary?

Thank you.
Sarah

Creative Insanity
12-11-2005, 05:11 PM
By the way - I've been told that dreamweaver places a lot of unneccesary code on pages which isn't good for SEO - is there any way of knowing which code is unnessecary?
It is not Dreamweaver that places un-needed code, it is that puke program FrontPage.

I will have alook at your attachment and see what you are trying to do and will come back with an answer.

wheelie2
12-11-2005, 05:53 PM
lol, "puke programme"? I can't really comment, I've never used it. Thank you for taking a look for me.

Sarah

Creative Insanity
12-11-2005, 07:25 PM
You are welcome :)
Gimme a sec here trying to get my development server working with no errors.

Creative Insanity
12-11-2005, 08:59 PM
Looking in the properties window when you click on an image I see:
javascript:;
I think that is ment to be:
javascript;

But may not be the prob and still looking.. I have to change all the images since none here and need to see what it is actually doing before I can find a resolve.

Ok found the problem I am sure.

On the large image at the bottom you had them set out like this (divs moved aside.)

http://www.webthings.org/ci/layer1.gif

When you should set it up like this:

http://www.webthings.org/ci/layer2.gif

wheelie2
12-11-2005, 09:33 PM
Hello, Thank you for taking a look for me - I'm slightly confused as to the layout of the images as shown in the image you posted - please take a look at the jpeg file of a screenshot of the file as they show the layout as I set it? What could cause this problem? Is it the coding?

Thank you,

Sarah

Creative Insanity
12-11-2005, 09:54 PM
OK, if you look at your image you will see that there is a td (dotted line) cutting your layer which will allow the layer to float.
If you drag that td to the left a little to line with the left edge of the div your problem should be solved.

http://www.webthings.org/ci/layer3.gif

wheelie2
12-12-2005, 08:05 AM
Thank you - so am I right to assume that layer's position can be defined by table boundaries? It still doesn't solve the window resizing problem however - any ideas?

Thank you,

Sarah

Creative Insanity
12-12-2005, 05:50 PM
You can set a divs location with css files, as for the window resizing what one are you meaning?

wheelie2
12-12-2005, 06:33 PM
When you preview the file in explorer, if you resize the window the layer stays put and the table moves - is there any way of making it so that the two move/stay put together?

Creative Insanity
12-12-2005, 06:37 PM
is there anywhere I can see it in action so I know exactly what you mean?

Maybe I will just toss in some images and see what happens locally.

Creative Insanity
12-12-2005, 07:05 PM
wait a minute.. I just downloaded and open that index file you linked and I noticed that you have another div under that table.

wheelie2
12-12-2005, 07:42 PM
Didn't see that one - I should have checked under frames. However, I've tried again with one simple image in a layer and I still have the resizing issue - you drag the window across and the position of the table and layer just don't match as they should... I've attached another file to illustrate...

Creative Insanity
12-12-2005, 10:20 PM
I see your TDs are in the wrong place again. I attached an image to that file and aligned the tds correctly and no movement here.

Tried in FF and IE

wheelie2
12-13-2005, 05:17 PM
Hello, I'm sorry - what are FF and IE? I've looked at the file you attached but it's not loading the image, it's bumming out for some reason...

Creative Insanity
12-13-2005, 05:34 PM
There is no image to that attachment. What I meant is that I grabbed your code, realigned the TDs, then added an image locally and viewed in FF (FireFox) and IE (Internet Explorer) and no movement of the iframe or table.

What I attached is your code with the TDs realigned. Load that file into DW, toss an image into that div and view it and see if the problem still excists.

wheelie2
12-13-2005, 08:13 PM
Hi there, I've tried the file as suggested and I still get the same problem...? :-(

Creative Insanity
12-13-2005, 11:46 PM
are you working on a mac or something.
I need to see it in action before I can offer any more advice as the file I attached done the trick and I am not really sure what your problem is now.

wheelie2
12-14-2005, 08:08 AM
no, I'm on PC with windows XP. I think I need to give up on layers and just stick to tables for now while I work it out. :( Thank you ever so much for your help, if you do think of anything else which it might be do please let me know.

Thank you once again,

Sarah

Creative Insanity
12-14-2005, 08:53 AM
No we gotta get this sussed out.
It is pretty late here now and first thing in the morning I will setup a temp ftp account for you and pm the details and then you can upload the complete page and images so I can see what is happening and we can fix this problem for you.

wheelie2
12-14-2005, 06:24 PM
Hello, that would be great as I seem to be banging my head against a brick wall on this. Is it true that only the most recent browsers can read layers? or is that pish.

domedia
12-14-2005, 06:53 PM
It's 'pish'. A dreamweaver layer is nothing more than an DIV tag that is absolutely positioned through CSS.

wheelie2
12-14-2005, 06:59 PM
That's good news. It's difficult to distinguish the pish from the truth when you've not encountered things before. While we're on the subject, what's the best way to set up CSS? and If I apply them to a template will they then apply to every page that I duplicate?

Creative Insanity
12-14-2005, 07:01 PM
read pm

davidj
12-15-2005, 08:41 AM
read pm

hehe. I can only imagine

Creative Insanity
12-15-2005, 09:02 AM
No u can't dj

domedia
12-15-2005, 12:45 PM
That's good news. It's difficult to distinguish the pish from the truth when you've not encountered things before. While we're on the subject, what's the best way to set up CSS? and If I apply them to a template will they then apply to every page that I duplicate?
I would put your CSS in a seperate CSS file, and then call it into your template.
That way it should be linked in to all your documents you've made from your template.

wheelie2
12-15-2005, 04:01 PM
Thank you - one question though, how would I go about creating a seperate CSS file? (having never done one before...)

domedia
12-16-2005, 12:13 AM
Here ya go :)
http://www.macromedia.com/devnet/dreamweav...mweaver_10.html ('http://www.macromedia.com/devnet/dreamweaver/articles/css_dreamweaver_10.html')