Role over pics

Resolved · Medium Priority · Version CS3

Sat 28 Mar 2009, 09:10 Delegate 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.

Mon 30 Mar 2009, 11:33 Trainer 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

Thu 2 Apr 2009, 16:32 Delegate 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

Fri 3 Apr 2009, 17:08 Trainer 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.

Training courses

	98.7 % recommend us
	More live stats...

Training information:

Active questions
Advanced/consultancy questions
Today's questions
Unanswered questions
Popular forum topics

Dreamweaver tip:

Paragraph formatting

in Dreamweaver if you type in text and press entre you get double line spacing.

To avoid this hold down the shift key and then press Enter for a soft break

View all Dreamweaver hints and tips