PDA

View Full Version : Image Effects



Lili
08-09-2007, 06:38 AM
Hi,

Can anyone give me an idiot proff step by step guide to creating an image effect?

Basically I have read the Help notes and canot make head nor tail of it all for what I want to achieve.

I want to have a thumbnail image that when the cursor is placed over that image, an enlarged version appears on screen.

I am currently totally baffled by it all...

danlefeb
08-09-2007, 07:22 AM
Hello Lili, welcome to DT!

There are a lot of different ways to go about what you want. The most common would probably be to use either HTML and Javascript or, if you must, Flash. I would advise against any Flash on your site unless necessary, though. For each option of coding languages, there are even MORE options regarding exactly what you want to happen. Do you want it to pop up as if it were an alt tag, do you want it to pop up in a new window (highly not recommended), or do you want it to show somewhere else in your page? The design of your page and the amount of interactivity you want will probably drive which option you choose, but regardless of which it is there is going to be a decent amount of coding involved. If you don't want to do any coding, then I would suggest you look for free Javascripts online and see if you can copy/paste to get close to what you want. For customization, though, there's no way to get around just rolling up your sleeves and coding.

Lili
08-09-2007, 09:29 AM
Hi danlefeb,

HTML is fine by me. I know nothing about Flash.

I just want the image to appear on the screen...not necessarily as a new window. I'd like it to be as quick and easy to load as possible.

My initial plan is to have the thumbnails either to the left of the screen or along the bottom and as you place the cursor over them, a larger image appears to the right/middle of the main screen.

By coding, do you mean write my own HTML? If so, haven't done that for over 15 years! Is it easy to find code online? Any suggestions for key words to search for?

Lili
08-09-2007, 09:40 AM
Back again...

This site has an example of what I want to do

http://www.cosmosphoto.com/cosmos/portfolios.html

Place cursor over one of the smaller images to the bottom of the screen and you will see a larger version appear above.

I am now suspecting this is Flash...am I correct?

danlefeb
08-09-2007, 10:35 AM
Nope, that's done with Javascript. I don't use Dreamweaver for any of my web work anymore and I don't have a copy in front of me at work, but looking at the coding it looks to be a very simple black-box function. Black-box in that it's not meant to be changed at all, it's supposed to "just work". But things don't always "just work", so it's always a good idea to look under the hood and see what sort of coding is going on, that way if something goes wrong you know how to fix it -- or at least what is the right direction to look.

In the header, you have this:


<script language="JavaScript">
<!--
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


That's the guts and, if you're unfamiliar with coding, what could be very confusing. Basically, it's simply setting up the code that you'd use in the body of the HTML...that's where you tell it what variables are put into the code above.

So in the actual body of the HTML, you have two things that are being influenced. The first is the larger image:


<IMG src="ph1.jpg" alt="" name=photo width="325" height="325" id=photo>

That tells it the initial image to be displayed. It gives the image an id (photo) so that it can be called to later on. There's another image that gets swapped out, called 'leg12.gif' - same code, basically, except it gets the id 'menu'. I'm not sure why it's called menu when it's really more of a description of the image than a menu, but oh well. The system doesn't care, as long as it's consistent. It just gets confusing to know what it is if it doesn't make sense...at least for me :)

Then, the thumbnail image has this code:

<img onmouseover="MM_swapImage('photo','','ph2.jpg','menu','','leg2.gif',1)" height="60" alt="" src="im2.jpg" width="90" />
What that does is call the script from the header (MM_swapImage) and, in a nutshell, tells it to take the image 'ph2.jpg' and put it in the id tag 'photo'. It also tells it to put the image 'leg2.gif' in the place of 'menu', or replacing the 'leg12.gif' image that was originally there.

That was extremely brief in explaining what the code is doing behind the scenes. I hope it made sense...as I said before, it's extremely important to have at least a basic knowledge of coding if you're going to do any sort of web development. The only thing the interface does (regardless if you use Dreamweaver, Expression, etc.) is automatically write code for you. So if something doesn't seem to be working, you can always go into the code and fix it.

I would highly recommend you pick up the Dreamweaver 8 kit (http://www.digitaltutors.com/store/product.php?productid=933&cat=50&page=1) because it goes into detail on how to do things like Swap Image, and other effects as well as taking you through the whole process of building a site from start to finish.

All that said, if you simply want to know how to do a Swap Image in Dreamweaver, here's a good article (http://www.peachpit.com/articles/article.aspx?p=31661&seqNum=5&rl=1) explaining how to do that.

Lili
08-09-2007, 11:07 AM
OK....initially this looks horrendous...but I shall take some quiet time and work through it and see what I can do.

Thanks for all your advice and links today. Much appreciated.

danlefeb
08-09-2007, 11:38 AM
It takes a little time to figure out the coding side of things, but stick with it and you'll get it. :)

Lili
08-12-2007, 04:18 AM
Hello again,

Well, after considering code option, I decided to have a crack at the instructions you attached for Creating Fancy Rollovers. All looked very simple. I followed the instructions to the letter but it still doesn't work. Everything looked correct in the boxes right up until I previewed and then nothing changed.

This is now making me think that maybe something is wrong with my version of Dreamweaver....I think I am going to have to rethink the site design! Or pay someone else to do it!

Lili
08-12-2007, 04:30 AM
One last thought!

Maybe in the DW instructions I am linking to the wrong thing. These are the help instructions:

1 In the Document window, place the insertion point where you want the rollover to appear.
2 Insert the rollover by using one of these methods:
In the Objects panel's Common category, click the Insert Rollover Image icon.
In the Objects panel's Common category, drag the Insert Rollover Image icon to the desired location in the Document window.
Choose Insert > Interactive Images >Rollover Image.
The Insert Rollover Image dialog box appears.
3 In the Image Name field, type a name for the rollover image.
4 In the Original Image field, click Browse and select the image or type the path of the image you want displayed when the page loads.
5 In the Rollover Image field, click Browse and select the image or type the path of the image you want displayed when the pointer rolls over the original image.
6 If you want the images preloaded in the browser's cache so they load faster, select the Preload Images option.

7 In the When Clicked Go to URL field, click Browse and select the file, or type the path to the file you want to open when a user clicks the rollover image.
Note: If you don't set a link for the image, Dreamweaver inserts a null link (#) in the HTML source code to which the rollover behavior is attached. If you remove the null link, the rollover image will no longer work.

8 Click OK to close the Insert Rollover Image dialog box.

No. 7 is maybe where I am going wrong. I have linked to the image gif and have also tried linking to a new html page.

When I preview, the image I want to appear as a rollover is shown on the screen but the thumbnail is not shown. No rollover effect appears but if I click on the image it links to the html page I set earlier! I feel I am so close and yet so far from getting this to work!

Arathron42
03-25-2009, 02:28 PM
Hi Lili,

Couldn't help but notice that one of the free videos from the dreamweaver tutorial cds was for just this thing.

http://www.digitaltutors.com/digital_tutors/samplevideo.php?v=1303

This is a great tutorial set by the way, and if you don't have it I highly recommend it.