PDA

View Full Version : MX timeline, 2 images in one layer


ww1aero
02-29-2008, 07:13 AM
Hi,
In Dreamweaver MX (6), can I use the timeline feature to have 2 images appear to alternate, using only one layer?

It would be OK if I could get it to work in any of the following ways.....

1. If layer (with background image) would disappear revealing an underlying image, not located within a layer (but I haven't been able to get the underlying image to line up all the way to the left, like it would have to, to line up properly).

2. If 2 background images, or 2 inserted images alternated in the same layer.

3. If image (inserted over a background image) would disappear revealing the background image.

The simple animation effect I'm trying for would make a cartoon character appear to blink, this would be looped to run as long as the page was loaded.

I have the page constructed in layers (set not to overlap).

Thanks....................Pete

tux
02-29-2008, 07:31 AM
Hello Pete,

Why cant you just use an animated gif. If you only have two images to do this with it should be very simple using something like Image Ready in Photoshop.

If you want to do it the way you are asking you will need to use CSS to position the images. Why do you only want to use one layer?

Have a look at this for more on CSS...

http://www.w3schools.com/css/default.asp ..... but I would think an animated gif would be your best option.

Regards, Paul

ww1aero
02-29-2008, 08:41 AM
Hi Paul,

Thanks for the reply. I can't get the image quality I wanted using gif files.
I was going by David Karlin's recommendations (from his books), about CSS not being seen quite the same way by different browsers. And I thought I was keeping it simpler for myself, but maybe I wasn't.

I built the page using non-overlapping layers (so I could convert to tables later, but I don't think there are that many old browsers to worry about now that would have trouble with layers). I used layers throughout, so I could position things exactly where I wanted them to be, I just sized my jpegs accordingly (some as background images, some as inserted images).

I only wanted to use one layer because the only change I want to make is in one place, (no apparent up/down/sideways motion). And I couldn't precisely place the background (sky & clouds), for the characters, if I didn't put it in it's own layer (except if I used CSS like you said).

I just wanted one image to intermittently change with a second image in a loop.

I really don't want to use CSS, so I may forgo the "blink", and just go with static for now. It's my own site (T-shirt sales), the first I've built, and I should probably just concentrate on getting the rest of the pages finished.

I'll have another look at using gifs though, to see if I can get the image quality I want.

For now , I just used a mouse rollover image change.

Thanks.....................Pete

tux
02-29-2008, 09:39 AM
Hi Pete,

I had a bit of a think about what you are trying to do and maybe you could use Javascript. It will rotate two or more images at a pre determined rate so you should be able to get the effect you are after. The following is something I used in the past and have dug it out. Give it a go and see if it will work for you.

<html>

<head>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var interval = 1; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://www.yoursite/path to your image1");
image_list[image_index++] = new imageItem("http://www.yoursite/path to your image2");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
// End -->

</script>
</head>

<body onload="rotateImage('rImage')">

<img name="rImage" src="http://www.yoursite/path to your image1">

</body>
</html>

Let me know if it acheives what you want.

Regards, Paul

domedia
02-29-2008, 02:30 PM
I was going by David Karlin's recommendations (from his books), about CSS not being seen quite the same way by different browsers. This advice is quite outdated. If it is current advice, he is wrong, very wrong. Any professional will tell you to use web standards, HTML for structure and CSS for design/style.

ww1aero
03-01-2008, 05:15 AM
Hi Pete,

I had a bit of a think about what you are trying to do and maybe you could use Javascript. It will rotate two or more images at a pre determined rate so you should be able to get the effect you are after. The following is something I used in the past and have dug it out. Give it a go and see if it will work for you.

Let me know if it acheives what you want.

Regards, Paul

Thanks for the code Paul,

Within the next couple of days, I'll try it out in a clone of my home page, plug in my specifics, (I'm not experienced with code so it may take a few tries to get it right...), and put it in place.

In the meantime, the rollover image change I have on there now is OK too, it has the element of surprise if you happen to hit the right spot with the mouse pointer. www.Frankenmouse.com (http://www.Frankenmouse.com)

Thanks again, and I'll be sure and let you know how it works......................Take Care,.......Pete

ww1aero
03-01-2008, 05:29 AM
This advice is quite outdated. If it is current advice, he is wrong, very wrong. Any professional will tell you to use web standards, HTML for structure and CSS for design/style.


Hi,

I was going by his old book on Dreamweaver MX. He did send me his new book this past week though, to look over, because I had recently emailed him a question about his MX book. I looked for the same topics in his new book and he does still seem to feel the same way, here's a summary of a few sentences from that area of the new book.......

Page Design With CSS
Condensed Excerpts from Macromedia Dreamweaver 8 / How-To’s- 100 Essential Techniques, by David Karlins, Adobe Press, 2007.

He discusses whether to use tables or CSS for page design. “Tables are simpler to learn, you can be more confident your pages will look the way you intended in most desktop browsers. On the other hand, current opinions on website construction is that using CSS makes your content easier to distribute on different platforms……”.
He mentions, “a downside to using CSS for page design in Dreamweaver, ………….while it’s easy to apply CSS text formatting, the same cannot be said for page-level design. You can do it, but………ability to generate page layout CSS (in Dreamweaver) is less that if you hand coded it.”
This is only a summary of a few sentences, he goes on to talk in much more detail about CSS in regard to using Layers and DIVs, XHTML.
He likes CSS for local formatting, but still (even in this new 2007 book) seems to recommend possibly not using CSS style sheets for beginners.
So, as a neophyte, I decided not to use CSS, on page design, because it seemed that for me, layers/tables would be easier to edit. But again, I'm coming from a graphics background, not web site creation.

Thanks.....................Pete

tux
03-01-2008, 12:08 PM
Within the next couple of days, I'll try it out in a clone of my home page, plug in my specifics, (I'm not experienced with code so it may take a few tries to get it right...), and put it in place.

The code is in three parts. All you need to do is put the first part in the head of your page, the second is the onload command so just add it to your body tag. The last bit you just put where you want the image on your page.

Here is the three parts separated....

Put this in the head, changing the path to your images.

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var interval = 1; // delay between rotating images (in seconds)
var random_display = 0; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("http://www.yoursite/path to your image1");
image_list[image_index++] = new imageItem("http://www.yoursite/path to your image2");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
// End -->

</script>

Replace your body tag with this....

<body onload="rotateImage('rImage')">

.... and finally put this where you want your image, again changing the path to your image.

<img name="rImage" src="http://www.yoursite/path to your image1">

Good luck.

Regards, Paul

Rob_Che
03-01-2008, 12:28 PM
Your comments make a lot of sense to me Pete...

“Tables are simpler to learn, you can be more confident your pages will look the way you intended in most desktop browsers"

That's my feeling... I know how powerful css is and seems stable where I have used it... I will keep chipping away at it !

Rob

domedia
03-01-2008, 03:14 PM
He discusses whether to use tables or CSS for page design. “Tables are simpler to learn, you can be more confident your pages will look the way you intended in most desktop browsers. On the other hand, current opinions on website construction is that using CSS makes your content easier to distribute on different platforms……”. [/SIZE]
He mentions, “a downside to using CSS for page design in Dreamweaver, ………….while it’s easy to apply CSS text formatting, the same cannot be said for page-level design. You can do it, but………ability to generate page layout CSS (in Dreamweaver) is less that if you hand coded it.”
This is only a summary of a few sentences, he goes on to talk in much more detail about CSS in regard to using Layers and DIVs, XHTML.
He likes CSS for local formatting, but still (even in this new 2007 book) seems to recommend possibly not using CSS style sheets for beginners.
So, as a neophyte, I decided not to use CSS, on page design, because it seemed that for me, layers/tables would be easier to edit. But again, I'm coming from a graphics background, not web site creation.

Thanks.....................Pete

As I read this I'm very disappointed in the authors recommendations. The professional community has embraced the concept of web standards for some time, and many of the new generation of web designers being taught by professionals have never done a design with Tables, nor do they know how to.

It might be that the author strictly talks about Dreamweaver ability to render CSS. This shortcoming belongs to the editor not the CSS support in the browsers. I *never* preview pages in DW, I think it has no value. No one is going to view my website in DW, so I preview it in browsers. Feel welcome to let the author know about this thread, he might have some more insight and clarification.

ww1aero
03-01-2008, 10:19 PM
As I read this I'm very disappointed in the authors recommendations. The professional community has embraced the concept of web standards for some time, and many of the new generation of web designers being taught by professionals have never done a design with Tables, nor do they know how to.

It might be that the author strictly talks about Dreamweaver ability to render CSS. This shortcoming belongs to the editor not the CSS support in the browsers. I *never* preview pages in DW, I think it has no value. No one is going to view my website in DW, so I preview it in browsers. Feel welcome to let the author know about this thread, he might have some more insight and clarification.

Hi,
I will email him, and let him know about this thread. Like I said before, I am not experienced enough to render a knowledgeable opinion on this subject.
I was just trying to keep it simple for myself until I have a little more exposure to the whole area.

..........................................Pete

ww1aero
03-01-2008, 10:21 PM
The code is in three parts. All you need to do is put the first part in the head of your page, the second is the onload command so just add it to your body tag. The last bit you just put where you want the image on your page.

Good luck.

Regards, Paul

Thanks again Paul, that will speed things along for me!.................Pete

ww1aero
03-01-2008, 10:34 PM
Your comments make a lot of sense to me Pete...



That's my feeling... I know how powerful css is and seems stable where I have used it... I will keep chipping away at it !

Rob

Hey Rob,

Like I've said in an earlier post, I'm certainly not qualified to give advice on the subject of coding, web site building, CSS, etc.. I just wanted to get my own site built, and keeping it simple made sense to me. But maybe I'm already behind the times right from the start! At least my site is working, but I'm open to trying it a different way next time. (When building another site for myself, I don't plan on building them for others). I do like the freedom of doing it myself though, instead of trying to explain what I want to someone else first, not to mention helping to save money.

Take Care..............Pete