Role over pics

The UK's most regular instructor-led training courses.
Training information: dreamweaver course uk · Dreamweaver training · Adobe dreamweaver training

Resolved · Medium Priority · Version CS3

2 posts

ReplySat 28 Mar 2009, 09:10Delegate Rob said...

Rob has attended:
No courses

Role over pics

i want to place a small pic on my site and when the curser is roled over it the pic then appears in a larger size how would i do that thnx BOB.

798 posts

ReplyMon 30 Mar 2009, 11:33Trainer Rich said...

RE: role over pics

Hi Rob,

Thanks for your question.

You could do this a number of ways. Probably the best is to create a DIV, initially hidden (Display: 'none'), that contains the larger picture.

Then set a Behaviour (onMouseOver) on the smaller (thumbnail) picture that turns the DIV's Display status to 'block', and vice versa for onMouseOut.

Dreamweaver has a Behaviour for this called MM_showHideLayers.

Here is some sample code:



<html>

<head>

<script type="text/javascript">

<!--

function MM_showHideLayers() { //v9.0

  var x,p,v,obj,args=MM_showHideLayers.arguments;

  for (x=0; x<(args.length-2); x+=3) 

  with (document) if (getElementById && ((obj=getElementById(args[x]))!=null)) { v=args[x+2];

    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

    obj.visibility=v; }

}

//-->

</script>

</head>



<body onload="MM_showHideLayers('larger_image_div','','hide')">

<img src="small_image.gif" onmouseover="MM_showHideLayers('larger_image_div','','show')" onmouseout="MM_showHideLayers('larger_image_div','','hide')" />

<div id="larger_image_div"><img src="larger_image.jpg" /></div>

</body>

</html>

To learn more about Dreamweaver and skills like this, perhaps you'd like to attend our Dreamweaver CS3 Introduction course.

If this answer resolves your query, please mark the question as 'resolved' (see below). Otherwise, please post a follow-up response to this post, and I will assist you further.

Regards, Rich

2 posts

ReplyThu 2 Apr 2009, 16:32Delegate Rob said...

RE: role over pics

Thanx for the replie
i realy dont want to sound dim but i built my site myself and i think it works well but i have never used code and realy dont understand any of what you put yep DIM
My role over button idea worked well but the pic stays small
Im going to be made redundant soon and realy want to do more photographic work but need the site to shine without investing lots of cash
any help is gracefully welcomed
checkout www.rlwhitephotography.co.uk
and please feel free to comment BOB

798 posts

ReplyFri 3 Apr 2009, 17:08Trainer Rich said...

RE: role over pics

Hi Bob,

The site looks okay to me, fairly basic, but as long as it's showing off your photos, nothing else really matters.

The photos did load a bit slowly though, make sure you resize your photo dimensions in a program like Photoshop. Don't just upload the full sized photo and then 'squash' the photo on the page using HTML 'width' and 'height' parameters. Because it means the visitor is loading full sized photos, but not seeing them full size on the screen. Makes your site slower.

You don't need to understand the code if you have Dreamweaver, that's the point of it. Read up on Behaviours in Dreamweaver's Help/Tutorial section (see 'About' menu) Add the 'Show/Hide Layer' behaviour to your smaller image.

If you want your site to shine without investing loads of cash, may I suggest a pre-built template? You can buy these fairly cheaply and there are loads of web sites that sell them. They should be able to help you set up and install them on your web space too.

We're a training company. So the only help we can give is to suggest you come onto one of our Dreamweaver courses. See 'training' tab on this site for more details, or my link in previous post.

May I suggest http://www.smugmug.com to you - as I feel their service is very well priced, comes with support and photos really do look a lot better on that site. Plenty of templates to choose from. See their support and FAQ pages for more info. It's certainly where I'd go if I were a photographer.

Good luck.

Regards, Rich

Fri 10 Apr 2009: Automatically marked as resolved.

· Why Upgrade To Dreamweaver CS4?
· Develop Websites More Effectively With Dreamweaver
· How Dreamweaver Courses for Your Marketing Staff Can Cut IT Payroll Expenses
· Give Your Website An Image Overhaul With Abode Dreamweaver
· Making Your Business Look Its Best With Dreamweaver

Please browse our web site to find out more about
dreamweaver course uk and other Microsoft training courses.